Ho lo script seguente in esecuzione nell’intestazione e viene visualizzato correttamente.
Ma quando navigo in un argomento, il menu a discesa dell’avatar si replica in questo modo:
Spero sia una soluzione semplice, ma forse sto cercando di far fare troppo a Discourse con un componente.
<script>
document.addEventListener('DOMContentLoaded', function() {
// Create Countdown HTML with Styling
var countdownHtml = `
<div id="countdown-banner" style="position: relative; display: inline-block; margin-left: 20px; vertical-align: middle;">
<span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
DET vs. DAL <i class="fas fa-football-ball"></i>
</span>
<div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
<span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
</span>
<a href="https://thedenforum.com/t/official-lions-vs-cowboys-game-day-thread-2023/30290" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
Game Thread
</a>
</div>
</div>`;
// 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);
});
</script>
Risolto! L’ho corretto usando api.onPageChange(() => { se qualcun altro cerca di fare troppo il figo e incontra lo stesso problema.
Heliosurge
31 Dicembre 2023, 9:07am
3
Sembra fantastico.
Quindi questo banner fa un conto alla rovescia in questo caso fino all’inizio della partita? (sport)
Questo potrebbe essere l’inizio di un fantastico #componente-tema per un sito di e-commerce o altro, che potrebbe usarlo come conto alla rovescia per il lancio o per una vendita imminente.
Puoi pubblicare il tuo codice con la correzione implementata per favore
Ho rinunciato perché rende il menu dell’avatar non cliccabile. Ho provato di tutto per sistemarlo senza successo, quindi ho rinunciato, altrimenti l’avrei inviato!
Firepup650
1 Gennaio 2024, 10:26pm
5
Forse potresti rilasciarlo così com’è, con un disclaimer sui bug che causa, in modo che altri possano potenzialmente provare a risolverlo?
Heliosurge
2 Gennaio 2024, 5:18am
6
Potrebbe essere un’idea provare magari nell’intestazione?
Ecco il codice per tutti coloro che l’hanno chiesto.
<script type="text/discourse-plugin" version="0.8">
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 = `
<span id="background-text" style="opacity: 0.2; color: gray; font-size: 4.5em; position: absolute; left: 0; top: -31px; z-index: 1;">
DET vs. DAL <i class="fas fa-football-ball"></i>
</span>
<div id="foreground-text" style="color: white; position: relative; z-index: 2; display: flex; align-items: center;">
<span id="countdown-container" style="background-color: #0076B6; padding: 5px 10px; border-radius: 5px; margin-right: 10px;">
Lions at Cowboys: <span id="countdown" style="font-family: 'LCD', 'Courier New', monospace;"></span>
</span>
<a href="[URL]" style="background-color: #0076B6; color: white; padding: 5px 10px; border-radius: 5px; text-decoration: none;">
Game Thread
</a>
</div>
`;
// 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);
});
</script>
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;
}
Si prega di notare che non sono mai riuscito a rendere cliccabile il menu dell’avatar.
… se riesci a correggere e condividere, sarebbe fantastico!