74 lines
No EOL
2.6 KiB
JavaScript
74 lines
No EOL
2.6 KiB
JavaScript
// custom popups that appear on hover that uses the alt attribute on elements
|
|
// generated with ai i'm SORRY but i'm stupid and this works so its probably fiiiine
|
|
// i'll probably redo this when i can be assed to learn js myself
|
|
// Wait for DOM to be fully loaded before executing code (do we even need this. my site is just basic bitch html)
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Create popup element
|
|
let popup = document.getElementById('alt-popup');
|
|
|
|
// If popup doesn't exist, create it
|
|
if (!popup) {
|
|
popup = document.createElement('div');
|
|
popup.id = 'alt-popup';
|
|
popup.className = 'alt-popup';
|
|
document.body.appendChild(popup);
|
|
}
|
|
|
|
// Find all elements with alt attributes
|
|
function initializePopups() {
|
|
// Get all elements with alt attributes
|
|
const elementsWithAlt = document.querySelectorAll('[alt]');
|
|
|
|
// Add mouse events to each element
|
|
elementsWithAlt.forEach(element => {
|
|
element.addEventListener('mousemove', showPopup);
|
|
element.addEventListener('mouseout', hidePopup);
|
|
});
|
|
}
|
|
|
|
// show popup and position it near the cursor
|
|
function showPopup(event) {
|
|
// get alt text
|
|
const altText = event.target.getAttribute('alt');
|
|
|
|
if (altText) {
|
|
// use alt text in popup
|
|
popup.textContent = altText;
|
|
|
|
// correct popup positioning away from cursor and make it visible
|
|
popup.style.left = (event.clientX + 20) + 'px';
|
|
popup.style.top = (event.clientY + 20) + 'px';
|
|
popup.style.opacity = '1';
|
|
}
|
|
}
|
|
|
|
function hidePopup() {
|
|
popup.style.opacity = '0';
|
|
}
|
|
|
|
// Initialize popups on load
|
|
initializePopups();
|
|
|
|
if (window.MutationObserver) {
|
|
const observer = new MutationObserver(mutations => {
|
|
mutations.forEach(mutation => {
|
|
if (mutation.addedNodes.length) {
|
|
initializePopups();
|
|
}
|
|
});
|
|
});
|
|
|
|
if (document.body) {
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
}
|
|
}
|
|
});
|
|
|
|
// Start observing the document with the configured parameters
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
|
|
// snippet that copies the html for my button(s)
|
|
function copyButton() {
|
|
navigator.clipboard.writeText ('<a href="https://synth.download"><img src="https://synth.download/assets/buttons/sneexy.svg" alt="Sneexy" title="Sneexy"></a>');
|
|
alert("button html copied!");
|
|
}; |