Solved

Interval measurement incorrect on javascript function

Posted on 2013-01-26
25
504 Views
Last Modified: 2013-01-30
Hi all,

I have a countdown timer built with intervals in it. Upon starting the user can select what intervals they would like a sound to ring at. It rings correctly on the first interval but each interval after this it is delayed by 2-3 seconds so by the end of a 20 minutes countdown, it is considerably off. I wonder could someone recreate this and assist me with fixing it?

 I had a javascript friend who designed this but unfortunately he's no longer available so I've been trying to figure it out myself but haven't had an luck so far.

Here is the code which you can recreate:

<script type = "text/javascript">
$(document).ready(function(){
	$("#ADDAMIN").click(function(){
		document.getElementById("Minutes").value = parseInt(document.getElementById("Minutes").value) + 1;
	});
	$("#ADDASEC").click(function(){
		document.getElementById("Seconds").value = parseInt(document.getElementById("Seconds").value) + 1;
	});
	$("#DECASEC").click(function(){
		document.getElementById("Seconds").value = parseInt(document.getElementById("Seconds").value) - 1;
	});
	$("#ADDINT").click(function(){
		document.getElementById("Interval").value = parseInt(document.getElementById("Interval").value) + 1;
	});
	$("#DECINT").click(function(){
		document.getElementById("Interval").value = parseInt(document.getElementById("Interval").value) - 1;
	});
	$("#DECAMIN").click(function(){
		document.getElementById("Minutes").value = parseInt(document.getElementById("Minutes").value) - 1;
	});
});

active = false;
min = 30;
sec =  0;

// variables for record later on
min_started = min;
sec_started = sec;

function Validate() {
	Minute = document.getElementById("Minutes").value.replace(/ /g,'');
	Second = document.getElementById("Seconds").value.replace(/ /g,'');
	if ($('#IntervalEnb').is(":checked"))
	{
		IntervalKeeper = document.getElementById("Interval").value.replace(/ /g,'');
	}
	else
	{
		IntervalKeeper = " ";
	}
	Interval = document.getElementById("Interval").value.replace(/ /g,'');
	if ( isNaN( Minute ) || isNaN( Second ) || isNaN( Interval ) )
	{
		alert("Sorry. Both fields must contain numerical values.");
	}
	else if ( (Second > 60 || Second < 0) || (Minute < 0) || (Interval < 0) )
	{
		alert("Sorry. The 'Second' value must be smaller than 60, and the 'Minute' and 'Interval' values must be positive.");

	}
	else if ( Minute.length == 0 || Second.length == 0 )
	{
		alert("Sorry. No field must be left blank.");
	}
	else
	{
		min = Minute;
		sec = Second;
		itv = Interval * 60;
		min_started = min;
		sec_started = sec;
		document.getElementById("Info").style.visibility = "hidden";
		document.getElementById("Actions_med").style.visibility = "visible";
		StartTimer();
	}
}

function StopTimer() {
	clearInterval(Inv);
	Pannel.innerHTML = "30:00";
	min = 30;
	sec = 0;
	min_started = min;
	sec_started = sec;
}
function PauseTimer() {
	if ( active == true )
	{
		clearInterval(Inv);
		active = false;
	}
	else
	{
		StartTimer();
	}
}
function StartTimer() {
		
		active = true;

		Inv = setInterval(function(){
		Pannel = document.getElementById("ShowTime");
		BellPlace = document.getElementById("BellPlace");
				var sec_final = sec;
				var min_final = min;
				var itv_final = itv; // calculating the interval period in seconds
				
				if ( sec < 10 )
				{
					sec_final = "0" + sec;
				}
				if ( min < 10 )
				{
					min_final = "0" + min;
				}
				Pannel.innerHTML = min_final + ":" + sec_final + "<br>" + IntervalKeeper + "<br>";
				sec = sec - 1;
				if ($('#IntervalEnb').is(":checked"))
				{
					itv = itv - 1;
					if ( itv_final < 2 ) {
					// ringing the interval bell
					itv = IntervalKeeper * 60;
					BellPlace.innerHTML = '<object height="1px" width="1px" style = "visibility: hidden;" data="http://testing.com/main_dyad_bell.mp3"></object>';
					}	
				}
				if ( sec <= 0 )
				{
					sec = 59;
					min = min - 1;
				}
				if ( sec == 58 && min < 0 )
				{
					// Timer complete!
					$.post("http://www.testing.com/logmedpop.php",{minutes_spent:min_started, seconds_spent:sec_started});
					Pannel.innerHTML = "00:00 <br> Timer Complete";
					Pannel.innerHTML += '<embed height="1px" width="1px" style = "visibility: hidden;" src="http://testing.com/file/bell.mp3">';
					min = 30;
					sec = 0;
					min_started = min;
					
					sec_started = sec;
					clearInterval(Inv);
				}
			},1000);
}
</script>
<div id = "UserBar"><span class="style1">Select the amount of time you would like to countdown</span><br>
<br></div>
<div id = "ShowTime"><br></div>
<div id = "BellPlace"><br></div>
<div id = "Actions_med">
	<input type = "button" value = "STOP" class = "MedBut" onClick = "StopTimer();">
	<input type = "button" value = "PAUSE/CONTINUE" class = "MedBut" onClick = "PauseTimer();">
	<input type = "button" value = "RESET" class = "MedBut" onClick = "location.reload();">
