I want to change a property if the windows is being resized. How can I go back to the original property after the resize?
$(document).ready(function() {
$('div').css('do 1');
});
$(window).resize(function(){
$('div').css('do 2 and when resize is finished go back to 1');
});
.resize() is an event, not a boolean property.
So you can assign a handler that fires when the window is being resized.
i.e.
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
Try modifying your resize function to something like this
http://jsfiddle.net/Varinder/U3MKP/
Below is the code(just in case fiddle link doesnt work)
$(document).ready(function() { $('div').css('do 1'); });
var t;
$(window).resize(function() {
clearTimeout(t);
$('div').css('do 2');
t = setTimeout(function() {
//resize end (sort-of-hacky) event fires here.
$('div').css('do 1');
}, 100);
});
It looks like you are trying to do something like:
$(window).resize(function() {
var n = $(window).width;
var trigger_num = 1000;
if (n > trigger_num) {
$('div').css('do something');
}
else {
$('div').css('do something else');
}
});
The trigger number is basically a number that you define to trigger the CSS when the window exceeds a certain size. This of course can be modified with <, ==, etc.
$(window).on( "resize" , function(){
// do something
});
I recommend throttling this function because it will be fired every time a pixel size is changed. So use something like underscorejs use this. This will fire the code only every 60 frames per second.
$(window).on( "resize" , _.throttle( function(){
// do something
} , 1000/60 ) );
resizeis an event, you could only do something when it fired, you could not use it as a if condition.