User:TheMcr/common.js: Difference between revisions

Boobpedia - Encyclopedia of big boobs
Jump to navigationJump to search
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
document.addEventListener("DOMContentLoaded", function () {
    const table = document.querySelector('.wikitable');


const tooltip = document.createElement('div');
    // Apply fade-in effect
tooltip.className = 'tooltip';
    table.style.opacity = 0;
tooltip.style.display = 'none';
    table.style.transition = "opacity 2s";
tooltip.style.width = '300px';
    setTimeout(function() {
tooltip.style.z-index = '1000';
        table.style.opacity = 1;
document.body.appendChild(tooltip);
    }, 10);


document.querySelectorAll('a').forEach(link => {
    // Hover effect for each row
  link.addEventListener('mouseenter', async (e) => {
    const rows = table.querySelectorAll('tr');
    const url = new URL(link.href);
    rows.forEach(row => {
    const title = decodeURIComponent(url.pathname.split('/').pop());
        row.addEventListener('mouseenter', function() {
            row.style.transform = "scale(1.05)";
            row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
            row.style.backgroundColor = "#f0f0f0";
        });


    tooltip.style.display = 'block';
        row.addEventListener('mouseleave', function() {
    tooltip.innerHTML = 'Loading...';
            row.style.transform = "scale(1)";
 
            row.style.backgroundColor = ""; // reset background color
    const response = await fetch(`https://www.boobpedia.com/${title}`);
        });
    const data = await response.json();
     });
 
    tooltip.innerHTML = `
      <strong>${data.title}</strong><br>
      ${data.thumbnail ? `<img src="${data.thumbnail.source}" alt="${data.title}">` : ''}
      <p>${data.extract}</p>
    `;
 
    const rect = link.getBoundingClientRect();
    tooltip.style.left = `${rect.right + 10 + window.scrollX}px`;
    tooltip.style.top = `${rect.top + window.scrollY}px`;
  });
 
  link.addEventListener('mouseleave', () => {
    tooltip.style.display = 'none';
  });
});
<script>
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.style.display = 'none';
tooltip.style.width = '300px';
tooltip.style.z-index = '1000';
document.body.appendChild(tooltip);
 
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('mouseenter', async (e) => {
    const url = new URL(link.href);
    const title = decodeURIComponent(url.pathname.split('/').pop());
 
    tooltip.style.display = 'block';
    tooltip.innerHTML = 'Loading...';
 
    const response = await fetch(`https://www.boobpedia.com/${title}`);
    const data = await response.json();
 
    tooltip.innerHTML = `
      <strong>${data.title}</strong><br>
      ${data.thumbnail ? `<img src="${data.thumbnail.source}" alt="${data.title}">` : ''}
      <p>${data.extract}</p>
    `;
 
    const rect = link.getBoundingClientRect();
    tooltip.style.left = `${rect.right + 10 + window.scrollX}px`;
    tooltip.style.top = `${rect.top + window.scrollY}px`;
  });
 
  link.addEventListener('mouseleave', () => {
     tooltip.style.display = 'none';
  });
});
});

Latest revision as of 15:59, 5 April 2025

document.addEventListener("DOMContentLoaded", function () {
    const table = document.querySelector('.wikitable');

    // Apply fade-in effect
    table.style.opacity = 0;
    table.style.transition = "opacity 2s";
    setTimeout(function() {
        table.style.opacity = 1;
    }, 10);

    // Hover effect for each row
    const rows = table.querySelectorAll('tr');
    rows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            row.style.transform = "scale(1.05)";
            row.style.transition = "transform 0.3s ease, background-color 0.3s ease";
            row.style.backgroundColor = "#f0f0f0";
        });

        row.addEventListener('mouseleave', function() {
            row.style.transform = "scale(1)";
            row.style.backgroundColor = ""; // reset background color
        });
    });
});
Retrieved from "https://www.boobpedia.com/wiki/index.php?title=User:TheMcr/common.js&oldid=916829"