</div>
<div id = "Info">
	<input type = "text" id = "Minutes" value = "40" style = "text-align: center; font-weight: bold;" readonly="readonly">
    <input type = "text" id = "Seconds" value = "0" style = "text-align: center; font-weight: bold;" readonly="readonly">
	<input type = "text" id = "Interval" value = "5" style = "text-align: center; font-weight: bold;" readonly="readonly">
	<span id = "IntervalLabel">Enable Interval Alarm</span>
	<input type = "checkbox" id = "IntervalEnb">
	<div id = "ADDAMIN"><img src = "http://www.testing.com/images/add.png"></div>
	<div id = "ADDASEC"><img src = "http://www.testing.com/images/add.png"></div>
	<div id = "DECAMIN"><img src = "http://www.testing.com/images/sub.png"></div>
	<div id = "ADDINT"><img src = "http://www.testing.com/images/add.png"></div>
	<div id = "DECINT"><img src = "http://www.testing.com/images/sub.png"></div>
	<div id = "DECASEC"><img src = "http://www.testing.com/images/sub.png"></div>
	<div id = "LogoMin"><img src = "http://www.testing.com/images/MINLOGO.png"></div>
	<div id = "LogoSec"><img src = "http://www.testing.com/images/SECLOGO.png"></div>
	<div id = "LogoAnd"><img src = "http://www.testing.com/images/ANDLOGO.png"></div>
	<br><br><br><br><br><br><br>
	<input type = "button" value = "Start" id = "Start" class = "MedBut" onClick = "Validate();">
</div>
</body>

Open in new window


Let me know if you need the CSS and I can post this too.

Thank you very much for your assistance,

D
0
Comment
Question by:TLN_CANADA
  • 9
  • 8
  • 4
  • +2
25 Comments
 
LVL 42

Expert Comment

by:sedgwick
Comment Utility
try decrease the setInterval time to 250 instead of 1000.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
that is not enough

Your problem is that it counts down from values instead of a date object.

If you each time get the current time you will be precise.

Additionally you mix DOM and jQuery quite badly in my opinion
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
@TLN: is your aim to allow a user to set a date > Now() and ring an alert or something when it's reached, but it has a 2-3 seconds delay?
At first sight, I could argue that if you'd use the setTimeout function combined with a first filter to check if the future date is greater than now, you won't miss the target.
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Hi Sat1973,

My aim is for it to ring the timer sound exactly at the interval time. For example if the user selects a 5 minute total time and sets an interval of 1 minute. I would like it to ring the timer sound at exactly 4 minutes, then exactly 3 minutes etc. At the moment it is slightly off and continues to be off more incrementally at each interval.

If someone could assist me in rewriting this part of the code that would be greatly appreciated.

Thanks,

D
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Hi mplungjan,

Could you show me how to rewrite this function using the date object instead?

Thanks,

