تسجيل الدخول

بلوك العد التنازلي بالشريط الجانبي

الموضوع في 'ركن تعديلات القوالب' بواسطة bousaid, بتاريخ ‏10-06-2012.

حالة الموضوع:
مغلق
  1. bousaid

    bousaid :: إداري ::
    rankrankrankrank

    إنضم إلينا في:
    ‏05-02-2012
    المشاركات:
    482
    الإعجابات المتلقاة:
    364
    الجنس:
    ذكر
    الإقامة:
    الجزائر - أدرار
    السلام عليكم

    بلوك العد التنازلي لأي شيء تحدده

    مجهز حالياً على توقيت دخول رمضان

    و يمكن استخدامه لاي موعد تحدده

    2012-06-10 17-27-36.jpg

    افتح مثلا قالب ad_sidebar_below_visitor_panel
    و ضع فيه مايلي

    كود:
     
    <style type="text/css">​
    #countdown {​
    height: 46px;​
    padding: 4px 0 2px 0;​
    }​
    .dash {​
    width:auto;​
    height:44px;​
    float: right;​
    margin-right: 10px;​
    padding-right: 10px;​
    border-right: 1px solid @primaryLighterStill;​
    position: relative;​
    }​
    .first {​
    margin-right: 12px;​
    padding-right: 0;​
    border-right: 0;​
    }​
    .dash .digit {​
    font-size: 16pt;​
    font-weight: bold;​
    float: left;​
    font-family: Arial, sans-serif;​
    color: @primaryLightish;​
    position: relative;​
    }​
    .dash_title {​
    position: absolute;​
    display: block;​
    bottom: 0px;​
    left: 2px;​
    font-family: Tahoma, Arial, sans-serif;​
    font-size: 11px;​
    color: @mutedTextColor;​
    text-transform: uppercase;​
    letter-spacing: 0px;​
    }​
    </style>​
    <script type="text/javascript">​
    (function($){​
    $.fn.countDown = function (options) {​
    config = {};​
    $.extend(config, options);​
    diffSecs = this.setCountDown(config);​
    if (config.onComplete)​
    {​
    $.data($(this)[0], 'callback', config.onComplete);​
    }​
    if (config.omitWeeks)​
    {​
    $.data($(this)[0], 'omitWeeks', config.omitWeeks);​
    }​
    $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');​
    $(this).doCountDown($(this).attr('id'), diffSecs, 500);​
    return this;​
    };​
    $.fn.stopCountDown = function () {​
    clearTimeout($.data(this[0], 'timer'));​
    };​
    $.fn.startCountDown = function () {​
    this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);​
    };​
    $.fn.setCountDown = function (options) {​
    var targetTime = new Date();​
    if (options.targetDate)​
    {​
    targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));​
    }​
    else if (options.targetOffset)​
    {​
    targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());​
    targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());​
    targetTime.setDate(options.targetOffset.day + targetTime.getDate());​
    targetTime.setHours(options.targetOffset.hour + targetTime.getHours());​
    targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());​
    targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());​
    }​
    var nowTime = new Date();​
    diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);​
    $.data(this[0], 'diffSecs', diffSecs);​
    return diffSecs;​
    };​
    $.fn.doCountDown = function (id, diffSecs, duration) {​
    $this = $('#' + id);​
    if (diffSecs <= 0)​
    {​
    diffSecs = 0;​
    if ($.data($this[0], 'timer'))​
    {​
    clearTimeout($.data($this[0], 'timer'));​
    }​
    }​
    secs = diffSecs % 60;​
    mins = Math.floor(diffSecs/60)%60;​
    hours = Math.floor(diffSecs/60/60)%24;​
    if ($.data($this[0], 'omitWeeks') == true)​
    {​
    days = Math.floor(diffSecs/60/60/24);​
    weeks = Math.floor(diffSecs/60/60/24/7);​
    }​
    else​
    {​
    days = Math.floor(diffSecs/60/60/24)%7;​
    weeks = Math.floor(diffSecs/60/60/24/7);​
    }​
    $this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);​
    $this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);​
    $this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);​
    $this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);​
    $this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);​
    $.data($this[0], 'diffSecs', diffSecs);​
    if (diffSecs > 0)​
    {​
    e = $this;​
    t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);​
    $.data(e[0], 'timer', t);​
    }​
    else if (cb = $.data($this[0], 'callback'))​
    {​
    $.data($this[0], 'callback')();​
    }​
    };​
    $.fn.dashChangeTo = function(id, dash, n, duration) {​
    $this = $('#' + id);​
    for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)​
    {​
    var d = n%10;​
    n = (n - d) / 10;​
    $this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);​
    }​
    };​
    $.fn.digitChangeTo = function (digit, n, duration) {​
    if (!duration)​
    {​
    duration = 800;​
    }​
    if ($(digit + ' div.top').html() != n + '')​
    {​
    $(digit + ' div.top').css({'display': 'none'});​
    $(digit + ' div.top').html((n ? n : '0')).slideDown(duration);​
    $(digit + ' div.bottom').animate({'height': ''}, duration, function() {​
    $(digit + ' div.bottom').html($(digit + ' div.top').html());​
    $(digit + ' div.bottom').css({'display': 'block', 'height': ''});​
    $(digit + ' div.top').hide().slideUp(10);​
    });​
    }​
    };​
    })(jQuery);​
    </script>​
    <script type="text/javascript">​
    jQuery(document).ready(function() {​
    $('#countdown').countDown({​
    targetDate: {​
    'day': 21,​
    'month': 7,​
    'year': 2012,​
    'hour': 0,​
    'min': 0,​
    'sec': 0,​
    'utc': true​
    }​
    });​
    });​
    </script>​
    <div class="section">​
    <div class="secondaryContent">​
    <h3>باقي على دخول رمضان</h3>​
    <div id="countdown">​
    <div class="dash first weeks_dash">​
    <span class="dash_title">أسابيع</span>​
    <div class="digit">0</div>​
    <div class="digit">0</div>​
    </div>​
    <div class="dash days_dash">​
    <span class="dash_title">أيام</span>​
    <div class="digit">0</div>​
    <div class="digit">0</div>​
    </div>​
    <div class="dash hours_dash">​
    <span class="dash_title">ساعة</span>​
    <div class="digit">0</div>​
    <div class="digit">0</div>​
    </div>​
    <div class="dash minutes_dash">​
    <span class="dash_title">دقيقة</span>​
    <div class="digit">0</div>​
    <div class="digit">0</div>​
    </div>​
    <div class="dash seconds_dash">​
    <span class="dash_title">ثانية</span>​
    <div class="digit">0</div>​
    <div class="digit">0</div>​
    </div>​
    </div>​
    </div>​
    </div>​

    fg,; hgu] hgjkh.gd fhgavd' hg[hkfd
     
    dr.mystero و ®HoVe معجبون بهذا.
  2. Turkialawlqy

    Turkialawlqy xDeveloper

    إنضم إلينا في:
    ‏01-02-2012
    المشاركات:
    1,839
    الإعجابات المتلقاة:
    1,333
    الجنس:
    ذكر
    الإقامة:
    شبوة
    كود اكثر من رائع

    كما يمكن ان يتم استخدامة لاي تاريخ آخر معين فقط يتم التعديل على
    كود:
    <script type="text/javascript">
    jQuery(document).ready(function() {
        $('#countdown').countDown({
            targetDate: {
                'day':      21, // اليوم
                'month':    7,  // الشهر
                'year':    2012,// السنة
                'hour':    0,  // الساعة
                'min':      0,  // الدقيقة
                'sec':      0,  // الثانية
                'utc':        true
            }
        });
    });
    </script>
    وفقك الله أخي مصطفى
     
    أعجب بهذه المشاركة bousaid
  3. الباهي

    الباهي :: عضو ::
    rankrankrankrank

    إنضم إلينا في:
    ‏04-02-2012
    المشاركات:
    468
    الإعجابات المتلقاة:
    92
    الجنس:
    ذكر
    بارك الله فيك اخي مصطفى
    كنت ابحث عن هذا البلوك منذ زمن، وها انت ذا تأتنا فيه وعلى هذا الشكل الرائع بروعة شخصك الحبيب.

    الشكر موصول للاخ تركي على هذه الاضافة الرائعة التي قطعاً ستكون مفيدة جيداً.

    دمتم بحفظ الرحمن
     
    أعجب بهذه المشاركة bousaid
  4. dr.mystero

    dr.mystero :: عضو ::
    rank

    إنضم إلينا في:
    ‏17-02-2012
    المشاركات:
    106
    الإعجابات المتلقاة:
    27
    الجنس:
    ذكر
    الإقامة:
    Mansoura
    كود مفيد جدا
    شكرا جزيلا
     
    أعجب بهذه المشاركة bousaid
حالة الموضوع:
مغلق
جاري تحميل الصفحة...