Wiggling Center Problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Wiggling Center Problem

Post by volomike »

Now that much of the web has converted over to centered pages with "body {margin: 0 auto; width: 960px;}", this poses a wiggle problem when the vertical scrollbar appears on some pages or doesn't appear on others. When that vertical scrollbar appears, it shifts all the content to the left and it is a distractor to the beauty of a website in my humble opinion.

Has anyone figured out something that works with jQuery or Javascript or CSS, works with Safari, Firefox, Opera, and IE, and tries to keep the page somewhat centered as much as possible, whether the vertical scrollbar appears or not?
User avatar
novice4eva
Forum Contributor
Posts: 327
Joined: Thu Mar 29, 2007 3:48 am
Location: Nepal

Re: Wiggling Center Problem

Post by novice4eva »

This might sound silly and its not an elegant solution at all, but this is what we've been doing: adding a div with a large height so that the scroll bar comes no matter what. :dubious:
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Wiggling Center Problem

Post by kaszu »

Since it's the default browser behavior I think we shouldn't do anything about it, but if you think you really need it then add:

Code: Select all

html { overflow-y: scroll; }
IE6 doesn't understand this, but since IE6 always have scroll bars, then it doesn't matter.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Wiggling Center Problem

Post by volomike »

kaszu wrote:if you think you really need it then...
Awesome! That is freaking cool code. I added it and now the pages don't wiggle as we go from page to page. I'm going to run that by my client to see if they like it.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Wiggling Center Problem

Post by pickle »

A pure CSS/XHTML solution is probably best, but if you felt like using Javascript, you could check if the <body> of the document is longer than the window. If it is, move the content of the page right 26 pixels (I believe that's the width of the scrollbar), so it doesn't look like the content moves at all.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Wiggling Center Problem

Post by volomike »

pickle wrote:...26 pixels...
I'm on Ubuntu Linux. My scrollbars are 15 pixels wide.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Wiggling Center Problem

Post by volomike »

I found a fix. Here's a piece of cross-platform Javascript code that I came up with that determines the scrollbar width on page load, and then one can shift the body element rightwards by this amount when a scrollbar is present. It works with IE6, 7, Opera, Safari, FF2, and FF3.

Note that this has strange effects if you're not using XHTML strict. Here's the way I started off my XHTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Code: Select all

<script>
var nScrollbarWidth = Math.abs(window.innerWidth - document.body.clientWidth);
var isIE = /*@cc_on!@*/false;
if (isIE) {
    var nScrollbarWidth = Math.abs(document.body.offsetWidth - document.documentElement.clientWidth);
}
alert('' + nScrollbarWidth);
</script>
 
Now I just need to figure out how to determine via Javascript if the scrollbar is on or not.
User avatar
volomike
Forum Regular
Posts: 633
Joined: Wed Jan 16, 2008 9:04 am
Location: Myrtle Beach, South Carolina, USA

Re: Wiggling Center Problem

Post by volomike »

Hey, something I didn't realize is that on all IE browsers, the scrollbar ALWAYS appears! How about that? So there's no page wiggle if you use 'margin: 0 auto' on those browsers. It's only on the non-IE browsers where this problem occurs. Of course, you could use the following CSS:

HTML { overflow-y: scroll; }

...to make all non-IE browsers act more like IE. However, you might find that less than elegant on those browsers. Instead, you may wish to go the Javascript route. That's why I invented the following, which does require the jQuery library to be loaded:

Code: Select all

<script>
var bScrollPresent = (document.documentElement.scrollHeight > document.documentElement.clientHeight);
var nScrollbarWidth = Math.abs(window.innerWidth - document.body.clientWidth);
var isIE = /*@cc_on!@*/false;
if (nScrollbarWidth >= 29) {
    nScrollbarWidth = Math.ceil(nScrollbarWidth / 2);
}
$().ready(function(){ //when page has fully loaded
if ((bScrollPresent) && (!isIE)) {
    $('#body').css('position','relative');
    nScrollbarWidth = nScrollbarWidth - Math.ceil(nScrollbarWidth / 2);
    $('#body').css('right','-' + nScrollbarWidth + 'px');
}
});
</script>
Again, in order to use the above, you need to stick this directly before the </body> tag, you need to use the XHTML strict DOCTYPE headers, you need to use jQuery, and you need to have a div named #body where the 'margin: 0 auto; width: 960px' styling is applied.
User avatar
novice4eva
Forum Contributor
Posts: 327
Joined: Thu Mar 29, 2007 3:48 am
Location: Nepal

Re: Wiggling Center Problem

Post by novice4eva »

Sweet...CSS solution....why didn't i think of it before....STUPID DIV SOLUTION, sorry for that hahahaa :oops:
Post Reply