Akash Kadia Akash Kadia - 3 months ago 9
CSS Question

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

Answer

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;