CODEWITHSUNDEEP
jquerycssdomappendmargin
Run
Run

Reputation: 57196

Problem with document body's overflow to hidden

After getting the right answer from this question, I am having another problem - adding margin:0em auto; to my page will cause the page 'jumpy'

.align-center-public {
    width:1000px;
    margin:0em auto;
    overflow:hidden;
}

<div id="container">

    <div class="align-center-public">

        <p style="width:800px; text-align:center; border:1px solid #000;"><a href="#">Please scroll down until you see the click button</a></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <div><a href="#" class="get-photo">click here</a></div>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>

    </div>

</div>

How can I fix this?

Here is the link again.

Upvotes: 2

Views: 4145

Answers (4)

KingRider
KingRider

Reputation: 2257

Try a javascript pure... best 'body', not try use 'html' is bug.

<script>
document.body.style.overflow = 'hidden';
</script>

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49208

EDIT

if ($.browser.msie && parseInt($.browser.version) < 9) 
    $('html').css('overflow', 'hidden');

$('body').css('overflow', 'hidden').css('padding-right','17px');

And:

if ($.browser.msie && parseInt($.browser.version) < 9) 
    $('html').css('overflow', 'auto');

$('body').css('overflow', 'auto').css('padding-right', 0);

And now I'm noticing that this apparently is all you need.

http://jfcoder.com/test/pooh.html

To keep the page from correcting when the scrollbars disappear, you need to pad the BODY appropriately. This is more than likely a different value for each browser. The above I have tested in FF6, IE8/9 and Chrome latest only.

Upvotes: 2

Pete Wilson
Pete Wilson

Reputation: 8694

It seems, too, that the images are being redisplayed when the viewport shrinks horizontally, but only after the viewport width narrows to within some set width. That's why you are getting the flash. How about putting some more borders around the images so you can get an idea what that width is?

Also: you don't have to put the images in <p>s -- there might be some interaction between paragraph and image processing in the browser. You might want to remove the <p>s and see what happens.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

It is happening because you are changing the body overflow hidden to auto on clicing click here link. Is it required to be changed?

Upvotes: 0

Related Questions