Javascript else if -
ok. i'll try short, js abilities are. nonetheless i'm proud of piece of code (my first) , hope of use anyone. has minor flaw , i'm asking fix it. whole code css animation, js directed.
so, have list of images display div. animation consists in images dismembering elements scales away in 5x5 grid. aesthetic point randomize "transform origin" of scaling away. want define limits of these randomization depending on row , column element belongs. so, troubling code:
// begin new animation process function startchange(){ var parts = document.getelementsbyclassname('parts'); (i=0; i<parts.length; i++){ //this part checks if there match between element.classname , class corresponding 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 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+"%"; } } // random number integer between 2 low/high extremes function randomfromto(from, to) { return math.floor(math.random() * (to - + 1) + from); } (function () { function callstartchange() { startchange(); settimeout(callstartchange, 10000); } // , start process: settimeout(callstartchange, 10000); })(); as said, guess problematic line "else" statement sorts of breaks loop. if convert "else if", turns out if condition y met, script wont calculate x (which makes sense). so.. ideas on how solve issue? guess more experienced users think piece of cake. in advance.
here, jsfiddle:
http://jsfiddle.net/sourcerer/a3y52/1229/
thanks again everybody! :)
just little improvement different control structure switch.
~bitwise not operator. perfect useindexof(), becauseindexofreturns if found index0 ... n, if not-1:value ~value boolean -1 => 0 => false 0 => -1 => true 1 => -2 => true 2 => -3 => true , on
function startchange() { var parts = document.getelementsbyclassname('parts'); (i = 0; < 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: // fall here } parts[i].style.webkittransformorigin = +x + "%" + y + "%"; } }
Comments
Post a Comment