1
\$\begingroup\$

Fiddle: http://jsfiddle.net/fhBd5/

So the above is working but I'm having trouble trying to come up with a clean and concise way to do some type of loop on the if or statements.

Any help is very much appreciated!

var checkPositionOnLoad = function (e) {
        var currentPos = 0;
        var listItem = document.getElement('li.current');
        var currentSelected = $('list').getChildren('li').indexOf(listItem) + 1;

        if (currentSelected <= 3) {
            return false;
        }
        if(currentSelected==4||currentSelected==5||currentSelected==6){
            currentPos = -300 * 1;
            $('list').setStyle('left', currentPos);      
        }
        else if(currentSelected== 7||currentSelected==8||currentSelected==9){
            currentPos = -300 * 2;
            $('list').setStyle('left', currentPos);      
        }
        else if(currentSelected==10||currentSelected==11||currentSelected==12){
            currentPos = -300 * 3;
            $('list').setStyle('left', currentPos);      
        }
        else if(currentSelected==13||currentSelected==14||currentSelected==15){
            currentPos = -300 * 4;
            $('list').setStyle('left', currentPos);       
        };

    };
\$\endgroup\$
2
  • \$\begingroup\$ Please post code into question. We can grantee that jsfiddle.net will be available in the future and thus the question may becomes meaningless for other people when reading it. \$\endgroup\$ Commented Nov 22, 2011 at 17:07
  • \$\begingroup\$ @LokiAstari not a problem! \$\endgroup\$ Commented Nov 22, 2011 at 18:10

1 Answer 1

1
\$\begingroup\$

Here is my slightly "mathematical" version of the function you have posted:

var checkPositionOnLoad = function (e) {
    var currentPos = 0;
    var listItem = document.getElement('li.current');
    var currentSelected = $('list').getChildren('li').indexOf(listItem) + 1;

    currentPos = -300 * (Math.floor((currentSelected + 2) / 3) - 1);

    $('list').setStyle('left', currentPos);
};

I will try to explain how I got to that succinct version.

I removed the duplication and wrote the function as follows:

var checkPositionOnLoad = function (e) {
    var currentPos = 0;
    var listItem = document.getElement('li.current');
    var currentSelected = $('list').getChildren('li').indexOf(listItem) + 1;

    if (currentSelected <= 3) {
        currentPos = -300 * 0;
    }
    if (currentSelected == 4 || currentSelected == 5 || currentSelected == 6) {
        currentPos = -300 * 1;
    }
    else if (currentSelected == 7 || currentSelected == 8 || currentSelected == 9) {
        currentPos = -300 * 2;
    }
    else if (currentSelected == 10 || currentSelected == 11 || currentSelected == 12) {
        currentPos = -300 * 3;
    }
    else if (currentSelected == 13 || currentSelected == 14 || currentSelected == 15) {
        currentPos = -300 * 4;
    };

    $('list').setStyle('left', currentPos);
};

Then I realized you want to figure where a given selected element falls (in which group of triplets that is {1, 2, 3} {4, 5, 6}, etc..). I played around and came up with a mathematical formula:

Math.floor((i + 2) / 3) 

This basically tells you that for i = 7, the selected element falls in the third group {7, 8, 9} which is the third triplet after {1, 2, 3} and {4, 5, 6}

And the left property can be set using:

var currentPos = -300 * (Math.floor((i + 2) / 3) - 1); // (-1 to make it zero-based index)

And that's it.

\$\endgroup\$
0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.