Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI resizable fire window resize event

I have 2 events, one to detect window resize and other to detect the resizable stop of div.

But when I resize the div, in the console detect the window resize event.

Is there any way to block this?

$(document).ready(function(){      $(window).bind('resize', function(){         console.log("resize");          });       $(".a").resizable();  }); 

Example: http://jsfiddle.net/qwjDz/1/

like image 552
ilslabs Avatar asked Sep 21 '11 03:09

ilslabs


People also ask

How does jQuery determine window resize?

$(window). on('resize', function(){ var win = $(this); //this = window if (win. height() >= 820) { /* ... */ } if (win.

What happens when the window is resized?

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.

What is the use of resize event in JavaScript?

.resize() Categories: Events > Browser Events. Description: Bind an event handler to the "resize" JavaScript event, or trigger that event on an element. version added: 1.0.resize( handler ) handler. Type: Function( Event eventObject ) A function to execute each time the event is triggered.

How to trigger resize event in Internet Explorer?

In your modern browsers, you can trigger the event using: window.dispatchEvent (new Event ('resize')); This doesn't work in Internet Explorer, where you'll have to do the longhand: var resizeEvent = window.document.createEvent ('UIEvents'); resizeEvent.initUIEvent ('resize', true, false, window, 0); window.dispatchEvent (resizeEvent);

What is the jQuery UI resizable plugin?

The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height. The resizable widget uses the jQuery UI CSS framework to style its look and feel.

How do I resize a window in HTML?

This method is a shortcut for .on('resize', handler) in the first and second variations, and .trigger( "resize" ) in the third. The resize event is sent to the window element when the size of the browser window changes: $( "#log" ).append( "<div>Handler for .resize() called.</div>" );


1 Answers

All of these answers are not going to help. The issue is that resize event bubbles up to the window. So eventually the e.target will be the window even if the resize happened on the div. So the real answer is to simply stop propagating the resize event:

$("#mydiv").resizable().on('resize', function (e) {     e.stopPropagation();  }); 
like image 139
Bjorn Avatar answered Sep 30 '22 05:09

Bjorn