1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

1.1.x Пример простого таймера на JQ

Тема в разделе "Модификации шаблонов", создана пользователем carliker, 9 апр 2013.

Загрузка
  1. carliker

    carliker Местный

    Регистрация:
    03.10.11
    Сообщения:
    274
    Симпатии:
    114
    Версия XF:
    1.1.1
    Недавно появилась задача поставить на форум простенький таймер с обратным отсчетом до определенной даты. А так как представленный на данном форуме Countdown Timer меня не устраивает по ряду причин, на просторах интернета был найден скрипт с необходимым функционал и благополучно установлен на мой форум, в сайдбар. Вот что получилось:

    Снимок экрана 2013-04-09 в 23.21.28.png

    Возможно кому-то пригодиться такое решения, поэтому расскажу как реализовать его.

    1. Скачиваем вложенный файл jquery.countdown.js.zip, распаковываем его и заливаем на хостинг файл jquery.countdown.js в каталог js

    2. Теперь идем в админ-панель вашего форума, переходим на страницу шаблонов и создаем новый шаблон с уникальным именем (я назвал его countdown_sidebar) со следующим кодом:
    Код:
    <div class="section">
      <div class="secondaryContent">
          <h3>Осталось до...</h3>
    <div class="wrapper">
                <div class="container">
                    <div id="countdown_wrap">
                        <div id="countdown">
                            <div id="defaultCountdown"></div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
     
            <script type="text/javascript" src="js/jquery.countdown.js"></script>
            <script type="text/javascript">
            /* <![CDATA[  */
            jQuery(document).ready(function($){
             
                //Countdown 
                $(function () {
                    var austDay = new Date();
                    // the numbers are the date you're counting down to: year, month-1, day
                    austDay = new Date(new Date(2013, 5-1, 2));
                    // change the number in the timezone to adjust the end time
                    $('#defaultCountdown').countdown({until: austDay, timezone: +4});
                    $('#year').text(austDay.getFullYear());
                });
     
            });         
            /* ]]> */
            </script>
    </div>
    </div>
    Сразу поясню несколько моментов:
    Код:
    austDay = new Date(new Date(2013, 5-1, 2));
    В этой строке задаем дату до которой таймер будет вести отсчет: год, месяц-1, день
    На -1 внимание не обращайте, просто вместо месяц, подставляйте то, что вам требуется. В моем примере установлена дата 2 мая 2013 года.
    Код:
    $('#defaultCountdown').countdown({until: austDay, timezone: +4});
    Тут важен параметр timezona, чтобы сразу стало понятно, в моем примере установлен часовой пояс Москвы (+4).

    3. Скрипт залит на хостинг, шаблон создан осталось только подключить наш шаблон в нужном месте. Для этого открываем шаблон ad_sidebar_top и добавляем туда код:
    Код:
    <xen:include template="countdown_sidebar" />
    4. Добавляем в шаблон Extra.css следующий код:
    Код:
    /* ============================================== COUNTDOWN ============================================== */
     
    #countdown_wrap {
        padding:10px 0 0;
    }
     
    #countdown {
        overflow: hidden;
        width: 100%;
        font-family: 'BebasNeueRegular', Verdana, Geneva, sans-serif;
    }
     
    .countdown_row {
        float:left;
        position: relative;
        left:50%;
    }
     
    .countdown_section {
        float:left;
        position: relative;
        right:50%;
        color: #444444;
        text-align: center;
        padding: 0 5px;
        font-size: 12px;
        line-height: 15px;
    }
     
    .countdown_amount {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 20px;
        height:20px;
        line-height: 20px;
        font-weight: 100;
        float:left;
        padding: 10px 5px;
        background: #333333; /* Old browsers */
        background: -moz-linear-gradient(top,  #333333 0%, #333333 50%, #222222 50%, #111111 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(50%,#333333), color-stop(50%,#222222), color-stop(100%,#111111)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #333333 0%,#333333 50%,#222222 50%,#111111 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #333333 0%,#333333 50%,#222222 50%,#111111 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #333333 0%,#333333 50%,#222222 50%,#111111 100%); /* IE10+ */
        background: linear-gradient(top,  #333333 0%,#333333 50%,#222222 50%,#111111 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
        -webkit-border-radius:  5px;
        -moz-border-radius:  5px;
        border-radius: 5px;
        color: #EEEEEE;
        text-align: center;
        letter-spacing: -1px;
        min-width: 30px;
        box-shadow: inset rgba(0,0,0, 0.8) 0px 0px 5px;
        -moz-box-shadow: inset rgba(0,0,0, 0.8) 0px 0px 5px;
        -webkit-box-shadow: inset rgba(0,0,0, 0.8) 0px 0px 5px;
        text-shadow: 0 2px 1px #000000;
    }
    На этом все, ваш таймер появится в сайдбаре!

    P.S.: Камнями просьба не бросать, нубский пример для таких же нубов как и я сам:)
     

    Вложения:

    Svarog, TAIFUN, MiVa и 3 другим нравится это.
  2. Witold

    Witold Местный

    Регистрация:
    19.01.12
    Сообщения:
    132
    Симпатии:
    23
    Версия XF:
    1.2.2
    А можно как нибудь анимацию сделать?
    Секунды висят, неудобно.
     
  3. Дмитрий Артёменко

    Дмитрий Артёменко Местный

    Регистрация:
    26.09.11
    Сообщения:
    195
    Симпатии:
    3
    Версия XF:
    1.3.1
    Можно ли сделать это в объявлении? И можно ли сделать несколько в одном сразу?
    Так же интересует вопрос, возможно ли сделать постоянный отчет типа
    до 3 числа осталось N времени, до 6 числа осталось N времени, и так круглый год?
     
  4. kovarnyi

    kovarnyi Местный

    Регистрация:
    09.05.13
    Сообщения:
    103
    Симпатии:
    1
    Версия XF:
    1.2.4
    у меня очень коряво отображается
    --- добавлено : Aug 23, 2013 3:59 AM ---
    [​IMG]
    --- добавлено : Aug 23, 2013 4:02 AM ---
    Подскажите как исправить?
     
    Последнее редактирование модератором: 31 авг 2013
  5. carliker

    carliker Местный

    Регистрация:
    03.10.11
    Сообщения:
    274
    Симпатии:
    114
    Версия XF:
    1.1.1
    Кинь адрес сайта где установлено (можно в личку), попробую поправить. Сходу не могу сказать как исправить
     

Поделиться этой страницей