D
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Take a look at this function I developed time ago in order to open progressively a div:
var myCNT=0;
function myCountDown(mySTP, myMLS) {
	var myTime = setTimeout("myCountDown('"+mySTP+"', '"+myMLS+"')", myMLS);
	if (myCNT<mySTP) {
		myCNT++;
		alert(mySTP-(myCNT-1)+" seconds to go");
	} else {
		clearTimeout(myTime);
		myCNT=0;
	}
}

Open in new window

The 2 parameters mySTP and myMLS define the number of steps inside the interval in millisecond you want to launch the alert.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I have already made it pure jquery, but I need to spend time with my family, so I will not finish until 6 hours or so from now.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
I have looked now extensively at the code and I do not have time or patience to hack this timer into shape.

Here is a count down timer plugin already made - there are many more on the web.

https://github.com/tomgrohl/jQuery-plugins/tree/master/jcountdown
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
Feel free and safe to take acknowledged documents on the web, instead.
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Thank you both. Would it be possible to send me an example of the jcountdown in action?

I have downloaded it but I can only tell how to count it down to a particular date. I need it to function so that it will have an input for the user (for total time and interval time) and I'm not sure how to do it with this example.

Thanks again for your help,

D
0
 
LVL 9

Expert Comment

by:Sar1973
Comment Utility
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
greetings  TLN_CANADA, I have looked at your JS code and html presentation for your timer thing, , there is so much wrong with the presentation and the code that a FIX, is not a thing to be done, at least thats the way I see it. You have hobbled together chucks of code pieces that really do not go together, for instance, you have your minutes and seconds in a "READ ONLY" input, and then you have a totally useless "validate" JS function and the ONCLICK that removes the spaces -
Minute = document.getElementById("Minutes").value.replace(/ /g,'');
id a waist, there can be NO spaces in those because the user is Not allowed to place spaces in them?

you have some sort of user Click to change the minutes and seconds One At a Time, this is bad design, instead you should use a section box with a limited second, every 10 should be great

<select onchange="doSecs(this.options.selectedIndex)">
  <option value="50">50</option>
  <option value="40">40</option>
  <option value="30">30</option>
  <option value="20">20</option>
  <option value="10">10</option>
  <option value="0">0</option>
</select>

Open in new window


wid JS as-
function doSecs(indx) {
var amount = 0;
switch(indx){
case 0: amount = 50; break;
case 1: amount = 40; break;
case 2: amount = 30; break;
case 3: amount = 20; break;
case 4: amount = 10; break;
default: amount = 0;
}
document.getElementById("showSec").innerHTML = "seconds are "+amount;
sec = amount;
}

Open in new window


you need to abandon your code for the timer and simplify, there are many many JS code tutorials and examples for "visual" timers  that count down and-or have a timer that does minutes and seconds event thing.
I can show some code to help, but I do not want to do all your code work
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Ok, I'll fix your timer.

Watch this space...
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
Comment Utility
Please have a look - initially in Chrome

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="modernizr_custom.js"></script>

<script type="text/javascript">
var active = false, Inv, Interval,startTime,endTime,secs,min=0,sec=0,
min_started,sec_started;


$(function(){
  $("#start").on("click",function(){
    clearInterval(Inv);
    init();
  });
  $("#stop").on("click",function(){
    clearInterval(Inv);
    $("#ShowTime").html(formatTimer(min,sec));
  });
  $("#pause").on("click",function(){
    if (active) {
      clearInterval(Inv);
      active = false;
    }
    else {
      StartTimer();
    }
  });
  $("#reset").on("click",function(){
  	$("#stop").trigger("click");
    $("#Minutes").val(min_started);
    $("#Seconds").val(sec_started);
    $("#ShowTime").html("00:00");
    $("#Info").show();
    $("Actions_med").hide();

  });
});


