CODEWITHSUNDEEP
javascript
wyatt
wyatt

Reputation: 3246

inexplicable math error in javascript

I have a function, used to clone the flash article scroller this page. Unfortunately I'm behind a firewall so can't upload my own code, but that should give you an idea. The function:

function select(id) {
  alert(active+"\n"+((active+1)%4));

  var prev  =  active;
  active    = (typeof(id) == "undefined" ? (active+1)%4 : id);

  $("#panel").animate({"top": tops[active]}, 750);
  $("#main"+prev).fadeOut(750);
  $("#main"+active).fadeIn(750);
}

So if select() is called without an id, it simply progresses to the next item in sequence, otherwise it goes to the selected item. It's run on a timer defined:

timer = setInterval("select()", 5000);

When an object is mouseovered, this function is run:

$("img.thumb").mouseover(function() {
  clearInterval(timer);
  select($(this).attr("id").substr(-1));
  timer = setInterval("select()", 5000);
});

The trouble is that, after a mouseover, the select function fails for one cycle, with the next object having no relation to the previous. The chosen object is consistent - it remains the same with each refresh given the same initial conditions, but it's unrelated in any way I can determine.

What is oddest is that the alert I run at the start of select(), which should be a straightforward mathematical operation, fails, claiming that (for the sequence I test - wait for an automatic scroll from 0 - 1, then mouseover 3) (3+1)%4=3.

I've tested this in both firefox and chrome, so it seems to be inherent to javascript.

I can only assume that it's storing two different values for active somehow, but nature of that schism, and how to resolve it, are beyond me.

I've attached the entire file below in case anything else is pertinent. Seems unlikely, but at this point I'm not ruling anything out.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            //alter these as you please
            var thumbs  = ["images/1t.png", "images/2t.png",
                "images/3t.png", "images/4t.png"];
            var mains       = ["images/1.png", "images/2.png",
                "images/3.png", "images/4.png"];
            var links       = ["http://www.goldcoast.com.au/gold-coast-beaches.html",
                "http://www.goldcoast.com.au/gold-coast-whale-watching.html",
                "http://www.goldcoast.com.au/gold-coast-hinterland-rainforest.html",
                "http://www.goldcoast.com.au/gold-coast-history.html"];

            //don't touch these
            var timer   = null;
            var active  = 0;
            var tops    = [0, 77, 155, 234];

            function select(id) {
                alert(active+"\n"+((active+1)%4));

                var prev    =  active;
                active      = (typeof(id) == "undefined" ? (active+1)%4 : id);

                $("#panel").animate({"top": tops[active]}, 750);
                $("#main"+prev).fadeOut(750);
                $("#main"+active).fadeIn(750);
            }

            $(function() {
                for(var i = 0; i < 4; i++) {
                    $("#thumb"+i).attr("src", thumbs[i]);
                    $("#main"+i).attr("src", mains[i]);
                }

                $("#main"+active).show();

                $("img.thumb").mouseover(function() {
                    clearInterval(timer);
                    select($(this).attr("id").substr(-1));
                    timer = setInterval("select()", 5000);
                });

                timer = setInterval("select()", 5000);
            });
        </script>
        <style type="text/css">
            #container  {position:relative;}

            #panel      {position:absolute;left:0px;top:0px;z-index:1;}

            img.thumb   {position:absolute;left:8px;z-index:2;}
            #thumb0     {top:7px;}
            #thumb1     {top:84px;}
            #thumb2     {top:162px;}
            #thumb3     {top:241px;}

            img.main        {position:absolute;left:118px;top:2px;display:none;}
        </style>
    </head>
    <body>
        <div id="container">
            <img src="images/panel.png" id="panel" />
            <img id="thumb0" class="thumb" />
            <img id="thumb1" class="thumb" />
            <img id="thumb2" class="thumb" />
            <img id="thumb3" class="thumb" />
            <img id="main0" class="main" />
            <img id="main1" class="main" />
            <img id="main2" class="main" />
            <img id="main3" class="main" />
        </div>
    </body>
</html>

Upvotes: -1

Views: 127

Answers (1)

timdream
timdream

Reputation: 5922

Use parseInt() as comment suggested.

Upvotes: 1

Related Questions