1

I am creating a website that upon loading, performs a series of j-query animation events. When the screen resolution of a browser changes (from wide screen to normal or from normal to tablet, etc) is it possible to change the parameters of the jquery animation that occurs upon loading? For example, when the screen resolution decreases, making the jquery animation move a 1000px to the left, instead of 1320px to the left?

My Jquery code for animation upon loading is as follows:

$(document).ready(function(){
$(window).load(function(){
$("#div1").delay(500).fadeIn(1000);                 
$("#div1").animate({bottom:"+=490px"});         
$("#div1").animate({left:"+=1320px"});          
$("#div1").fadeOut(1500);

I have used media queries to change to CSS styling when the screen resolution changes, now I just need to be able to change the j-query animation too.

Giovanni Di Toro
  • 797
  • 1
  • 14
  • 34
Sam Friday Welch
  • 265
  • 2
  • 4
  • 14
  • Here's a post on detecting screen res. changes with jQuery: http://stackoverflow.com/questions/8575772/how-to-detect-in-jquery-if-screen-resolution-changes – tymeJV Jul 22 '13 at 20:10

1 Answers1

2

You're describing detecting changes to the browser window resolution, not the screen resolution. Doing that is easy with .resize(), or equivalently .on('resize', ...).

var animationParameters = {}; // an empty object

function setAnimationParametersForWindowWidth(width) {
    if (width < 1024) { // change to the width you care about
        animationParameters.fadeInTime = 500;
        // set all variables that depend on the window width
    } else {
        animationParameters.fadeInTime = 1000;
        // set all variables that depend on the window width
    }
}
function setAnimationParameters() {
    var width = $(window).width();
    setAnimationParametersForWindowWidth(width);
}

$(window).on('resize', setAnimationParameters);

function doTheAnimation() {
    $("#div1").delay(500).fadeIn(animationParameters.fadeInTime);
    // run more animations, using the variables in animationParameters
}

$(document).ready(function(){
    setAnimationParameters();
    doTheAnimation();
});

As I've shown, you should change your .animate() calls to use the values of variables instead of hard-coded numbers. This will allow the animation to be different depending on the size of the browser window. Add as many variables as there are numbers that change in your animation.

The handler for the resize event looks at $(window).width() to determine the current window width.

Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
  • Hi Rory - thanks for the above but how do i make the jquery register the different browser resolutions? – Sam Friday Welch Jul 22 '13 at 20:31
  • @SamFridayWelch I've provided a more detailed example and explained `$(window).width()`. Hopefully this clears things up for you. – Rory O'Kane Jul 22 '13 at 21:05
  • Thanks Rory, woked a treat – Sam Friday Welch Jul 28 '13 at 12:31
  • 1
    @SamFridayWelch Since my answer worked, please [accept my answer](http://stackoverflow.com/help/accepted-answer) by clicking the checkmark next to it. Also upvote my answer if “this answer is useful”. See [What should I do when someone answers my question?](http://stackoverflow.com/help/someone-answers). – Rory O'Kane Jul 28 '13 at 18:35