2

Ok. I'll try to be short, as my JS abilities definitely are. Nonetheless I'm proud of this piece of code (my first) and I hope it could be of some use for anyone. It has a minor flaw and I'm asking your help to fix it. The whole code is a CSS animation, JS directed.

So, i have a list of images that display into a div. Animation consists in images dismembering into elements that scales away in a 5x5 grid. An aesthetic point would be to randomize the "transform origin" of this scaling away. I want to define the limits of these randomization depending on to which row and column the element belongs. So, this is the troubling code:

    // begin the new animation process

function startChange(){
    var parts = document.getElementsByClassName('parts');
    for (i=0; i<parts.length; i++){

//this part checks if there is a match between element.ClassName and Class corresponding to Rows or columns

var string = parts[i].className, p = string.indexOf("primera") > -1, s = string.indexOf("segunda") > -1, 
            t = string.indexOf("tercera") > -1, c = string.indexOf("cuarta") < -1, q = string.indexOf("quinta") < -1, 
            f = string.indexOf("first") < -1, se = string.indexOf("second") < -1, th = string.indexOf("third") < -1, 
                fo = string.indexOf("fourth") < -1, fi = string.indexOf("fifth") < -1;
        if (p == true){
            y = randomFromTo(0,500);
            }
        else if(s == true){
            y = randomFromTo(-100,400);
        }       
        else if(t == true){
            y = randomFromTo(-200,300);
        }       
        else if(c == true){
            y = randomFromTo(-300,200);
        }               
        else { //i guess this is the problematic line
            y = randomFromTo(-400,100);
        }

        if (f == true){
            x = randomFromTo(0,500);
            }
        else if(se == true){
            x = randomFromTo(-100,400);
        }       
        else if(th == true){
            x = randomFromTo(-200,300);
        }       
        else if(fo == true){
            x = randomFromTo(-300,200);
        }               
        else{
            x = randomFromTo(-400,100);
        }
        parts[i].style.webkitTransformOrigin = +x+"%"+y+"%";
    }
}

// get a random number integer between two low/high extremes

function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}

(function () {
function callStartChange() {
    startChange();
    setTimeout(callStartChange, 10000);
}
// And now start the process:

setTimeout(callStartChange, 10000);
})();

As I said, I guess the problematic line is the "else" statement that sorts of breaks the loop. But if I convert that to an "else if", it turns out that if condition for y is met, then script wont calculate it for x (which makes sense). So.. Any ideas on how to solve this issue? I guess more experienced users will think this is a piece of cake. Thanks in advance.

Here, the JSFiddle:

http://jsfiddle.net/Sourcerer/a3y52/1229/

Thanks again everybody! :)

7
  • 1
    Listen to your console Uncaught SyntaxError: Unexpected token else Commented Feb 6, 2016 at 16:40
  • @Drew Kennedy Sorry.. Editing the code.. That was a typing error Commented Feb 6, 2016 at 16:45
  • 1
    c = string.indexOf("cuarta") < -1, that is very unusual, because it makes no sense. Commented Feb 6, 2016 at 16:46
  • @Jonathan Apparently not just a typing mistake, but that "unexpected token else" is missing in my chrome console.. Commented Feb 6, 2016 at 16:48
  • 1
    but it is wrong either. the sting is in the other string, then the result is 0 or positive, or if not then it is -1. --> test case if (a.indexOf('x') > -1) { read bigger, or if (a.indexOf('x') !== -1) { or if not found if (a.indexOf('x') === -1) { or if (a.indexOf('x') < 0) { read smaller than zero. but never smaller than -1. Commented Feb 6, 2016 at 17:01

1 Answer 1

1

Just a little improvement with a different control structure switch.

~ is a bitwise not operator. It is perfect for use with indexOf(), because indexOf returns if found the index 0 ... n and if not -1:

value  ~value   boolean
 -1  =>   0  =>  false
  0  =>  -1  =>  true
  1  =>  -2  =>  true
  2  =>  -3  =>  true
  and so on 
function startChange() {
    var parts = document.getElementsByClassName('parts');
    for (i = 0; i < parts.length; i++) {
        var string = parts[i].className;
        switch (true) {
            case ~string.indexOf("primera") || ~string.indexOf("first"):
                y = randomFromTo(0, 500);
                break;
            case string.indexOf("segunda") || ~string.indexOf("second"):
                y = randomFromTo(-100, 400);
                break;
            case ~string.indexOf("tercera") || ~string.indexOf("third"):
                y = randomFromTo(-200, 300);
                break;
            case ~string.indexOf("cuarta") || ~string.indexOf("fourth"):
                y = randomFromTo(-300, 200);
                break;
            case ~string.indexOf("quinta") || ~string.indexOf("fourth"):
                y = randomFromTo(-400, 100);
                break;
            default:
                // some fall back here
        }
        parts[i].style.webkitTransformOrigin = +x + "%" + y + "%";
    }
}
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.