In Chrome, page won't resize after Ajax load_问答_开发者

In Chrome, page won't resize after Ajax load

开发者 https://www.devze.com 2023-03-11 00:26 出处：网络

I\'ve been feverishly CSSing my way through the final leg of a site I\'m building and I\'m running into an odd quirk with Chrome only.FF and IE seem to work fine.

I've been feverishly CSSing my way through the final leg of a site I'm building and I'm running into an odd quirk with Chrome only. FF and IE seem to work fine.

I am using jQuery to load HTML stubs and in this case a lot of content from an external blog, but when switching from the really long pages to the really short ones I get about a mile of unused page still tacked on to the end of the document.

Here's what the body of the page where the stubs are being loaded into looks like:

<body>
  <div id="page">
    <div id="mainWrapper">
       <div id="headerFullWidth"></div>
       <div id="fixedwidthcontainer">
         <div id="header">
            <div id="logo"><img src="images/logo.png" height="85px" width="187px"></div>
            <div id="shoppingcart"></div>
          </div>
          <div id="shoppingCartIcon"></div>
       </div>
       <div class="contentSpacer"></div>
       <div id="contentwrapper">
          <div id="content"></div>
       </div>
       <div class="contentSpacer"></div>
       <div id="footer">
          <div id="footerContent">
             <a href="#contactPopupContent" id="contactfooter">Contact Us</a><a href="#privacyPopupContent" id="privacyfooter">Privacy Policy</a><a href="#shippingPopupContent" id="shippingfooter">Shipping & Returns</a>
             <div id="copyrightfooter">&copy; 2011 Victory Barbers and Brand</div>
          </div>
        </div>
        <div id="fullWidthFooter"></div>
      </div>
    </div>
  </div>
</body>

All of my loads are done using jQuery load() and I have had an iteration of the site that didn't have this problem. I have been moving to a more 100% width style and this problem emerged in the process.

My question is 开发者_运维知识库this: is there a way to force the page to re-check its size when moving to different/shorter content?

I think I've found a solution to this. (At least I haven't seen it happen in a few minutes). In the .ajax callback, after setting the content with $('div').html(data);, I resize the entire window with $(window).resize();

Exactly same problem I encountered, and the answer I came about is no.

I only managed to fix this by checking the height of the new div with the new content after AJAX load, and setting the correct height with with jQuery.

It would be really good if someone could find a way to force an auto resizing, but meanwhile this solution worked perfectly regardless of the amount of content.

I was able to fix it actually with just the css. the problem was that I had absolute positioned my page wrapper element so it was effectively sitting outside of the body element flow wise. I removed the position:absolute; top:0; left:0; and just put a border:0; and padding:0; on the body element.

It should be a pure CSS problem, I haven't used jQuery for AJAX myself but when the content is called you use this?

document.getElementById('myDiv').innerHTML=myResult

or are you using jQuery

$('#myDiv').html(myResult);

$('#myDiv').append(myResult);

if you use jQuery you should clean up the div first, like this:

$('#myDiv').html('');
$('#myDiv').html(myResult);

And if that doesn't helps you could use a fixed height and use an overflow css property

     #myDiv {
       height:600px
       overflow:auto;
     }

Of course a fixed height is not always the best solution but it might help you.

If push comes to shove, you can always force the height after load with some javascript.

I try to stay away from position:absolute as much as possible.

You can use css to solve:

#myDiv{max-height:value; overflow:auto;}

asyncBoolean

Default: true

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active."