Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    2
    Member #
    34077
    Hi There

    I purchased a countdown script where I specify the time of day that the timer counts down to everyday. So I want it to countdown to 11:11am so that everytime a visitor visits the site it shows them how many hours, minutes and seconds there are until 11:11am.

    My problem is that within this script you have to specify a timezone, which is not what I want. As this site will be visited by many different timezones I want it to use the visitors timezone. How would I do this?

    Javascript File

    (function($) {
    $.fn.countdown = function(options) {

    //custom 'this' selector
    varthisEl = $(this);

    //array of custom settings
    var settings = {

    'time':null,
    'zone': null
    };

    //append the settings array to options
    if(options) {
    $.extend(settings, options);
    }
    function countdown_proc() {
    varetime = (settings['time']);
    vareminsec = etime.split(".");

    var sdate = new Date();
    var ndate = new Date(sdate.getFullYear(),sdate.getMonth(),sdate.ge tDate(),eminsec[0],eminsec[1],eminsec[2]);
    var mdate;
    var curDate = new Date();
    if(curDate > ndate)
    {
    mdate = new Date(sdate.getFullYear(),sdate.getMonth(),sdate.ge tDate()+1,eminsec[0],eminsec[1],eminsec[2]);
    }
    else if(curDate < ndate)
    {
    mdate = new Date(sdate.getFullYear(),sdate.getMonth(),sdate.ge tDate(),eminsec[0],eminsec[1],eminsec[2]);
    }

    vargetdatem = Math.floor(mdate.getTime()/1000);

    varentDate = new Date();
    varnewentDate = Math.floor(entDate.getTime()/1000);
    //alert(newentDate);
    //newgdatem = Math.floor(getdatem/1000);

    vareventDate = getdatem - newentDate ;
    //alert(eventDate);
    varzzone = (settings['zone']);
    //alert(zzone);
    //currentDate = Math.floor($.now() / 1000);
    varplocalTime = new Date();
    varlocalTime = (plocalTime.getTime());
    var offset = (plocalTime.getTimezoneOffset()) ;
    // alert(plocalTime.getTime()/1000);
    var utc = localTime + offset ;
    varaddzone = Math.floor(zzone * 3600000);
    varaddzonesec = Math.floor(addzone/1000);
    varnewzone = Math.floor((utc + addzone)/1000);
    //alert(newzone);
    countdown_msproc();

    /*if(eventDate <= newzone) {
    callback.call(this);
    clearInterval(interval);
    }*/

    varseconds = (getdatem + addzonesec) - (newzone) ;

    varhours = Math.floor(seconds / (60 * 60));
    seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed

    varminutes = Math.floor(seconds / 60);
    seconds -= (minutes * 60); //update the seconds variable with no. of minutes removed

    //separating days digits
    //hunday = Math.floor(days/100);
    //ntenday = days%100;
    //tenday = Math.floor(ntenday/10);

    //separating hours digits
    vartenhour = Math.floor(hours/10);
    var onehour = hours%10;
    //alert(tenhour);
    if((onehour == 0) && (minutes == 0) && (seconds == 0))
    {
    countdown_htproc();
    }
    if((minutes == 0) && (seconds == 0))
    {
    countdown_hoproc();
    }

    //separating minutes digits
    vartenmin = Math.floor(minutes/10);
    varonemin = minutes%10;
    if((onemin == 0)&& (seconds == 0))
    {
    countdown_mtproc();
    }
    if(seconds == 0)
    {
    countdown_moproc();
    }
    // separating seconds digits
    vartensec = Math.floor(seconds/10);
    varonesec = seconds%10;
    if(onesec == 0)
    {
    countdown_tsproc();
    }

    //logic for the two_digits ON setting
    //if(settings['format'] == "on") {

    hours = (String(hours).length >= 2) ? hours : "0" + hours;
    minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
    seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
    //}

    //update the countdown's html values.
    if(!isNaN(seconds)) {

    thisEl.find(".hours").text(hours);
    thisEl.find(".minutes").text(minutes);
    thisEl.find(".seconds").text(seconds);
    thisEl.find(".dytensec").text(tensec);
    thisEl.find(".dyonesec").text(onesec);
    thisEl.find(".dytenmin").text(tenmin);
    thisEl.find(".dyonemin").text(onemin);
    thisEl.find(".dytenhour").text(tenhour);
    thisEl.find(".dyonehour").text(onehour);

    } else {
    alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
    clearInterval(interval);
    }
    }

    //run the function
    countdown_proc();

    //loop the function
    var interval = setInterval(countdown_proc, 1000);

    }

    function countdown_msproc()

    {

    $("#dyseconetop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dyseconetop").css("opacity","0");

    }

    })

    }

    // function for flipping tenth second.
    function countdown_tsproc()

    {

    $("#dysectentop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dysectentop").css("opacity","0");

    }

    })
    }

    //flipping for oneth digit of day
    function countdown_hnoproc()

    {

    $("#dydayonetop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dydayonetop").css("opacity","0");

    }

    })
    }

    // function for flipping tenth digit of hour.
    function countdown_htproc()

    {

    $("#dyhourtentop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dyhourtentop").css("opacity","0");

    }

    })
    }

    // function for flipping oneth digit of hour.
    function countdown_hoproc()

    {

    $("#dyhouronetop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dyhouronetop").css("opacity","0");

    }

    })
    }

    // function for flipping tenth digit of minutes.
    function countdown_mtproc()

    {

    $("#dymintentop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dymintentop").css("opacity","0");

    }

    })
    }
    // function for oneth digit of minutes.
    function countdown_moproc()

    {

    $("#dyminonetop").flip({

    direction:'tb',

    color: '#000000',

    onEnd: function(){
    $("#dyminonetop").css("opacity","0");

    }

    })
    }

    }) (jQuery);
    And here's the HTML part where you specify the time to countdown to and the timezone.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <title>jQuery Flip Countdown</title>

    <script type="text/javascript" src="js/jquery-1.5.js"></script>
    <script type="text/javascript" src="js/dycountdown.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>

    <script type="text/javascript" src="js/jquery.flip.js"></script>
    <script type="text/javascript" src="js/date.js"></script>

    <link rel="stylesheet" href="css/dycountdown.css" />
    <script type="text/javascript">
    $(document).ready(function() {

    $("#dycountdown").countdown({

    time:"11.11.00", // add time in hh:mm:ss format
    zone:"5.5"
    });

    });
    </script>

    </head>

    <body bgcolor="#000000">

    <div id="dydowntimer">
    <div id="dycountdown">

    <div id="dyhourten">

    <div id="dyhourtentop">
    </div>
    <div id="dyhourtenmid">
    <p class="dytenhour">1</p>
    </div>
    <div id="dyhourtenbot">
    </div>
    </div>
    <div id="dyhourone">
    <div id="dyhouronetop">
    </div>
    <div id="dyhouronemid">
    <p class="dyonehour">1</p>
    </div>
    <div id="dyhouronebot">
    </div>
    </div>
    <div id="dyminten">

    <div id="dymintentop">
    </div>
    <div id="dymintenmid">
    <p class="dytenmin">1</p>
    </div>
    <div id="dymintenbot">
    </div>
    </div>
    <div id="dyminone">

    <div id="dyminonetop">
    </div>
    <div id="dyminonemid">
    <p class="dyonemin">1</p>
    </div>
    <div id="dyminonebot">
    </div>
    </div>
    <div id="dysecten">

    <div id="dysectentop">
    </div>
    <div id="dysectenmid">
    <p class="dytensec">1</p>
    </div>
    <div id="dysectenbot">
    </div>
    </div>
    <div id="dysecone">

    <div id="dyseconetop">
    </div>
    <div id="dyseconemid">
    <p class="dyonesec">1</p>
    </div>
    <div id="dyseconebot">
    </div>
    </div>

    </div>
    <div id="dyfootname" >
    </div>
    </div>
    </body>

    </html>
    Any help would be much appreciated thanks guys!

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Try this:

    http://josephscott.org/archives/2009...ia-javascript/

    You could possibly use this function to provide a value to the GMT offset, but using JavaScript for this is not 100% reliable.

  4. #3
    Junior Member
    Join Date
    Dec 2012
    Posts
    2
    Member #
    34077
    Thank you - what would you suggest to use that would be more reliable?

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    For what you're looking to do, JavaScript is probably your only option outside of a full blown java applet.

    Personally, I try to limit any critical components of a site to something that a user can turn off, or can be restricted by say network administrators. If I can't do it server side with asp ( such as calculating or page controls ), I pretty much avoid it.

    I guess I'm just not understanding the countdown thing... Just be aware, it may or may not work depending on your visitors preferences or security settings.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:45 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com