function init() {
  var Minute = parseInt($("#Minutes").val(),10);
  var Second = parseInt($("#Seconds").val(),10);
  Interval = 0;
  if ($('#IntervalEnb').is(":checked")) {
    Interval = parseInt($("#Interval").val(),10);
  }
  if ( isNaN( Minute ) || isNaN( Second ) || isNaN( Interval ) ) {
    alert("Sorry. all fields must contain numerical values.");
    return;
  }
  if ( (Second > 60 || Second < 0) || (Minute < 0) || (Interval < 0) ) {
    alert("Sorry. The 'Second' value must be smaller than 60, and the 'Minute' and 'Interval' values must be positive.");
    return;
  }
  else if ( $.trim(String(Minute))=="" || $.trim(String(Second))=="" ) {
    alert("Sorry. No field must be left blank.");
    return;
  }


  secs=Minute*60+Second+1; // add one because we start immediately
  endTime = new Date(new Date().getTime()+secs*1000).getTime();

  min_started = min;
  sec_started = sec;
  $("#Info").hide();
  $("#Actions_med").show();
  StartTimer();
}

function formatTimer(min,sec) {
  if ( sec < 10 ) sec = "0" + sec;
  if ( min < 10 ) min = "0" + min;

  return ""+min + ":" + sec
}
function StartTimer() {
  active = true;
  Inv = setInterval(function(){
    var Pannel = $("#ShowTime");
    var BellPlace = $("#BellPlace");
    secs = parseInt((endTime-new Date().getTime())/1000);    
    min = parseInt(secs/60);
    sec = secs-(min*60);
  
    Pannel.html(formatTimer(min,sec) + "<br>" + Interval + "<br>");

    if ($('#IntervalEnb').is(":checked")) {
      if (Interval >= 0 && sec%60==0) {
        Interval--;
        // ringing the interval bell
 //       BellPlace.html('<object height="1px" width="1px" style = "visibility: hidden;" data="http://testing.com/main_dyad_bell.mp3"></object>');
        console.log("DING")
      }  
    }
    if ( secs <= 0) {
      // Timer complete!
        clearInterval(Inv);
//        $.post("http://www.testing.com/logmedpop.php",{minutes_spent:min_started, seconds_spent:sec_started});
        console.log("http://www.testing.com/logmedpop.php",{minutes_spent:min_started, seconds_spent:sec_started});
        Pannel.html("00:00 <br> Timer Complete");
 //       Pannel.append('<embed height="1px" width="1px" style = "visibility: hidden;" src="http://testing.com/file/bell.mp3">');
    }
  },250);
}
</script>
<div id = "UserBar"><span class="style1">Select the amount of time you would like to countdown</span><br>
<br></div>
<div id = "ShowTime"><br></div>
<div id = "BellPlace"><br></div>
<div id = "Actions_med" style="display:none">
  <input id="stop"  type = "button" value = "STOP" class = "MedBut"/>
  <input id="pause" type = "button" value = "PAUSE/CONTINUE" class = "MedBut" />
  <input id="reset" type = "button" value = "RESET" class = "MedBut"/>
</div>
<div id = "Info">
  <input type = "number" min="0" max="59" id = "Minutes" value = "40" style = "text-align: center; font-weight: bold;" />
  <input type = "number" min="0" max="59" id = "Seconds" value = "0" style = "text-align: center; font-weight: bold;"/>
  <input type = "number" min="1" max="10" id = "Interval" value = "5" style = "text-align: center; font-weight: bold;"/>
  <span id = "IntervalLabel">Enable Interval Alarm</span>
  <input type = "checkbox" id = "IntervalEnb">
  <input type = "button" value = "Start" id = "start" class = "MedBut" />
</div>
</body>

Open in new window

modernizr-custom.js
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Thank you very much mplungjan! I will test this for a few hours and see how it goes.
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
OK, I mashed some of things i doed afore togethur, as your timer wid alarm, however I did not see any way I could incorporate your given code above, I do not use jquery except wid gun to my head, so dis is just javascript.

full page code below, timer wid Alarm that Goes "BONG ALARM Sound BELL"  in text , no audio, that's another headache, LOL

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html  lang="en"><head><title>graphic Timer</title>
<script>/* <![CDATA[ */
var sec = 0, min = 40, intv = 60, alarm = true, time1 = 2400, gtDom1=0;
function getDom1(elmt1){return document.getElementById(elmt1);}
if(document.getElementById){gtDom1=1;}else if(document.all)gtDom1=2;
if(gtDom1==0){setTimeout("alert('ERROR - Your Web Browser does NOT have the Newer functions to Enable Functioning.');",3000);} else
	if(gtDom1==2){getDom1 = function(elmt1){return document.all[elmt1];}}
function setEl(elmID,htm){var Dobj=getDom1(elmID); Dobj.innerHTML=htm; Dobj=null;}

function Alarm(ck) {
var st = "Off"; 
if(ck) {
    alarm = true;
    st = "On";
	getDom1("InterSel").disabled = false;
	} 
    else {
    alarm=false;
	getDom1("InterSel").disabled = true;
	}
setEl("aOn",st);
}


function doSecs(indx) {
var amount = 0;
switch(indx){
  case 1: amount = 15; break;
  case 2: amount = 30; break;
  case 3: amount = 45; break;
  default: amount = 0;
  }
sec = amount;
}

function doMins(ten, indx) {
if (ten) {
var dif = min%10, amount = 0;
switch(indx){
  case 1: amount = 10; break;
  case 2: amount = 20; break;
  case 3: amount = 30; break;
  case 4: amount = 40; break;
  case 5: amount = 50; break;
  case 6: amount = 60; break;
  case 7: amount = 70; break;
  case 8: amount = 80; break;
  case 9: amount = 90; break;
  default: amount = 0;
  }
indx = amount+dif;
} else {
var dif = Math.floor(min/10)*10;
if (indx < 0) indx = 0; else
if (indx > 10) indx = 10;
indx += dif;
}
min = indx;
}

function doIntv(indx) {
if (indx < 0) indx = 0; else
if (indx > 9) indx = 9;
++indx;
intv = indx*60;
}

function Pause(val) {
if (val == "PAUSE IT") {
  window.clearInterval(inID);
  setEl("action", "Timer Paused");
  getDom1("pauseBut").value = "CONTINUE";
  } else {
  inID = setInterval("repeat()",1000);
  getDom1("pauseBut").value = "PAUSE IT";
  setEl("action", "Timer Running");
  }
}

function repeat() {
--time1;
var s = '';
if (alarm & ((time1%intv) == 0))
	setEl("BellPlace","BONG ALARM Sound BELL");
	else {if (time1 & 1) s = "Tick - &nbsp; &nbsp;"; else s = "&nbsp; &nbsp; - Tock"
	setEl("BellPlace",s);
	}
var m= Math.floor(time1/60);
var s = time1%60;
s= ""+s;
if (s.length ==1) s= "0"+s;
setEl("ShowTime","Time remaining: "+m+":"+s);
if(time1<1){
    window.clearInterval(inID);
	setEl("action","Timer Stopped");
	setEl("ShowTime","0:00");
	setEl("BellPlace","Ding Ding");
	getDom1("goBut").value = "START";
	}
}

function doTimer(val) {
var Tsec = 0;
if (sec > 0) Tsec = sec;
if (min > 0) Tsec += (min * 60);
if (val == "START") {
    if (Tsec < 61) {alert("ERROR - Timer can only Run with MORE than 60 Seconds!"); return;}
    time1 = Tsec;
	getDom1("goBut").value = "STOP!!";
	setEl("action","Timer Running ");
	inID = setInterval("repeat()",1000);
	} else {
	window.clearInterval(inID);
	time1 = Tsec;
	getDom1("goBut").value = "START";
	setEl("action","Timer Stopped");
	setEl("ShowTime","0:00");
	setEl("BellPlace","Ding Ding");
	}
}

