Develop Reference

Online Quiz: how can I avoid timer getting refreshed when user click on refresh button in the browser toolbar/Status Bar?

htmlTable.Append("<script> var seconds = " + ttime + "; function secondPassed() { var minutes = Math.round((seconds - 30) / 60); var remainingSeconds = seconds % 60; if (remainingSeconds < 10) { remainingSeconds = '0' + remainingSeconds; } document.getElementById('countdown').innerHTML = 'Time Left :- ' + minutes + ':' + remainingSeconds; if (seconds == 0) { clearInterval(countdownTimer);document.getElementById('Button1').click(); } else { seconds--; } } var countdownTimer = setInterval('secondPassed()', 1000);</script>");
PlaceHolder1.Controls.Add(new Literal { Text = htmlTable.ToString() });
The above code is used to create a timer in .aspx.cs file. It's an online exam application.

Only one timer working at the time (html+js)

I have one timer and i want it in two different places in my website. But only one is working at the time.
Here is Script + first timer below it.
<script>
var interval;
var minutes = 8;
var seconds = 41;
window.onload = function() {
countdown('countdown');
myFunction();
myFunctiontoo();
}
function countdown(element) {
interval = setInterval(function() {
var el = document.getElementById("timerx");
if(seconds == 0) {
if(minutes == 0) {
el.innerHTML = "Free trial bonus has expired!";
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}
</script>
<div class="countdown"><span style="color:#EA0423;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
</div>
A bit lower in my HTML code i have another timer.
<span style="color:#FFF1D6;">Free Trial bonus ends in </span><span id="timerx" style="font-weight:bold;">8 minutes and 42 seconds</span>.
The second timer unfortunately is not working.

Method getElementById other than getElementsByClassName return only one DOM element.
Method getElementsByClassName returns an array of elements so you can get them using an index
Here is working example: PLUNKER
You can us getElementsByClassName and your code would look like this:
function countdown(element) {
var start_value = "Free trial bonus has expired!"
interval = setInterval(function() {
var el1 = document.getElementsByClassName("timerx")[0];
var el2 = document.getElementsByClassName("timerx")[1];
if(seconds == 0) {
if(minutes == 0) {
el1.innerHTML = start_value;
el2.innerHTML = start_value;
clearInterval(interval);
return;
} else {
minutes--;
seconds = 60;
}
}
if(minutes > 0) {
var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
} else {
var minute_text = '';
}
var second_text = seconds > 1 ? 'seconds' : 'second';
el1.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
el2.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
seconds--;
}, 1000);
}

If you are calling the timer twice in the same page you need to have two IDs. The id="timerx"
<span id="timerx_"<?php echo 'DYNAMIC VARIBALE'; ?>>timer</span>
And use this new ID

is there possible to loop javascript function id?

is there possible to loop javascript function id? I have a form and the form is create using for loop; so I using this autosave javascript to save a draft; now the javascript only run the $("#remark1"). So I need to use for loop to loop the $("#remark1").
<script type="text/javascript">
$(function() {
if (localStorage) {
var content = localStorage.getItem("autoSave");
if(content) {
$("#remark1").text(content);
}
}
$("#remark1").autoSave(function() {
var time = showTime();
$("#msg").text("Draft Autosaved " + time).show();
}, 2000);
$("#refresh").click(function() {
location.reload();
});
$("#clear").click(function() {
localStorage.clear();
location.reload();
});
function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 12) ? hours - 12 : hours);
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;
timeString += (hours >= 12) ? " P.M." : " A.M.";
return timeString;
}
});
I want to loop ("remark1"), any kind solution?

Do you mean something like this?
function dynamicSave( id ) {
$("#" + id).autoSave(function() {
var time = showTime();
$("#msg").text("Draft Autosaved " + time).show();
}, 2000);
}
var ids = [ 'remark1', 'remark2' ];
ids.each(function(id) {
dynamicSave( id );
});

Javascript Countdown Timer Counting Down Not Updating Seconds/Minutes Properly

I have created a countdown timer. However, it does not count down properly. Instead of counting down per second or minutes, it counts down by hundreths and does not update properly. I created another counting up timer using the same code but it works properly counting up per increment - it counts up minutes everytime 60 seconds have passed. I'm wondering how I can make this timer count down properly.
JSBin:
http://jsbin.com/funiveremi/6/edit
Updated* Adding in the 60 Seconds Counter:
http://jsbin.com/hohusuvube/2/edit
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Input Timer</title>
<script type="text/javascript" src="part2.js"></script>
</head>
<body>
<h1><div id="time">00:00:00</div></h1>
<div id="result"></div>
<button id="start" onclick ="startClock();" >Start</button>
<button id="stop" onclick="stopTimer();">Stop</button>
<button id="clear" onclick="resetTimer();">Reset</button>
</body>
</html>
JAVASCIPT
hundreths = 10;
seconds = 15;
minutes = 20;
document.getElementById("time").innerHTML = minutes + ":" + seconds + ":" + hundreths;
var currentTime = document.getElementById('time');
var t;
function startClock() {
function add() {
hundreths--;
if (hundreths < 0) {
hundreths = 0;
seconds--;
if (seconds < 0) {
seconds = 0;
minutes--;
}
if(minutes < 0) {
seconds= 0;
minutes= 0;
stopTimer();
}
}
if (hundreths > 9 && seconds < 9) {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + hundreths;
}
else if ((seconds > 9 ) && (hundreths < 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if((seconds > 9) && (hundreths > 9)) {
currentTime.innerHTML = "0" + minutes + ":" + seconds + ":" + hundreths;
}
else if ((minutes > 9) && (seconds < 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + "0" + hundreths;
}
else if ((minutes > 9) && (seconds > 9) && (hundreths < 9)) {
currentTime.innerHTML = minutes + ":" + seconds + ":" + hundreths;
}
else {
currentTime.innerHTML = "0" + minutes + ":" + "0" + seconds + ":" + "0" + hundreths;
}
timer();
} // end function add();
function timer() {
t = setTimeout(add, 100);
}
timer();
} // end function startClock();
function stopTimer() {
document.getElementById("result").innerHTML = "<p>" + ("Your time is: " + minutes + " minutes, " + seconds + " seconds, " + "and " + hundreths + " hundreths") + "</p>";
clearTimeout(t);
} // end function stopTimer();
function resetTimer() {
clearTimeout(t);
currentTime.innerHTML = "00:00:00";
} // end function resetTimer();

Just use the Jquery Countdown plugin.
http://hilios.github.io/jQuery.countdown/
The implementation will be easier. something like this.
<div id="getting-started"></div>
<script type="text/javascript">
$("#getting-started").countdown("2016/01/01", function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
</script>

This will work, you had the logic about when to set seconds incorrect so it was constantly resetting itself. One of the best things to do in these kinds of cases if you're stuck is to simply try changing the if statements, remove some of them and play with different values. It can help teach you what's really happening in a system, and give you a clue as to what is wrong. Another tip is just to read the code aloud to yourself in normal English. As you read it aloud you will often realize you're mistakes by hearing yourself say the logic.
hundreths--;
if (hundreths < 0) {
hundreths = 10;
seconds--;
if (seconds < 0) {
seconds = 59;
minutes--;
}
if(minutes < 0) {
seconds= 0;
minutes= 0;
stopTimer();
}
}

Change Twitter page feed to my own twitter

I bought a WrapBootstrap theme a few weeks ago and I'm trying to figure out how to change the twitter feed from the creators to my own. I've posted the twitter.js file. Would the username be posted somewhere else?
function tz_format_twitter(twitters) {
var statusHTML = [];
for (var i=0; i<twitters.length; i++){
var username = twitters[i].user.screen_name;
var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]* [^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
return ''+url+'';
}).replace(/\B#([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+''+reply.substring(1)+'';
});
statusHTML.push('<li><span>'+status+'</span> <br/><b>'+relative_time(twitter s[i].created_at)+'</b></li>');
}
return statusHTML.join('');
}
function relative_time(time_value) {
var values = time_value.split(" ");
time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
var parsed_date = Date.parse(time_value);
var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
delta = delta + (relative_to.getTimezoneOffset() * 60);
if (delta < 60) {
return 'less than a minute ago';
} else if(delta < 120) {
return 'about a minute ago';
} else if(delta < (60*60)) {
return (parseInt(delta / 60)).toString() + ' minutes ago';
} else if(delta < (120*60)) {
return 'about an hour ago';
} else if(delta < (24*60*60)) {
return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
} else if(delta < (48*60*60)) {
return '1 day ago';
} else {
return (parseInt(delta / 86400)).toString() + ' days ago';
}
}

Found it in the custom.js file