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

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



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

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.: Камнями просьба не бросать, нубский пример для таких же нубов как и я сам

 

А можно как нибудь анимацию сделать?
Секунды висят, неудобно.

 

Можно ли сделать это в объявлении? И можно ли сделать несколько в одном сразу?
Так же интересует вопрос, возможно ли сделать постоянный отчет типа
до 3 числа осталось N времени, до 6 числа осталось N времени, и так круглый год?

 

у меня очень коряво отображается
--- добавлено : Aug 23, 2013 3:59 AM ---

--- добавлено : Aug 23, 2013 4:02 AM ---
Подскажите как исправить?

 

Кинь адрес сайта где установлено (можно в личку), попробую поправить. Сходу не могу сказать как исправить