سكريبت العد التنازلي في الترويسة يكرر قائمة الأفاتار المنسدلة؟

مطور
1

لدي البرنامج النصي التالي قيد التشغيل في رأسي، وهو يعرض بشكل جيد.

ولكن عندما أتنقل إلى موضوع، تتضاعف قائمة منسدلة الصورة الرمزية بهذا الشكل:

آمل أن يكون إصلاحًا بسيطًا، ولكن ربما أحاول جعل Discourse يقوم بالكثير باستخدام مكون.

<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>
2

تم الحل! لقد قمت بإصلاحه باستخدام api.onPageChange(() => { إذا حاول أي شخص آخر أن يكون متطورًا جدًا لدرجة أنه يضر بنفسه ويواجه نفس المشكلة.

إعجابَين (2)
3

هذا يبدو رائعًا جدًا.

إذًا، هذه اللافتة تقوم بالعد التنازلي في هذه الحالة حتى تبدأ المباراة؟ (رياضة)

يمكن أن يكون هذا بداية لمكون سمة رائع جدًا، يمكن لموقع تجاري أو ما شابه استخدامه كعد تنازلي للإطلاق أو لخصم قادم.

هل يمكنك نشر الكود الخاص بك مع تطبيق الإصلاح من فضلك؟

4 إعجابات
4

لقد تخليت عنه لأنه يجعل قائمة الأفاتار غير قابلة للنقر. لقد جربت كل شيء لإصلاحه دون جدوى، لذلك استسلمت، وإلا لكنت قدمته!

إعجاب واحد (1)
5

ربما يمكنك إصداره كما هو، مع إخلاء مسؤولية حول الأخطاء التي يسببها، وقد يحاول الآخرون إصلاحها؟

إعجاب واحد (1)
6

قد تكون فكرة جيدة للمحاولة ربما في الرأس؟

7

هذا هو الكود لكل من سأل.

<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;
}
إعجابَين (2)
8

يرجى ملاحظة أنني لم أتمكن أبدًا من جعل قائمة الأفاتار قابلة للنقر. :confused: … إذا كان بإمكانك تصحيحها ومشاركتها، فسيكون ذلك رائعًا!

إعجاب واحد (1)
9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.