Issue with Javascript function

Question

I am trying to write a function that will move an element by adjusting its 'left' style over time. Its currently not working at all in its present form.

    var tab;
    var tabPos;

    function init() {
        tab = document.getElementById("tab");
        tabPos = 10.8;
        tab.style.left = tabPos + '%';
    }

    function moveOver( ) {
        if (tabPos < 15.8)
            {
                setTimeout(function moveOver( ), 100;
                tabPos = tabPos + 0.1;
                tab.style.left = tabPos + '%';
            }
        else if (tabPos > 15.8)
            {
                setTimeout(function moveOver( ), 100;
                tabPos = tabPos - 0.1;
                tab.style.left = tabPos + '%';
            }
     }

The init function successfully sets the initial position of the element but I added the moveOver function to the code the element's position is no longer set.

You have a syntax error. Should be setTimeout(moveOver, 100); — Nathan Wall
– Nathan Wall, Commented Nov 29, 2012 at 6:42

Alvin Wong · Accepted Answer · 2012-11-29 06:59:59Z

1

Change the lines:

setTimeout(function moveOver( ), 100;

to

setTimeout(moveOver, 100);

function moveOver( ) isn't a valid JavaScript syntax. Also, your brackets (or parenthesis) doesn't match. Because you have a syntax error, your code will not work.

For setTimeout, you are supposed to pass a function as the first parameter, so mouseOver or function(){mouseOver();} will work.

Another problem of your script... is that you will see the element constantly jumping.

You have two conditions: tabpos < 15.8 and tabpos > 15.8. The condition which execution doesn't enter either one of both if-blocks is tabpos == 15.8... but JavaScript's Number is actually a floating point number. Thanks to precision error, 15.8 == 15.7 + 0.1 will result in false, which shows that 15.8 is not exactly the same as 15.7 + 0.1. In fact, 15.7 + 0.1 is approximately equal to 15.799999999999999...

So I suggest you to use an integer value for tabPos, for example 158, and divide it by 10 only when setting the style.

A possible result of your code:

var tab;
var tabPos;

function init() {
    tab = document.getElementById("tab");
    tabPos = 108;
    tab.style.left = tabPos / 10 + '%';
}

function moveOver( ) {
    if (tabPos < 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos + 1;
            tab.style.left = tabPos / 10 + '%';
        }
    else if (tabPos > 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos - 1;
            tab.style.left = tabPos / 10 + '%';
        }
 }

edited Nov 29, 2012 at 6:59

answered Nov 29, 2012 at 6:43

Alvin Wong

12.5k5 gold badges55 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

bearsquared Over a year ago

Yep, the syntax was the main issue and the code works however now that element seems to stutter when it reaches 15.8% instead of stopping.

Sphvn Over a year ago

This is because you are using < and > not <= or >=

Alvin Wong Over a year ago

@bearsquared I've expanded my answer, perhaps you would wish to review it.

ColinE · Accepted Answer · 2012-11-29 06:41:59Z

1

The brackets for your setTimeout function calls are not closed:

function moveOver( ) {
    if (tabPos < 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos + 0.1;
            tab.style.left = tabPos + '%');  // <----
        }
    else if (tabPos > 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos - 0.1;
            tab.style.left = tabPos + '%'); // <----
        }

 }

You should see JavaScript errors being reported by your browser.

answered Nov 29, 2012 at 6:41

ColinE

70.3k16 gold badges171 silver badges236 bronze badges

1 Comment

Alvin Wong Over a year ago

those are not the correct positions to place the closing brackets for this code.

Christian Westman · Accepted Answer · 2012-11-29 06:42:33Z

1

change setTimeout(function moveOver( ), 100; to setTimeout(moveOver, 100);

answered Nov 29, 2012 at 6:42

Christian Westman

3,0051 gold badge28 silver badges28 bronze badges

Collectives™ on Stack Overflow

Issue with Javascript function

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related