SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member volomike's Avatar
    Join Date
    Jan 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Web Page Wiggle Issue

    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, 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?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A possible solution would be to shift the content to the right when the document height becomes greater than the window height - the problem with this is that it would involve constant checking and nobody knows the exact width of all browser scrollbars!

    A better way might be to simply make the scrollbar appear from the beginning, when the page loads...

    This works in Safari(xp),FF3, and Opera... (IE is not important because the scrollbars show by default anyway) -

    Code JavaScript:
    var wh = (typeof window.innerHeight != 'undefined' ? window.innerHeight : document.body.offsetHeight);
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.top = '0';
    div.style.width = '1px';
    div.style.height = (wh+1).toString()+'px';
    document.getElementsByTagName('body')[0].appendChild(div);

    And in jQuery:

    Code JavaScript:
    $(function(){
        $('<div/>').css({
            position: 'absolute',
            top: 0,
            width: '1px',
            height: ($(window).height() + 1).toString() + 'px'
        }).appendTo('body');
    });

    Note: you should probably add the above functionality to a window.onload event since properties of the window object (such as "innerHeight") cannot be accurately accessed before the page and all its assets have loaded...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Member volomike's Avatar
    Join Date
    Jan 2008
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't notice this until I actually cared, but IE, ever since its conception, has a vertical (although inactive) scrollbar on the right even when a page does not require a scrollbar. So, on IE, when you use BODY {margin: 0 auto; width: 960px;}, you don't get center wiggle.

    To achieve that same effect on FF, Opera, and Safari is fairly simple. Just add this CSS:

    Code CSS:
    HTML {overflow-y: scroll;}

    Now, if you have jQuery and want to go that route, here's something I came up with which lets FF, Opera, and Safari look great without forcing the right scrollbar on. Basically the trick was to find a cross-platform way that lets me know the width of the scrollbar, and then a way to detect when it's present. When I know those two things and see that it's not IE, I merely nudge the body over.

    Okay, to make the following code work, you have to use XHTML Strict in the DOCTYPE header, you need jQuery, you need to apply the centering on a DIV with an ID of "body" rather than applying it to the BODY tag, and you need to place this code last, just right before the closing </body> tag.

    Code JavaScript:
    <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>

    If you can do this in a jQuery 3 liner, or get it to work against the BODY tag instead of the a DIV named 'body', feel free to impress me.

    So, anyway, this resolves the inconsistent centering of a fixed width DIV with two different kinds of approaches, and with a cross-platform solution.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •