www.webdeveloper.com
Page 1 of 3 123 LastLast
Results 1 to 15 of 37

Thread: Crazy Javascript issue

  1. #1
    Join Date
    Jan 2012
    Posts
    2

    Crazy Javascript issue

    I have a javascript counter installed at http://www.fredericknewspost.com/ (right side of the page). I'm no javascript expert, so I just tried to find and modify an existing script. It looks fine, except for one strange issue...

    Every once in a while, the countdown will list the amount of time left as X number of days, 24 hours, etc.. Of course, it should say 23 hours and adjust the number of days, instead.

    Now, I need this counter to terminate on February 6, 2012 at 6:00am. The only thing I changed was to add +6 to the hours (since the counter was terminating at midnight). Could this be causing the issue? If so, how can I correct this?

    Any help is greatly appreciated!

    Code:
    <!-- javascript countdown -->
    <style type="text/css">
    .unit {
    	font-size: 10px;
    }
    .countdown_num {
    	font-size: 30px;
    }
    .countTD {
    	width: 70px;
    	height: 70px;
    	text-align: center;
    	color: white;
    	font-weight: bold;
    	font-family:Arial, Helvetica, sans-serif;
    	background: url('images/digit.png') no-repeat right top;
    }
    </style>
    
                                                <table width="95%" border="0" cellspacing="0" cellpadding="0">
    												<tr>
    													<td align="center">
                                                        
    <div style="background-color:white;border:1px black solid;">
    <br />    
    <strong>You asked, we listened.</strong><br /><br />
    <img src="images/small_FNP_logo.png" width="250" height="23" alt="Frederick News-Post logo" />
                                              
                                                       
    <table cellpadding="0" cellspacing="0" border="0" width="280">                                               
    <!--<div id="counter" class="counter">-->
    		<tr class="countdown">
    			<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_day"></div><div class="unit">Days</div></td>
    			<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_hour"></div><div class="unit">Hours</div></td>
    			<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_min"></div><div class="unit">Minutes</div></td>
    			<td class="countTD" valign="middle"><div class="countdown_num" id="countdown_sec"></div><div class="unit">Seconds</div></td>
    		</tr>
    	</div>
    	<div id="expired" style="display:none;">
    		The deadline has passed.
    	</div>
                      
    <script type="text/javascript">
    	/*
    		Countdown Timer
    		Based on the "Count down until any date script" - By JavaScript Kit (www.javascriptkit.com)
    		Author: (c) 2009 Elbert Bautista
    		URL: http://www.egTheBlog.com
    		Licence : Open Source MIT Licence
    
    	*/
    	
    	var current="Expired"
    	var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
    
    	function countdown(yr,m,d){
    		theyear=yr;themonth=m;theday=d
    		var today=new Date()
    		var todayy=today.getYear()
    		if (todayy < 1000)
    		todayy+=1900
    		var todaym=today.getMonth()
    		var todayd=today.getDate()
    		var todayh=today.getHours()
    		var todaymin=today.getMinutes()
    		var todaysec=today.getSeconds()
    		var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
    		futurestring=montharray[m-1]+" "+d+", "+yr
    		dd=Date.parse(futurestring)-Date.parse(todaystring)
    		dday=Math.floor(dd/(60*60*1000*24)*1)
    		dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1 + 6)
    		dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
    		dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
    		if(dday==0&&dhour==0&&dmin==0&&dsec==1){
    			document.getElementById('counter').style.display='none';
    			document.getElementById('expired').style.display='block';
    			return
    		}
    		else{
    			document.getElementById('countdown_day').innerHTML=dday;
    			document.getElementById('countdown_hour').innerHTML=dhour;
    			document.getElementById('countdown_min').innerHTML=dmin;
    			document.getElementById('countdown_sec').innerHTML=dsec;
    			setTimeout("countdown(theyear,themonth,theday)",1000)
    		}
    	}
    
    	var deadline=new Date();
    	deadline.setDate(deadline.getDate()+5);
    	var deadlineYear = deadline.getYear();
    	if (deadlineYear < 1000)
    	deadlineYear+=1900
    	//enter the count down date using the format year/month/day
    	//countdown(2011,12,27);
    	countdown(2012,02,06);
    	</script>
    </table>
    <br />
    </div>
    <br />                                                
                                                        
                                                        </td>
                                                    </tr>
                                                </table>
                                                <!-- /javascript countdown -->

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Hi Pretty_Pixels,

    How about a new countdown timer, with hours/minutes/seconds?
    Anyone who comments on my use of setTimeout will be ignored

    Enjoy.
    Attached Files Attached Files
    Last edited by bionoid; 01-16-2012 at 07:19 PM. Reason: Changed orientation, hopefully making it easier to implement

  3. #3
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    Bravo Binoid, we are proud to make javascript with you !

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Quote Originally Posted by 007Julien View Post
    Bravo Binoid, we are proud to make javascript with you !
    What's that supposed to mean?

  5. #5
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Quote Originally Posted by bionoid View Post
    Anyone who comments on my use of setTimeout will be ignored
    I'm in your corner, bionoid! Nothing wrong with setTimeout.

  6. #6
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    That mean that your code is marvellous !

  7. #7
    Join Date
    Jan 2012
    Posts
    2
    Bionoid, this looks great! Thank you so much!

  8. #8
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Quote Originally Posted by bionoid View Post
    Hi Pretty_Pixels,

    How about a new countdown timer, with hours/minutes/seconds?
    Anyone who comments on my use of setTimeout will be ignored

    Enjoy.
    By that you mean me. Seriously, bad programming and you should take the time to use the timer events properly.

    When you do the math, your clock or timing will be lagging behind true time.

    If you want a timer to terminate at a specific time, you need to first off get the futureTimeRef

    Code:
    rfcDate = "6 Feb 2012 06:00:00"; // 
    futureTime = new Date( rfcDate ).getTime();
    
    function countDown(){
    	if(timeEvent){
    		if(diff>0){
    		now = new Date().getTime();
    		diff = futureTime - now;
    		diff /= 1000; // seconds
    		diff /= 60; // minutes
    		diff /= 60; // hours
    		diff /= 24; // days
    		diff /= 7; // weeks
    		}
    		if(diff<=0){
    			msg = "Out of Time";
    			clearInterval( timeEvent );
    		}
    		if(diff>1) msg = "Time left = " + diff;
    		window.status = "<<< "+msg+" >>>";
    	}// end of if
    }// end of function
    timeEvent = setInterval(countDown,1000);
    No big and fancy scripts, just raw basic stuff that illustrates how you can obtain the same results as the long winded script by simplifying the program and also using the setInterval properly.

  9. #9
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Quote Originally Posted by JunkMale View Post
    By that you mean me.
    Indeed, And you took it hook, line and sinker. And although your comment isn't really fit for a reply I'm going to anyway.

    Quote Originally Posted by JunkMale View Post
    Seriously, bad programming and you should take the time to use the timer events properly.
    This is a matter of preference, and I chose not to. I use setInterval/setTimeout where and when I feel it is appropriate. How I have used it will not cause programmatic issues in this case.

    Quote Originally Posted by JunkMale View Post
    When you do the math, your clock or timing will be lagging behind true time.
    That is completely untrue in this scenario. I have already calculated when the timer should end. Only then, in the loop, do I work out the difference between them using the CURRENT time... so it cannot be incorrect, even if I had a timer looping at 2 second intervals or more.

    Quote Originally Posted by JunkMale View Post
    Code:
    rfcDate = "6 Feb 2012 06:00:00"; // 
    futureTime = new Date( rfcDate ).getTime();
    
    function countDown(){
    	if(timeEvent){
    		if(diff>0){
    		now = new Date().getTime();
    		diff = futureTime - now;
    		diff /= 1000; // seconds
    		diff /= 60; // minutes
    		diff /= 60; // hours
    		diff /= 24; // days
    		diff /= 7; // weeks
    		}
    		if(diff<=0){
    			msg = "Out of Time";
    			clearInterval( timeEvent );
    		}
    		if(diff>1) msg = "Time left = " + diff;
    		window.status = "<<< "+msg+" >>>";
    	}// end of if
    }// end of function
    timeEvent = setInterval(countDown,1000);
    No big and fancy scripts, just raw basic stuff that illustrates how you can obtain the same results as the long winded script by simplifying the program and also using the setInterval properly.
    I'm not even sure what you were trying to prove with this code. I am wondering if you even read or understood the code that I posted?
    Why not at least give examples that actually work so I don't have to fix them first to see what you're on about.
    Sure you can calculate to a number like that in your code, but I needed to extract certain points of time to display it properly.

    Btw, there is such a thing as variable declaration ( var x = 0; ).
    So Before you comment on my bad programming you should maybe take a look at your own first.

    bionoid
    Last edited by bionoid; 01-21-2012 at 02:15 PM.

  10. #10
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Quote Originally Posted by bionoid View Post
    Indeed, And you took it hook, line and sinker. And although your comment isn't really fit for a reply I'm going to anyway.



    This is a matter of preference, and I chose not to. I use setInterval/setTimeout where and when I feel it is appropriate. How I have used it will not cause programmatic issues in this case.



    That is completely untrue in this scenario. I have already calculated when the timer should end. Only then, in the loop, do I work out the difference between them using the CURRENT time... so it cannot be incorrect, even if I had a timer looping at 2 second intervals or more.



    I'm not even sure what you were trying to prove with this code. I am wondering if you even read or understood the code that I posted?
    Why not at least give examples that actually work so I don't have to fix them first to see what you're on about.
    Sure you can calculate to a number like that in your code, but I needed to extract certain points of time to display it properly.

    Btw, there is such a thing as variable declaration ( var x = 0; ).
    So Before you comment on my bad programming you should maybe take a look at your own first.

    bionoid
    And your reply does deserve comment.

    var is to initialize a variable in a local scope meaning that it is not global. Picking fault on something like that is petty. Claiming my code does not work is also petty on your part and attempting to draw me in to a flame war is just as juvenile. I had 'the code' running in my browser before posting it, so what did you fix? What browser did you use, anything you can report helps people following this thread in the future.

    I quite rightly point out a valid reason for the use of the setInterval and how it should be used and if you had bothered to search the internet for this setTimeout usage issue, you would possibly understand the issue.

    As for me doing the running around providing you or anyone else with proof, think again.

    As for your code, I am not knocking your code so don't get your nose all bent, I am criticizing your use of an interval timer and anyone reading the thread can decide themselves if they want to follow bad programming practice or not.

    Ciao.

  11. #11
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Quote Originally Posted by JunkMale View Post
    var is to initialize a variable in a local scope meaning that it is not global. Picking fault on something like that is petty. Claiming my code does not work is also petty on your part and attempting to draw me in to a flame war is just as juvenile. I had 'the code' running in my browser before posting it, so what did you fix? What browser did you use, anything you can report helps people following this thread in the future.
    NOT declaring your variables, global or local, is an even worse programming habbit in my opinion. I recommend you sort your code out before bothering to submit more.

    Errors were reported in FireFox, and attached for your enjoyment.
    What did I do to fix it? I just declare your variables, amazing huh.

    Honestly, I don't want to start a flame war either, but I am certain your time could be better spent being more constructive and less critical.

    bionoid
    Attached Images Attached Images

  12. #12
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Quote Originally Posted by bionoid View Post
    NOT declaring your variables, global or local, is an even worse programming habbit in my opinion. I recommend you sort your code out before bothering to submit more.

    Errors were reported in FireFox, and attached for your enjoyment.
    What did I do to fix it? I just declare your variables, amazing huh.

    Honestly, I don't want to start a flame war either, but I am certain your time could be better spent being more constructive and less critical.

    bionoid
    var in a nutshell its
    A variable declared within a JavaScript function becomes LOCAL and can only be accessed within that function. (the variable has local scope).

    You can have local variables with the same name in different functions, because local variables are only recognized by the function in which they are declared.

    Local variables are destroyed when you exit the function.
    You will see arguments all over the internet on its use or not to use, that var be the question. Once you understand how it works, then you see why it is used within a function or within the main program and why its useful to use it and when its useful not to use it.

    You will find that this principle in many other programming languages, although called different things, you find that the classes declared in other structured languages can be declared as public or private.

    As for firefox, that shouldn't happen. ECMA Script page 62 gives the spec on var and variable and this alone should show that firefox isn't compliant because it is not rendering script as per ECMA Specs.

    Doesn't work in FF8 or FF9 and it should! Works fine in Opera and MSIE8 and tried it in Chrome and can not determine if its working because the output goes to a status bar that chrome which is not supported despite the window.status object existing. Looking on googls chromes help FAQ, they claim that its no longer supported..? Who put google in charge? Yet another string to add to the bow of why I don't like Google's Chrome (like M$ a leopards spots don't change).

  13. #13
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Quote Originally Posted by JunkMale View Post
    (like M$ a leopards spots don't change)
    I would reconsider that statement if I were you, as per my attachment. (IE9)

    You have made your points, and I'm going to leave it at that.

    Keep well.
    Attached Images Attached Images

  14. #14
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    Although the initial code I submitted was not set in stone, here is the alternate setInterval version.

    bionoid
    Attached Files Attached Files

  15. #15
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,272
    There no differences between setTimout and setInterval since the time is worked out again. In both cases the calculation time put a delay (less as a second) of the clock ! it's not the same case when we try to display the server time...

    &#171;The status property does not work in the default configuration of IE, Firefox, Chrome, or Safari.&#187; (W3cScholls.com) A very old code to put in the trash can !
    Last edited by 007Julien; 01-21-2012 at 05:46 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles