(Created page with "$(document).ready(function(){ const matchElements = document.querySelectorAll('.match'); if (matchElements.length > 0) { // Add event listeners to each match element matchElements.forEach(matchElement => { matchElement.addEventListener('mouseover', () => { // Get the position of the .match element const matchRect = matchElement.getBoundingClientRect(); // Position the .match-details element to the right of the .match element con...") |
mNo edit summary |
||
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
const matchElements = document.querySelectorAll('.match'); | |||
if (matchElements.length > 0) { | if (matchElements.length > 0) { | ||
// Add event listeners to each match element | // Add event listeners to each match element | ||
Line 6: | Line 6: | ||
matchElement.addEventListener('mouseover', () => { | matchElement.addEventListener('mouseover', () => { | ||
// Get the position of the .match element | // Get the position of the .match element | ||
var matchRect | |||
if ( matchElement.querySelector(':scope > .reverse') ) { | |||
matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect(); | |||
} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();} | |||
// Position the .match-details element to the right of the .match element | // Position the .match-details element to the right of the .match element | ||
const matchDetails = matchElement.querySelector('.match-details'); | const matchDetails = matchElement.querySelector('.match-details'); | ||
if (matchDetails) { | if (matchDetails) { | ||
matchDetails.style.position = 'fixed'; | matchDetails.style.position = 'fixed'; | ||
matchDetails.style.top = `${matchRect.top}px`; // Keep the | matchDetails.style.top = `${matchRect.top}px`; // Keep the bottom position the same as .match | ||
matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match | matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match | ||
matchDetails.style.transform = 'translateY(-25%)'; | matchDetails.style.transform = 'translateY(-25%)'; | ||
matchDetails.style.width = '360px'; | |||
} | } | ||
}); | }); | ||
}); | }); | ||
} | } | ||
}); | }); |
Latest revision as of 21:45, 8 October 2023
$(document).ready(function(){
const matchElements = document.querySelectorAll('.match');
if (matchElements.length > 0) {
// Add event listeners to each match element
matchElements.forEach(matchElement => {
matchElement.addEventListener('mouseover', () => {
// Get the position of the .match element
var matchRect
if ( matchElement.querySelector(':scope > .reverse') ) {
matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();
} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}
// Position the .match-details element to the right of the .match element
const matchDetails = matchElement.querySelector('.match-details');
if (matchDetails) {
matchDetails.style.position = 'fixed';
matchDetails.style.top = `${matchRect.top}px`; // Keep the bottom position the same as .match
matchDetails.style.left = `${matchRect.right}px`; // Position to the right of .match
matchDetails.style.transform = 'translateY(-25%)';
matchDetails.style.width = '360px';
}
});
});
}
});