Wiggling Center Problem
Moderator: General Moderators
- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Wiggling Center Problem
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?
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?
- novice4eva
- Forum Contributor
- Posts: 327
- Joined: Thu Mar 29, 2007 3:48 am
- Location: Nepal
Re: Wiggling Center Problem
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. 
Re: Wiggling Center Problem
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:
IE6 doesn't understand this, but since IE6 always have scroll bars, then it doesn't matter.
Code: Select all
html { overflow-y: scroll; }- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Re: Wiggling Center Problem
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.kaszu wrote:if you think you really need it then...
Re: Wiggling Center Problem
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.
- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Re: Wiggling Center Problem
I'm on Ubuntu Linux. My scrollbars are 15 pixels wide.pickle wrote:...26 pixels...
- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Re: Wiggling Center Problem
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">
Now I just need to figure out how to determine via Javascript if the scrollbar is on or not.
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>
- volomike
- Forum Regular
- Posts: 633
- Joined: Wed Jan 16, 2008 9:04 am
- Location: Myrtle Beach, South Carolina, USA
Re: Wiggling Center Problem
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:
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.
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>- novice4eva
- Forum Contributor
- Posts: 327
- Joined: Thu Mar 29, 2007 3:48 am
- Location: Nepal
Re: Wiggling Center Problem
Sweet...CSS solution....why didn't i think of it before....STUPID DIV SOLUTION, sorry for that hahahaa 