J’ai le script suivant qui s’exécute dans mon en-tête et il s’affiche très bien.
Mais lorsque je navigue vers un sujet, la liste déroulante des avatars se duplique comme ceci :
J’espère que c’est une solution simple, mais peut-être que j’essaie de faire faire trop de choses à Discourse avec un composant.
<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>
Résolu ! Je l’ai corrigé en utilisant api.onPageChange(() => { si quelqu’un d’autre essaie d’être trop fantaisiste pour son propre bien et rencontre le même problème.
Heliosurge
Décembre 31, 2023, 9:07
3
Ça a l’air plutôt cool.
Donc, cette bannière fait un compte à rebours dans ce cas jusqu’au début du jeu ? (sport)
Cela pourrait être le début d’un #composant-thème plutôt cool qu’un site de type commerce ou autre pourrait utiliser comme compte à rebours pour le lancement ou une vente à venir.
Pouvez-vous poster votre code avec la correction implémentée s’il vous plaît
J’ai abandonné car cela rend le menu d’avatar non cliquable. J’ai tout essayé pour le réparer sans succès, j’ai donc abandonné, sinon je l’aurais soumis !
Firepup650
Janvier 1, 2024, 10:26
5
Peut-être pourriez-vous le publier tel quel, avec une clause de non-responsabilité indiquant que les bugs qu’il provoque pourraient potentiellement être corrigés par d’autres ?
Heliosurge
Janvier 2, 2024, 5:18
6
Peut-être une idée d’essayer dans l’en-tête ?
Voici le code pour tous ceux qui l’ont demandé.
<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;
}
Veuillez noter que je n’ai jamais réussi à rendre le menu d’avatar cliquable.
… si vous pouvez corriger et partager, ce serait génial !