From 52a2b3a9ebbcaeff4339acfc1b0ad6d7a51f8ac0 Mon Sep 17 00:00:00 2001 From: Mohammed Abdullah Date: Sat, 16 Nov 2024 12:42:01 +0530 Subject: [PATCH] Update index.js --- index.js | 154 +++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 98 insertions(+), 56 deletions(-) diff --git a/index.js b/index.js index 4c83500..45682a1 100644 --- a/index.js +++ b/index.js @@ -1,4 +1,97 @@ document.addEventListener('DOMContentLoaded', () => { + + const infoBox = document.getElementById('info-box'); + const citations = document.querySelectorAll('.citation'); + + citations.forEach(citation => { + citation.addEventListener('mouseenter', (event) => { + console.log("mouse entered") + const infoText = event.target.getAttribute('data-info'); + infoBox.innerHTML = infoText; + infoBox.style.display = 'block'; + infoBox.style.animation = 'pop-up 0.3s ease-out forwards'; + positionInfoBox(event); + }); + + citation.addEventListener('mousemove', (event) => { + positionInfoBox(event); + }); + + citation.addEventListener('mouseleave', () => { + // infoBox.style.display = 'none'; + console.log("mouse left") + infoBox.style.animation = 'pop-out 0.3s ease-out forwards'; + + }); + }); + + function positionInfoBox(event) { + const windowWidth = window.innerWidth; + const windowHeight = window.innerHeight; + const mouseX = event.clientX; + const mouseY = event.clientY; + const infoBoxWidth = infoBox.offsetWidth; + const infoBoxHeight = infoBox.offsetHeight; + + let xOffset = 0; + let yOffset = 0; + + // Determine the section based on mouseX and mouseY + // Top-left + if (mouseX < windowWidth / 3 && mouseY < windowHeight / 3) { + xOffset = 10; + yOffset = 10; + } + // Top-center + else if (mouseX >= windowWidth / 3 && mouseX <= 2 * windowWidth / 3 && mouseY < windowHeight / 3) { + xOffset = -infoBoxWidth / 2; + yOffset = 10; + } + // Top-right + else if (mouseX > 2 * windowWidth / 3 && mouseY < windowHeight / 3) { + xOffset = -infoBoxWidth - 10; + yOffset = 10; + } + // Center-left + else if (mouseX < windowWidth / 3 && mouseY >= windowHeight / 3 && mouseY <= 2 * windowHeight / 3) { + xOffset = 10; + yOffset = -infoBoxHeight / 2; + } + // Center + else if (mouseX >= windowWidth / 3 && mouseX <= 2 * windowWidth / 3 && mouseY >= windowHeight / 3 && mouseY <= 2 * windowHeight / 3) { + xOffset = -infoBoxWidth / 2; + yOffset = 10; + } + // Center-right + else if (mouseX > 2 * windowWidth / 3 && mouseY >= windowHeight / 3 && mouseY <= 2 * windowHeight / 3) { + xOffset = -infoBoxWidth - 10; + yOffset = -infoBoxHeight / 2; + } + // Bottom-left + else if (mouseX < windowWidth / 3 && mouseY > 2 * windowHeight / 3) { + xOffset = 10; + yOffset = -infoBoxHeight - 10; + } + // Bottom-center + else if (mouseX >= windowWidth / 3 && mouseX <= 2 * windowWidth / 3 && mouseY > 2 * windowHeight / 3) { + xOffset = -infoBoxWidth / 2; + yOffset = -infoBoxHeight - 10; + } + // Bottom-right + else if (mouseX > 2 * windowWidth / 3 && mouseY > 2 * windowHeight / 3) { + xOffset = -infoBoxWidth - 10; + yOffset = -infoBoxHeight - 10; + } + + // Apply calculated position, ensuring infoBox stays within viewport + const left = Math.min(Math.max(mouseX + xOffset, 0), windowWidth - infoBoxWidth); + const top = Math.min(Math.max(mouseY + yOffset, 0), windowHeight - infoBoxHeight); + + infoBox.style.left = `${left}px`; + infoBox.style.top = `${top}px`; + } + + const menuLinks = document.querySelector('.menu-links'); // Ensure the menu links are visible initially on small screens @@ -13,6 +106,7 @@ document.addEventListener('DOMContentLoaded', () => { window.addEventListener('resize', handleResize); }); + // Function to toggle the menu links on hamburger icon click function toggleMenu() { const menuLinks = document.querySelector('.menu-links'); @@ -95,7 +189,7 @@ function showDiv(divId) { .catch(error => console.error('Error fetching JSON:', error)); } else{ - if(targetjsonFile=='faith') renderFaith(); + // if(targetjsonFile=='faith') renderFaith(); } @@ -128,61 +222,6 @@ function renderVerse(data) { verseContainer.appendChild(document.createElement('br')); }); } -function renderFaith() { - - const verseContainer = document.querySelector('.faith'); - - // Clear existing content - verseContainer.innerHTML = ''; - - // Loop through the JSON data and create an h2 element for each verse - - // Create a new h2 element - // const verseElement = document.createElement('h2'); - - // Create an h4 element for the verse content - const verseContent = document.createElement('h4'); - verseContent.classList.add('pop-up-animate'); // Add the verse-style class - verseContent.innerHTML = ` -Entering into Islam is very simple

-You just need to declare the faith, known as the Shahada (declaration of faith ☝️).

- -
- Take your declaration of faith (Shahada) only after you have realized what Islam truly is and you are ready to embrace it.
- There is no hurry, take your time to learn about Islam and its teachings. Once you are ready, you can declare your faith by reciting the Shahada.
-
- There is no compulsion in religion [Quran - 2:256]
-


-
-The Shahada in Arabic is as follows:

-Arabic: أشهد أن لا إله إلا الله وأشهد أن محمداً رسول الله -
-
-
-Say in Arabic: Ash-hadu an la ilaha illallah, wa ash-hadu anna Muhammadur rasulullah -
-
-
-Translation: I bear witness that there is no god but Allah, and I bear witness that Muhammad is the messenger of Allah. -
-
-
- This declaration is the core of Islamic belief and affirms that there is no deity but Allah, and Muhammad is His messenger. By stating these words with sincere belief, a person embraces Islam and begins their journey as a Muslim. -
- - - `; - - // Append the h4 element to the h2 element - // verseElement.appendChild(verseContent); - - // Append the h2 element to the verse container - verseContainer.appendChild(verseContent); - verseContainer.appendChild(document.createElement('br')); - verseContainer.appendChild(document.createElement('br')); - -} @@ -356,3 +395,6 @@ window.onclick = function(event) { } } + + +