function cancel() {
sec = 0; min = 40; intv = 300; alarm = true; time1 = 2400;
setEl("action","Timer Stopped");
setEl("ShowTime","0:00");
getDom1("goBut").value = "START";
getDom1("pauseBut").value = "PAUSE IT";
setEl("aOn","On");
setEl("BellPlace","Ding Ding");
getDom1("secSel").options.selectedIndex = 0;
getDom1("minSel").options.selectedIndex = 0;
getDom1("min10Sel").options.selectedIndex = 4;
getDom1("InterSel").disabled = false;
getDom1("InterSel").options.selectedIndex = 4;
getDom1("checkAlarm").checked = true;
window.clearInterval(inID);
}
/* ]]> */
</script>
</head>
<body bgcolor="#f7ffe3"><h2>Graphic Timer wid Alarm</h2>
<p>
<div style="background:#fb9; width:544px;height:246px; border:3px solid #6eb; padding:4px; text-align:center;">
<div style="background:#ccddff; width:528px;height:229px; border:2px solid #6be; padding:6px; text-align:center;">
<span style="background:#ffd; font-size:1.1em;">&nbsp; <b>Coutdown Timer</b> Set for Minutes and Seconds to Run. &nbsp;</span>
<p><span id = "action">Timer Stoped</span> . <span id = "ShowTime">0:00</span></p>
<span id = "BellPlace">Alarm Ding Ding</span>
<table border="1" align="center" cellpadding="3"><tr style="color:#777; text-align: center;"><td width="79">10 Minutes</td><td width="79">1 Minutes</td><td width="79">Seconds</td><td>Enable Interval Alarm</td><td width="79">Interval</td></tr>
<tr style="font-weight: bold; text-align: center;"><td><select id = "min10Sel" onchange="doMins(1,this.options.selectedIndex)">
  <option value="0">0</option>
  <option value="10">10</option>
  <option value="20">20</option>
  <option value="30">30</option>
  <option value="40" selected>40</option>
  <option value="50">50</option>
  <option value="60">60</option>
  <option value="70">70</option>
  <option value="80">80</option>
</select></td><td><select id = "minSel" onchange="doMins(0,this.options.selectedIndex)">
  <option value="0" selected>0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
</select></td><td><select id = "secSel" onchange="doSecs(this.options.selectedIndex)">
  <option value="0" selected>0</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
</select></td><td><input type = "checkbox" id = "checkAlarm"  checked onchange="Alarm(this.checked)"> Alarm <span id="aOn">ON</span></td>
<td><select id = "InterSel" onchange="doIntv(this.options.selectedIndex)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5" selected>5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select></td></tr></table>
<p>
<div style="width:360px; padding:4px; border:2px solid #444; margin-left:70px;">Timer controls - 
<input type = "button" id = "goBut" value = "START" class = "MedBut" onClick = "doTimer(this.value);"> 
<input type = "button" id = "pauseBut" value = "PAUSE IT" class = "MedBut" onClick = "Pause(this.value);"> 
<input type = "button" id = "reBut" value = "RESET" onClick = "cancel()"></div>
</p>
</div></div>
</p>

THE END
</body></html>

Open in new window


you may not can use this, but it works for me, and as far as the "interval after this it is delayed" thing , I use a method that reads the "Countdown Time" number to activate the Alarm thing, so they are always sequenced up.
I just do not beleive that any user will click an image 50 times to get 50 seconds in an input box, so i got de selects, much faster to adjusts.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Why not use jQuery when the asker obviously has it loaded already.
It should handle IE4 too, which it seems you decided to support ;)
0
 
LVL 33

Expert Comment

by:Slick812
Comment Utility
Oh use any and all you desire, any way you want, no blip to me, but jquery  often takes you off solving your JS page problem (like here) to get the jquery and non jquery to play nice together or write JS that you can't tell exactly what it's doing, to fix it.  But it is not bad to use, just not something I want to recode for, if I can avoid it.
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Thank you both for your input. mplungjan, as you had sent it first I'm still working with your solution and will update you soon.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Please note that I removed the images to increase and decrease since HTML5 has spinner controls. I can add them back in for non-compliant browsers

http://tjvantoll.com/2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Thank you, we are currently using the spinner control you suggested. I wonder is there any way to alter it so that the cursor does not blink on and off on the object when you are using the spinner on a particular object? For example if you are putting up the "seconds" time using the spinner there is a flicking cursor after the second display. It's not essential but we can't figure out how to remove this.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
It is not presently possible to remove this cursor which is called a caret - if we disable or make the field read-only it will not work.

Making it readonly and again use your buttons would work

Let me know if that is preferable
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 500 total points
Comment Utility
Here is a spinner that does not blink

http://jsfiddle.net/mplungjan/U46Sj/
0
 

Author Comment

by:TLN_CANADA
Comment Utility
Perfect, thank you.
0
 

Author Closing Comment

by:TLN_CANADA
Comment Utility
Thanks everyone! It's working now.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now