Display DIV when javascript/jquery condition is met (jsFiddle link included)

Question

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

score 3 · Answer 1 · answered Jul 07 '12 at 20:25

3

I think solved

http://jsfiddle.net/9FPG8/10/

answered Jul 07 '12 at 20:25

Visual Encoder

31
1

score 2 · Answer 2 · answered Jul 07 '12 at 20:29

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;
        }

Thank you for submitting this. - DK – Derek Jul 08 '12 at 02:31 — Derek, Jul 08 '12 at 02:31

score 1 · Accepted Answer · edited May 23 '17 at 11:56

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.

This is great, thanks! getElementPosition() will be very useful considering the div that I need to cover in my production app may not be top:0 and left:0. — Derek, Jul 08 '12 at 02:30
Thanks Derek, I upvoted Encoder's and Gaurang's solutions for their effort too. Some difficult looking tasks can be made also simple. :-) — Stano, Jul 08 '12 at 09:00

Display DIV when javascript/jquery condition is met (jsFiddle link included)

3 Answers3