When the 'rest' time countdown clock reaches 10, I want the "rest" div to show and display over the "display" div, causing the "display" div to be covered. When the rest time reaches 5, I want the "rest" div to hide, making the "display" div reappear.
http://jsfiddle.net/n2learning/9FPG8/2/
Any help would be great, DK
I think solved
Fiddle udpated. http://jsfiddle.net/9FPG8/11/
CSS
#rest.onTop {
position:absolute;
top:0;
left:0;
}
JS
if(time == 10){
document.getElementById("rest").className="onTop";
} else if(time == 5){
document.getElementById("rest").style.display="none";
} else if(time == 0) {
el.innerHTML = "Times up!";
clearInterval(interval);
return;
}
I also solved this problem. The div position must be set absolute, and the position of the 'display' div is also counted using javascript.
Here is my updated solution. I also simplified the code using gaurang's solution:
function countdown(element, minutes, seconds) {
...
var eld = document.getElementById('display');
var eldp = getElementPosition(eld);
if(time == 10){
el.style.top = eldp.top+'px';
el.style.left = eldp.left+'px';
el.style.position = 'absolute';
} else if (time == 5){
el.style.display='none';
}
...
function getElementPosition(Elem) {
var offsetLeft = 0, offsetTop = 0;
do {
if ( !isNaN( Elem.offsetLeft ) ) {
offsetLeft += Elem.offsetLeft;
offsetTop += Elem.offsetTop;
}
} while( Elem = Elem.offsetParent );
return {top: offsetTop, left: offsetLeft };
}
The measuring of element position is taken from here.
