I just noticed that the jquery resize event fires twice any time the browser window is resized. I’m unable to find any documentation listing this as the default behavior. I have tested this in the latest versions of Chrome and Firefox, using jQuery 1.4 and 1.5.
Does anyone else see this behavior? Is there a specific reason for it?
Update: This happens if I click the maximize button on the browser window once. I understand that if I’m manually dragging the window to a different size, the event will be fired multiple times, but that shouldn’t be the case with the maximize button.
The code used test this is below. The browser resized text is output twice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js"></script>
<script type="text/javascript">
$(window).resize(function(){
console.log('Browser Resized');
});
</script>
<body>
</body>
</html>
This is not a problem of jQuery. It depends on the browser implementation. The browser decides when to trigger ‘resize’. And you can use window.onresize = function() {…} to test. It will be same. Nothing to do with jQuery. I tested on Win7 chrome, it is fired twice, and in Win7 opera/safari it’s fired once.