Databases
StackOverflow2013
Postsdbo
POIs there a way of bundling up a collection of jQuery DOM changes to be rendered in a single pass by the browser?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there a way of bundling up a collection of jQuery DOM changes to be rendered in a single pass by the browser?
    text
    copied!<p>I'm writing a site and using jQuery. I've got an issue where I want to do two distinct changes to the DOM. Basically, I'm calling <code>$.toggle()</code> on a couple of divs, one of which is hidden, and the other is visible.</p> <pre><code>&lt;div&gt; &lt;button onclick='javascript:$(".panel").toggle()'&gt;Toggle!&lt;/button&gt; &lt;div class="panel"&gt;Content1&lt;/div&gt; &lt;div class="panel hide"&gt;Content2&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The problem I have is that the browser is re-rendering the page after each call to <code>toggle()</code>. This switch is invisible to the naked eye, but results in some strange behaviour.</p> <p>What ends up happening is that the first <code>.panel</code> div is found, and that is toggled to be hidden. The second <code>.panel</code> div is then toggled, and is shown. In between these calls, the browser detects a DOM change and re-renders the page with both divs hidden.</p> <p>If these divs are at the bottom of a page, the page becomes shorter for a fraction of a time, so the page scroll position jumps up before the second div becomes visible.</p> <p>Flipping the visibility back the other way doesn't have the same effect, because now the browser briefly renders the page with both divs visible, before hiding the second div. There's no scroll issues then.</p> <p>Is it possible to somehow place some sort of hold or lock over these two actions to instruct the browser not to reflow, scroll, or otherwise render the page until the hold/lock has been released? In that case, the browser would render the page with a single <code>.panel</code>, the javascript would run and the browser would then be instructed to re-render the changed DOM. </p> <p><strong>Edit</strong></p> <p>I've added a JSFiddle of what I mean over at <a href="http://jsfiddle.net/3Kvqh/1/" rel="nofollow">http://jsfiddle.net/3Kvqh/1/</a> Simply browse to the bottom of the page and hit 'toggle', and watch the scroll be weird.</p> <p>Further testing reveals that this only occurrs in Chrome. The plot thickens.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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