(YARDIM) jQuery ile Countdown Hk.

Sieger

twitch.tv/siegerzero
.
Katılım
6 Şub 2019
Mesajlar
1,056
Tepkime puanı
473
Puanları
83
Konum
Kocaeli
Merhabalar,
Önceden bulduğum index'leri arşive atmıştım.
Elimde 2 tane index var, birinde ki geri sayım sayacını diğerine eklemeye çalışıyorum fakat bi türlü yapamadım.

Yaptığım işlemleri aşağıya yazıyorum, kodları da aynı şekilde yazıcam.

Öncelikle sayacı almak istediğim index'i açıp içerisinde ki countdown div satırını alıp, eklemek istediğim diğer index'e gözükmesini istediğim yere ekliyorum.
Kod:
<!-- Clock Countdown -->
<div id="clock-countdown" class="animated bounceInDown" data-animation-delay="700"></div>
Sayacı almak istediğim index içerisinden, bağlı olduğu .js dosyası yolunda ki countdown ile ilgili satırları alıp eklemek istediğim diğer index'e ekliyorum.

Kod:
        /*====================================
                    Clock Countdown
        ======================================*/

        $('#clock-countdown').countdown('2020/01/11 20:00:00').on('update.countdown', function(event) {
            var $this = $(this).html(event.strftime(''
                + '<div class="counter-container"><div class="counter-box first"><div class="number">%-D</div><span>Days</span></div>'
                + '<div class="counter-box"><div class="number">%H</div><span>Hours</span></div>'
                + '<div class="counter-box"><div class="number">%M</div><span>Minutes</span></div>'
                + '<div class="counter-box last"><div class="number">%S</div><span>Second</span></div></div>'
            ));
        });
Sayacı almak istediğim index içerisinden ekli olan script yolunu alıp, diğer eklemek istediğim index'te ki java yoluna ekliyorum.

Kod:
<script type="text/javascript" src="js/main.js"></script>
Not: Üstte yazdığım kod, eklemek istediğim index'te jquery.js ile bağlantılı olduğu için main.js olarak bir script dosyası oluşturmadım.
Direkt olarak jquery.js içerisine en alt kısıma yapıştırdım.

Son olarak sayacı almak istediğim index içerisinde ekli olan style.css kodu içerisinde ki countdown kısmını alıp, eklemek istediğim index'te ki style.css içerisinde en alta yapıştırdım.

Kod:
/* ==================== 10.0 CLOCK COUNTDOWN ==================== */


#clock-countdown {
    color: #fff;
    overflow: hidden;
}

.counter-container {
    display: table;
    margin: 0 auto;
}

#clock-countdown .counter-box {
    display: block;
    width: 160px;
    text-align: center;
    overflow: hidden;
    padding: 10px 25px;
    float: left;
    margin: 25px 0;
    position: relative;
}

#clock-countdown .number {
    font-size: 80px;
    text-align: center;
    font-family: 'Monteserrat', sans-serif;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 10px;
}

#clock-countdown span {
    display: block;
    font-size: 21px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding-top: 10px;
    position: relative;
    overflow: hidden;
}

#clock-countdown span:before {
    position: absolute;
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 0px;
}
Bu işlemler sonrası eklemek istediğim index'te countdown kısmında aralık oluşuyor ama sayaç hiç bi şekilde gözükmüyor.

Nerede hata yapıyorum, ya da nereye eksik ekleme yapıyorum ya da yaptığım işlemler yanlış mı?

jQuery ve css hakkında bilgim yok, sadece içeriklerini düzenleme vb. kadar bilgim var.
 

RelaysGG

vSro Basic Edit - Web Tasarım - Css&html&php
.
Katılım
12 May 2019
Mesajlar
266
Tepkime puanı
75
Puanları
28
Konum
Sakarya
Şuan telefondayım kodların devamını görmek için yan'a kaymıyor. İşten döndüğüm zaman akşam sizin için bir kerede kendim denerim sorun neredeymiş neden böyle bir problem var anlamaya çalışırız.
 
Katılım
29 Nis 2019
Mesajlar
67
Tepkime puanı
45
Puanları
18
Konum
Kocaeli
İhtiyacın olan dosya jquery.countdown.min.js & jquery.countdown.js bu eksik olduğu için countdown fonksiyonunu görmüyor.




style kodu şu şekilde düzenlenebilir.

CSS:
    /* ==================== 10.0 CLOCK COUNTDOWN ==================== */
    
    #clock-countdown {
        overflow: hidden;
    }
    
    .counter-container {
        display: table;
        margin: 0 auto;
    }
    
    #clock-countdown .counter-box {
        display: block;
        width: 120px;
        text-align: center;
        overflow: hidden;
        float: left;
        margin: 25px 0;
        position: relative;
    }
    
    #clock-countdown .number {
        font-size: 80px;
        text-align: center;
        font-family: 'Monteserrat', sans-serif;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 10px;
    }
    
    #clock-countdown span {
        display: block;
        font-size: 21px;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        padding-top: 10px;
        position: relative;
        overflow: hidden;
    }
    
    #clock-countdown span:before {
        position: absolute;
        content: '';
        display: block;
        width: 30px;
        height: 1px;
        background: #fff;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 0px;
    }
 
Son düzenleme:

Sieger

twitch.tv/siegerzero
.
Katılım
6 Şub 2019
Mesajlar
1,056
Tepkime puanı
473
Puanları
83
Konum
Kocaeli
İhtiyacın olan dosya jquery.countdown.min.js & jquery.countdown.js bu eksik olduğu için countdown fonksiyonunu görmüyor.




style kodu şu şekilde düzenlenebilir.

CSS:
    /* ==================== 10.0 CLOCK COUNTDOWN ==================== */
   
    #clock-countdown {
        overflow: hidden;
    }
   
    .counter-container {
        display: table;
        margin: 0 auto;
    }
   
    #clock-countdown .counter-box {
        display: block;
        width: 120px;
        text-align: center;
        overflow: hidden;
        float: left;
        margin: 25px 0;
        position: relative;
    }
   
    #clock-countdown .number {
        font-size: 80px;
        text-align: center;
        font-family: 'Monteserrat', sans-serif;
        font-weight: 700;
        line-height: 1;
        margin-bottom: 10px;
    }
   
    #clock-countdown span {
        display: block;
        font-size: 21px;
        text-align: center;
        font-family: 'Open Sans', sans-serif;
        font-weight: 400;
        padding-top: 10px;
        position: relative;
        overflow: hidden;
    }
   
    #clock-countdown span:before {
        position: absolute;
        content: '';
        display: block;
        width: 30px;
        height: 1px;
        background: #fff;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 0px;
    }
Olmadı malesef.
 
Ü

Üye silindi 2299

Gözükmesi gereken index dosyasını atarmısın üzerinde çalışsınlar yapınca paylaşırlar hem 😂
 

Sieger

twitch.tv/siegerzero
.
Katılım
6 Şub 2019
Mesajlar
1,056
Tepkime puanı
473
Puanları
83
Konum
Kocaeli
Gözükmesi gereken index dosyasını atarmısın üzerinde çalışsınlar yapınca paylaşırlar hem 😂
Paylaşılmasını istesem zaten paylaşırım Hakkan saçma saçma konuşma.
Zamanında çektiğim index'ler olduğu için ve hiç bi yerde bulunmadığı için paylaşmıyorum.
Yoksa bende biliyorum buraya dosyaları atıp düzeltilmesini rica etmeyi :D
 

Sieger

twitch.tv/siegerzero
.
Katılım
6 Şub 2019
Mesajlar
1,056
Tepkime puanı
473
Puanları
83
Konum
Kocaeli
The problem has not been resolved.
 

Benzer konular

Üst Alt