CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Akash Kadia
Akash Kadia

Reputation: 113

Prevent triggering windows resize event when css property is changed using jquery

I have added a windows resize event on my page it is called whenever page size is changed.

but when I update css values for a div element inside page using jquery css and animate it automatically triggers windows resize event.

this happens only for IE

I want to prevent resize event from executing on manual change of size by animate or css methods

Here is my code

for window resize

window.onresize=function(){ ... };

for div size change 

$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
                    width: '20%', 
                    height : $('div#divother').height() - 29
                }, 0);

EDIT: i do not want to make any change in resize event reason is it is page wise different so i have to make change in all existing events

any chance i can temporary turn it off

Upvotes: 1

Views: 2059

Answers (3)

Sanz
Sanz

Reputation: 31

To avoid unnecessary window resize event, compare the previous window width and height and proceed the window resize event if width or height differs. This is only a workaround solution.

private previousWindowWidth = 0; private previousWindowHeight = 0;

private onWindowResize(): void {

var windowWidth = window.innerWidth;
var windowHt = window.innerHeight;
if (previousWindowWidth  === windowWidth && previousWindowHeight === 
    windowHt ) {
    return;
 }

previousWindowWidth = windowWidth ;
previousWindowHeight = windowHt ;

// continue with other operations
..................................
}

Upvotes: 0

Akash Kadia
Akash Kadia

Reputation: 113

Finally i solved this. thanks to vijayP for flag suggestion. but instead of puting flag in each resize function i just override window.onresize function

i add following code in master page script /general script

(function($) {
        var oldresize = window.onresize;

        window.onresize = function() {
            if (CallPageResize)
                return oldresize.call(this);
        };
    })(jQuery);

where CallPageResize is flag and its value is set as follow

CallPageResize = false; $('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
            width: '20%',
            height: $('div#divother').height() - 29
        }, 0);
        CallPageResize = true;

Upvotes: 0

vijayP
vijayP

Reputation: 11502

You can achieve this by following way:

Before applying css animation set some flag like following:

$('div#divtest').data("css_animation", true); //set the flag

$('div#divtest').css({ 'position': 'absolute', 'z-index': '1', 'background-color': '#f6f6f6' }).animate({
    width: '20%', 
    height : $('div#divother').height() - 29
}, 0,function() {
    // Animation complete.
    $('div#divtest').data("css_animation", false); //reset the flag
});

And in resize we can check whether flag is set or not as follows:

window.onresize=function(){ 

    var flagValue = $('div#divtest').data("css_animation"); //fetch the flag value
    //don't do anything if resize is getting called via css animation
    if(flagValue === true)
        return;
    ... 

};

Upvotes: 1

Related Questions