mNo edit summary |
mNo edit summary |
||
Line 8: | Line 8: | ||
var matchRect | var matchRect | ||
if ( matchElement.querySelector('.reverse') ) { | if ( matchElement.querySelector('.reverse') ) { | ||
matchRect = matchElement.querySelector('> .team.reverse').getBoundingClientRect(); | matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect(); | ||
} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();} | } else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();} | ||
console.log(matchElement.querySelector('.reverse')) | console.log(matchElement.querySelector('.reverse')) |
Revision as of 21:41, 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('.reverse') ) {
matchRect = matchElement.querySelector(':scope > .team.reverse').getBoundingClientRect();
} else { matchRect = matchElement.querySelector('.team').getBoundingClientRect();}
console.log(matchElement.querySelector('.reverse'))
console.log(matchRect)
// 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';
}
});
});
}
});