CODEWITHSUNDEEP
javascriptjqueryfor-loopeach
Michael Walkling
Michael Walkling

Reputation: 257

Javascript/jquery for loop array

I am new to Javascript and Jquery and am writting a script that changes CSS 'transform' values when the mouse moves within the browser window to make an image change perspective.

Everything is working great! I just want to streamline my javascript/jquery to reduce the amount of code (as I am CSS targeting -webkit- -moz- -ms- etc) and also make tweaking the script easier.

Ok so here is the part I want to streamline:

$('#logo').css({

'-webkit-transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  '-moz-transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  '-ms-transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  'transform': 
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/300 + 
"deg)", 

  });

As you can see the only variation in each of the 4 central sections is the CSS browser specific elements (-webkit-, -moz-, etc) so naturally I want to create an array that will contain each of these variations and then loop through the variations.

This is my first attempt using javascript "for" to loop:

var browserTransitionCSS = [
    '-webkit-transition',
    '-moz-transition',
    '-ms-transition',
    'transition'
    ];


   for(var i=0; i < browserTransformCSS.length; i++) 
            {
$('#logo').css({
browserTransformCSS: 
     "rotateY("
     + (e.pageX-(current_width/2))/150 + 
     "deg) rotateX("
      + (e.pageY-(e.pageY*2-600)-(current_height/2))/200 + 
     "deg)", 
  });
};

This is my second attempt using Jquery "each" to loop:

var browserTransitionCSS = [
    '-webkit-transition',
    '-moz-transition',
    '-ms-transition',
    'transition'
    ];


$.each(browserTransitionCSS, function(something) { 
$('#logo').css({ 
something :  
"rotateY("
 + (e.pageX-(current_width/2))/150 + 
"deg) rotateX("
 + (e.pageY-(e.pageY*2-600)-(current_height/2))/200 
+ "deg)", 
                });
            });

And now, after hours of struggling, I am giving in and asking if anyone can please help me.

If it would be helpful to see my url then please ask.

Any help here would be very much appreciated. Thank you very much.

Upvotes: 4

Views: 763

Answers (3)

Lanka Patrudu
Lanka Patrudu

Reputation: 31

How to use: for loop till 360 angels, below is one line, it have to rotate for 24 lines with same distance.

#straight{
height: 30px;
border-right: 1px solid blue; 
-webkit-transform: rotate(45 deg);
transform: rotate(45 deg); 
position: absolute;
}

Upvotes: 0

adeneo
adeneo

Reputation: 318182

I guess I would do something like this :

$(window).on('mousemove', function(e) {
    var current_width  = $(window).width(),
        current_height = $(window).height(),
        y = (e.pageX - (current_width / 2)) / 150,
        x = (e.pageY - (e.pageY * 2 - 600) - (current_height / 2)) / 300;

    $('#logo').css( transformObj(x,y) );
});

function transformObj(x,y) {
    var pfx = ['-webkit-transform','-moz-transform','-ms-transform','transform'],
        obj = {};

    $.each(pfx, function(k,val) {
        obj[val] = "rotateY("+y+"deg) rotateX("+x+"deg)";
    });
    return obj;
}

FIDDLE

Creating the object passed to jQuery's css() method in a seperate function where you iterate the browser prefixes and apply the X and Y rotation to each one, then passing it back to css().

Upvotes: 3

mariano
mariano

Reputation: 1367

The first argument you'll receive in the function you pass to each will be the index of the element (if the object you're going over is an array) or a key (if it's an associative array).

Try:

$.each(browserTransitionCSS, function(i, element) { 
    ... and so on

Inside the function you'd be receiving each transition element: "-webkit-transition", "-moz-transition" as the element argument. Good luck

Upvotes: 0

Related Questions