I have the following script running in my header, and it’s rendering just fine. [Screen Shot 2023-12-30 at 1.26.21 PM] But when I navigate to a topic, the avatar dropdown replicates like this: [Screen Shot 2023-12-30 at 1.26.13 PM] Hoping it’s a simple fix, but maybe I’m trying to make Discourse do too much w/ a component. document.addEventListener('DOMContentLoaded', function() { // Create Countdown HTML with Styling var countdownHtml = ` DET vs. DAL Lions at Cowboys: Game Thread `; // Insert the Countdown Banner next to the logo var headerLogo = document.querySelector('.d-header .title'); if (headerLogo) { headerLogo.insertAdjacentHTML('afterend', countdownHtml); } else { console.error("Header logo not found"); } // Countdown Functionality const eventTime = new Date('December 30, 2023 20:00:00 GMT-0400').getTime(); const countdownElement = document.getElementById('countdown'); if (!countdownElement) { console.error("Countdown element not found"); return; } function updateCountdown() { const now = new Date().getTime(); const distance = eventTime - now; if (distance < 0) { countdownElement.innerHTML = "The Game Has started!"; clearInterval(interval); return; } const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; } var interval = setInterval(updateCountdown, 1000); });

Solved! I fixed it using api.onPageChange(() => { if anyone else tries getting too fancy for their own good and encounters the same.

That looks pretty cool. So this banner does a countdown in this case til the game starts?(sports) This could be tt start of a pretty cool #theme-component a commerce type site or what not could use it as a countdown for launch or upcoming sale. Can you post your code with the fix implemented plz

I gave up on it because it renders the avatar menu unclickable. I tried everything to fix with no luck, so gave up, otherwise I’d submit it!

Might be an idea to try maybe in header?

Here’s the code for all who have asked. api.onPageChange(() => { // Ensure the banner is only added once if (document.getElementById('countdown-banner')) return; // Create the countdown banner const countdownBanner = document.createElement('div'); countdownBanner.id = 'countdown-banner'; countdownBanner.style.cssText = 'position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;'; countdownBanner.innerHTML = ` DET vs. DAL Lions at Cowboys: Game Thread `; // Find the header logo and insert the countdown banner const headerLogo = document.querySelector('.d-header .title'); if (headerLogo) { headerLogo.insertAdjacentElement('afterend', countdownBanner); } // Initialize the countdown const eventTime = new Date('December 30, 2024 20:00:00 GMT-0400').getTime(); const countdownElement = document.getElementById('countdown'); setInterval(() => { const now = new Date().getTime(); const distance = eventTime - now; if (!countdownElement) return; if (distance < 0) { countdownElement.innerHTML = "The Game Has started!"; return; } const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); countdownElement.innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; }, 1000); }); CSS … #countdown-container, #countdown-banner a { background-color: #0076B6; /* Solid background color */ opacity: 0.8; /* Adjust transparency */ /* Other styling... */ } #countdown-container { background-color: rgba(0, 118, 182, 0.3); /* Slightly transparent background */ padding: 5px 10px; border-radius: 5px; margin-right: 10px; } #countdown-banner a { background-color: rgba(0, 118, 182, 0.3); /* Slightly transparent background */ color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s; } #countdown-banner a:hover { background-color: rgba(0, 95, 138, 0.3); /* Slightly darker on hover with transparency */ } #countdown-banner { font-family: Arial, sans-serif; position: relative; display: inline-block; margin-left: 20px; vertical-align: middle; } #background-text { font-family: 'Impact', sans-serif; font-size: 5em; /* Size of the text */ color: gray; /* Changed to gray */ opacity: 0.5; /* Adjust opacity for visibility */ position: absolute; left: 0; top: -30px; /* More significantly shifted up */ z-index: 1; font-weight: bold; /* Bold font */ } #foreground-text { color: white; position: relative; z-index: 2; padding-left: 140px; /* Adjust based on actual layout */ } #countdown { font-family: 'LCD', 'Courier New', monospace; font-size: 1.2em; }

Please note I never did get the avatar menu to become clickable. :confused: … if you can correct and share, that’d be amazing!

Countdown script in header duplicating avatar dropdown?

Development

Firepup650 (Firepup Sixfifty) January 1, 2024, 10:26pm 5

Perhaps you could release it as is, with a disclaimer on it about the bugs it causes to others could potentially try to fix it?

Topic		Replies	Views
Why isn't there an obvious link from meta.discourse.org to discourse.org in the header? Site feedback	20	3093	November 2, 2017
How to increase Header avatar size? Development	15	3794	January 9, 2019
Search dropdown has layout shift on anon view UX	3	352	July 11, 2023
Avatar shows over banner on mobile Bug	2	1379	March 24, 2015
Message counter hidden behind avatar UX	6	907	November 28, 2017

Countdown script in header duplicating avatar dropdown?

Related topics