run a function again when screen is resized

Question

I'm trying to do an animation which runs by clicking on aside tag. after this, I want to run the asideAnime function again when resizing screen (window).

this my JS code :

var image_url = $('aside').css('background-image'),image;
// Removing url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);

if (image_url[1]) {
    image_url = image_url[1];
    image = new Image();

    $(image).load(function () {
        var a = image.width;
        var b = image.height;
        var c = $(window).width();
        var d = $(window).height();
        var e = ((d-b)/b); //height inscrease amount ratio
        var f = a+(e*a); //changing width based on height change

        $('aside').click(function(){
            asideAnime(a,b,c,d,e,f);
            $(this).addClass('done');
        });
    });
    image.src = image_url;
}

var asideAnime = function(a,b,c,d,e,f) {
    var g = $('aside').width();
    var h = (e*a); //the amount change in width
    var condition = h > -100;
    $('aside').animate({
        width: f,
        maxWidth: c
    });

    if(condition) {
        $('.main').animate({
            right: -f,
            left: f,
            marginLeft: "0"
        });
    } else {
        $('.main').animate({
            right: "0",
            left: f,
            marginLeft: "0"
        });
    };
}

I tried to do this by using if statement before the resize function, but it didn't work..

if ($('aside').hasClass('done')) {
    $(window).resize(function(){
        asideAnime(a,b,c,d,e,f);
    });
}

anybody has any idea ? thanks

To explain more:

there is aside tag with 30% width and a background image with background-size:cover . by clicking aside, the aside opens and shows the full image. all this lines of codes are because I'm trying to open aside according to the change in bg made by background-size:cover while keeping the ratio.

There actually is something called screen in javascript, and resizing it would be difficult as it's the screen, so you should be more specific and always use window — adeneo
– adeneo, Commented Dec 10, 2013 at 17:27

adeneo · Accepted Answer · 2013-12-10 17:29:25Z

2

Once the event handler is attached, it doesn't care about the if condidition surrounding it, it will still always fire when the event happens, so you have to place the condition inside the event handler :

$(window).resize(function(){
    if ($('aside').hasClass('done')) {
        asideAnime(a,b,c,d,e,f);
    }
});

Also note that placing an event handler inside another event handler is bad practice, as a new resize event handler will be attached every time someone clicks the aside, and clicking the aside three times will fire the asideAnime function three times when the window is resized.

answered Dec 10, 2013 at 17:29

adeneo

319k29 gold badges409 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Payam Shakibafar Over a year ago

I had to use some vars out of the first function, so I did like this, but I'm not sure if it's the best way. can you help me optimizing the code format please ?

adeneo Over a year ago

Place a console.log inside the asideAnime function and check if it's at least firing on resize, then check the arguments, what are a,b,c,d etc. and where are they coming from

adeneo Over a year ago

Looking at your code, you do know the variables a,b,c etc aren't updated on resize, they are only fetched on page load, and stay the same. If you need them to change, you'll have to get them inside the resize handler.

Payam Shakibafar Over a year ago

do you have any suggestion please ?

adeneo Over a year ago

Move the variables inside the resize function

codingrose · Accepted Answer · 2013-12-10 17:29:18Z

0

Event might not trigger inside if statement.

But, once you bind, the event, it will be always triggered when window is resized. You can check condition ad execute code inside event.

Try:

$(window).resize(function(){
    if ($('aside').hasClass('done')) {
        asideAnime(a,b,c,d,e,f);
    }
});

answered Dec 10, 2013 at 17:29

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2013-12-10 17:39:17Z

0

I would suggest define var a,b,c,d,e,f globally first.and then trigger click event of aside tag on resize of window.

$(window).resize(function(){
$(aside).trigger( "click");
});

answered Dec 10, 2013 at 17:39

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

2 Comments

Payam Shakibafar Over a year ago

variables cannot be defined globally because the values are fetched when the background-image URL (like image width or height) is loaded..

Milind Anantwar Over a year ago

what is problem with defining outside?? i guess you can declae all of then as null/zero and set them on load of image.

Collectives™ on Stack Overflow

run a function again when screen is resized

3 Answers 3

5 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Related