CODEWITHSUNDEEP
javascriptjqueryhtml
Mark Bolusmjak
Mark Bolusmjak

Reputation: 24409

How is this layout issue commonly addressed?

I have a page where the following occurs:

  1. some stuff is rendered. static content, and content meant to be enhanced with javascript.
  2. some of the divs are instrumented for enhancement via jquery in $()
  3. some of these 3rd party scripts measure the divs they are putting content into so they know how to render it.
  4. in the meantime, as other divs are enhanced, sometimes the page gets long enough that a scroll bar appears. that means the page just got thinner and the measurements that the plugins made are now incorrect.
  5. some divs get enhanced with the wrong width.
  6. ugliness!

If I resize the browser, everything "snaps" into place where it should be.

I can see 2 solutions which I don't like.

  1. somehow force the browser to re-layout everything after every enhancement.
  2. force a vertical scrollbar. http://ryanfait.com/resources/forcing-vertical-scrollbars/

This has to be a fairly common issue. Are there other tricks or suggestions?

Upvotes: 0

Views: 71

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You could force the scrollbar to always appear in CSS, or you could set your jQuery code to execute when the page has fully loaded instead of when the DOM is ready, example below:

$(window).bind("load", function() {
   // code here
});

This may result in 'jerkiness' as content gets rendered, then is shuffled around as the script configures it for the viewport size.

Personally, I'd just force the scrollbar. Most visitors wouldn't even notice it was there all the time anyway.

Upvotes: 1

Dominic Goulet
Dominic Goulet

Reputation: 8113

KISS method : force the vertical scrollbar to be there.

Forgot to mention, you can also simply use this :

html {overflow-y: scroll;}

Upvotes: 1

Related Questions