Question

I don’t know much about jquery but I know this is the only way I will achieve this effect.

Code at the moment:

JQUERY:

<script type="text/javascript">
    var settimmer = 0;
    $(function(){
            window.setInterval(function() {
                var timeCounter = $("b[id=show-time]").html();
                var updateTime = eval(timeCounter)- eval(1);
                $("b[id=show-time]").html(updateTime);

                if(updateTime <= 0){
                    $("#timer").load("images/logo.png");
                }
            }, 1000);

    });
</script>

HTML:

<div id="timerwrap"> <div id="my-timer"> <b id="show-time">100</b> </div> </div>

I was wondering it anyone could help make it so when I mouseenter the surrounding div the countdown starts then change a background image in the #timerwrap when the timer hits “0”?

Thanks a lot guys.

Answer 1

A couple of points first.

When using an id you dont need a selector like b[id=show-time] just use #show-time.

Second, you should always avoid eval, plus what you actually want is to parseInt – and of course you never need to eval a literal number.

var updateTime = parseInt(timeCounter,10) - 1;

Now, to answer your question, you eed to execute your function inside an event handler for mouseover. Also, you should only start the timer once, and remember to stop it when it reaches 0

$(function(){
    var timerId = 0;
    $('#timerwrap').mouseover(function(){
        if(timerId == 0){
            timerId = window.setInterval(function() {
                var timeCounter = $("#show-time").html();
                var updateTime = parseInt(timeCounter,10) - 1;
                $("#show-time").html(updateTime);

                if(updateTime <= 0){
                    clearTimeout(timerId);
                    $("#timer").css({background:"url(images/logo.png)"});
                }
            }, 1000);
        }
    });
 });

Live example: http://jsfiddle.net/vEsxC/