Menu
I have the following javascript/jquery code in an HTML file:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script language="javascript">
$(window).resize(function(){alert('hi');});</script>
</head>
<body>
resize me
</body>
</html>
It appears relatively straight forward, however when I re size the browser window, I get two successive alert windows on Chrome and IE9 and I seemingly crash FF5.
What am I missing? Is it one fire per dimension (x/y)?
673
$(window). on('resize', function(){ var win = $(this); //this = window if (win. height() >= 820) { /* ... */ } if (win.
The resize event fires when the document view (window) has been resized. This event is not cancelable and does not bubble. In some earlier browsers it was possible to register resize event handlers on any HTML element.
jQuery resize() MethodThe resize event occurs when the browser window changes size. The resize() method triggers the resize event, or attaches a function to run when a resize event occurs.
You got it, some browsers fire on resize start and again on end while others like FF fire continuously. Solution is to use setTimeout to avoid firing all the time. An example can be found here. Here is the code from the same reference:
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
// usage:
$(window).smartresize(function(){
// code that takes it easy...
});
here's a simple example, if the user stops resizing for 500ms (half a second) you function will fire. the clearTimeout prevents the constant refire of your function. you can adjust this value as you see fit. 500ms may be too soon, you might bump it to 1000, depends on what you are doing inside the function
var resizeTimeout;
$(window).resize(function(){
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
alert('your function to run on resize');
}, 500);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
