User:TheMcr/common.js: Difference between revisions

Boobpedia - Encyclopedia of big boobs
Jump to navigationJump to search
No edit summary
Tag: Manual revert
No edit summary
Line 1: Line 1:
document.addEventListener('DOMContentLoaded', function () {
<script>
    // Handle images
const tooltip = document.createElement('div');
    var images = document.querySelectorAll('img'); // Select all images on the page
tooltip.className = 'tooltip';
tooltip.style.display = 'none';
tooltip.style.width = '300px';
tooltip.style.z-index = '1000';
document.body.appendChild(tooltip);


  images.forEach(function (image) {
document.querySelectorAll('a').forEach(link => {
    // On mouse enter (hover)
  link.addEventListener('mouseenter', async (e) => {
    image.addEventListener('mouseenter', function () {
    const url = new URL(link.href);
        image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; // Smooth transition for scaling and shadow
    const title = decodeURIComponent(url.pathname.split('/').pop());
        image.style.transform = 'scale(1.1) translateY(-10px)'; // Grow and move up by 10px
        image.style.boxShadow = '0px 10px 20px rgba(0, 0, 0, 0.3)';
 
    });


     // On mouse leave (hover out)
     tooltip.style.display = 'block';
    image.addEventListener('mouseleave', function () {
    tooltip.innerHTML = 'Loading...';
        image.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
        image.style.transform = 'scale(1) translateY(0)'; // Reset size and position
        image.style.boxShadow = 'none'; // Remove the shadow
    });


    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';
  });
});
});
</script>

Revision as of 14:46, 5 April 2025

<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';
  });
});
<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';
  });
});
</script>
Retrieved from "https://www.boobpedia.com/wiki/index.php?title=User:TheMcr/common.js&oldid=916817"