Databases
StackOverflow2013
Postsdbo
POWhat is the best way to detect when a div changes width with jQuery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhat is the best way to detect when a div changes width with jQuery?
    primarykey
    data
    text
    <p>I'm adjusting the width of a div using media queries. I need the page to react when that div changes width.</p> <p>I've used <code>.resize</code>, however, that triggers twice and causes an issue when the user interacts with the div further. I can't use <code>.live()</code> since that requires the user to interact to achieve the desired effect. Finally, Ive looked into <code>DOMSubtreeModified</code> but that has been depreciated.</p> <p>In simple terms this is what I want to do:</p> <pre><code>$('#element').watchForChange(function(){ *...do stuff here when the change happens...* }); </code></pre> <p>Thanks for your assistance.</p> <p>----- EDIT -------</p> <p>Let me clarify a common issue I see with resize with this example:</p> <pre><code>&lt;div id="box"&gt;&lt;/div&gt; &lt;span id="button"&gt;Open&lt;/span&gt; </code></pre> <p>In the above example assume the <code>#box</code> is 400x400 and in the "open" state <code>(display:block)</code>. When the window resizes to 800px I want the box to close (display:none). The "open" button will use jquery to open the box again <code>($('#button').click(function(){...});)</code></p> <p>The issue I keep sing is when I would click "open" the box opens then closes. The second click works fine.</p> <p>Jquery is retaining the second call in the event handler. I can't unbind it since I'll need to check the size again.</p> <p>I'm not using an open close function. Rather I'm using a next button on a slider. I need the items to reset back to the beginning on that resize. I can get them to reset, no problem. The issue is: the second click of "next" resets it.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdcp3450
    1. USdcp3450
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhat is the best way to detect when a div changes width with jQuery?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COGo fix your code in `.resize`. It's exactly what you want. From the jQuery documentation: "Code in a resize handler should never rely on the number of times the handler is called. Depending on implementation, resize events can be sent continuously as the resizing is in progress (the typical behavior in Internet Explorer and WebKit-based browsers such as Safari and Chrome), or only once at the end of the resize operation (the typical behavior in some other browsers such as Opera)."
      singulars
      1. POWhat is the best way to detect when a div changes width with jQuery?
      1. USBrad
    2. COCan you set up a jsfiddle? I think that would make it much easier to track down the issue.
      singulars
      1. POWhat is the best way to detect when a div changes width with jQuery?
      1. USkleezy
    3. COvery quick example using jsfiddle. I'm using kleezy's example from below. http://jsfiddle.net/SVy6m/
      singulars
      1. POWhat is the best way to detect when a div changes width with jQuery?
      1. USdcp3450
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload