Page 1 of 1

Wiggling Center Problem

Posted: Sat Oct 18, 2008 8:47 pm
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?

Re: Wiggling Center Problem

Posted: Sun Oct 19, 2008 12:27 am
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:

Re: Wiggling Center Problem

Posted: Sun Oct 19, 2008 12:13 pm
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.

Re: Wiggling Center Problem

Posted: Wed Oct 22, 2008 9:18 am
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.

Re: Wiggling Center Problem

Posted: Wed Oct 22, 2008 9:45 am
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.

Re: Wiggling Center Problem

Posted: Wed Oct 22, 2008 10:59 am
by volomike
pickle wrote:...26 pixels...
I'm on Ubuntu Linux. My scrollbars are 15 pixels wide.

Re: Wiggling Center Problem

Posted: Wed Oct 22, 2008 2:14 pm
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.

Re: Wiggling Center Problem

Posted: Wed Oct 22, 2008 6:09 pm
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.

Re: Wiggling Center Problem

Posted: Thu Oct 23, 2008 4:25 am
by novice4eva
Sweet...CSS solution....why didn't i think of it before....STUPID DIV SOLUTION, sorry for that hahahaa :oops: