document.addEventListener('DOMContentLoaded', function() { // --- Logic for the second logo --- const headerBranding = document.getElementById('header_branding'); if (headerBranding) { // Use flexbox on the parent container for side-by-side alignment const parentContainer = headerBranding.parentElement; if (parentContainer) { parentContainer.style.display = 'flex'; parentContainer.style.alignItems = 'center'; parentContainer.style.gap = '20px'; // Adjust gap between the two logo sections parentContainer.style.flexWrap = 'wrap'; // Allow logos to wrap on smaller screens } // Clone the original header_branding element to create the second logo const secondLogoElement = headerBranding.cloneNode(true); // Modify the cloned element's image const secondLogoImage = secondLogoElement.querySelector('img'); if (secondLogoImage) { secondLogoImage.src = ''; secondLogoImage.alt = ''; secondLogoImage.removeAttribute('width'); secondLogoImage.removeAttribute('height'); } // Modify the link wrapping the image const secondLogoLink = secondLogoElement.querySelector('.site-logo-wrapper a'); if (secondLogoLink) { secondLogoLink.href = ''; secondLogoLink.target = '_blank'; secondLogoLink.rel = 'noopener'; } // Remove the original title and subtitle text from the clone const siteTitle = secondLogoElement.querySelector('.site_title'); if (siteTitle) siteTitle.remove(); const siteSubtitle = secondLogoElement.querySelector('.site_subtitle'); if (siteSubtitle) siteSubtitle.remove(); // Create the new "Shaloh House Preschool" text as a clickable link const originalTitle = headerBranding.querySelector('.site_title'); const preschoolTextLink = document.createElement('a'); preschoolTextLink.href = ''; preschoolTextLink.target = '_blank'; preschoolTextLink.rel = 'noopener'; preschoolTextLink.innerText = 'Shaloh House Preschool'; // Style the new text to match the original "Shaloh House Chabad" title if (originalTitle) { const titleStyle = window.getComputedStyle(originalTitle); preschoolTextLink.style.color = titleStyle.color; preschoolTextLink.style.fontSize = titleStyle.fontSize; preschoolTextLink.style.fontWeight = titleStyle.fontWeight; preschoolTextLink.style.fontFamily = titleStyle.fontFamily; preschoolTextLink.style.textDecoration = 'none'; } // Append the new text link to the cloned logo container secondLogoElement.appendChild(preschoolTextLink); // Add a class for styling and remove the ID to avoid duplicates secondLogoElement.classList.add('second-logo-container'); secondLogoElement.removeAttribute('id'); // Insert the fully formed second logo element into the page headerBranding.after(secondLogoElement); // Inject CSS to style the new logo container and its contents const logoStyle = document.createElement('style'); logoStyle.innerHTML = ` .second-logo-container { display: flex !important; /* Aligns the logo image and its new text */ align-items: center; gap: 10px; /* Space between the preschool logo and its text */ } .second-logo-container .site-logo-wrapper { width: auto !important; /* Let the logo size naturally */ height: auto !important; } .second-logo-container img { max-width: 80px; /* Adjust size of the preschool logo image */ height: auto; } /* Hide the second logo on mobile devices */ @media (max-width: 768px) { .second-logo-container { display: none !important; } } `; document.head.appendChild(logoStyle); } else { console.warn('Element with ID "header_branding" not found. Cannot add second logo.'); } // --- Logic for the card hover effects --- const cards = document.querySelectorAll('.minisite-one-card'); cards.forEach(card => { const imageWrapper = card.querySelector('.minisite-one-card-image-wrapper'); const learnMoreLink = card.querySelector('.minisite-one-learn-more a'); if (imageWrapper && learnMoreLink) { // Create the new overlay, which is a link itself const overlayLink = document.createElement('a'); overlayLink.href = learnMoreLink.href; // Copy the URL from the original button if (learnMoreLink.target) { overlayLink.target = learnMoreLink.target; // Copy target if it exists (e.g., "_blank") } overlayLink.className = 'minisite-one-card-hover-overlay'; overlayLink.innerHTML = 'Learn More ➜'; // Text and arrow symbol // Add the new overlay to the image wrapper imageWrapper.appendChild(overlayLink); } }); });
$j(window).on("load", function() { Initialize(null, false); });
$j(window).on("load", function() { Initialize(null, false); });
