Geek Answers Handbook

In Chrome, the page will not change after loading Ajax

I frantically traced my way through the final leg of the site I am creating, and I only encounter an odd quirk with Chrome. FF and IE seem to work fine.

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

Here, the contents of the body of the page where the stubs are loaded is as follows:

<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 my downloads are done using jQuery load() , and I had an iteration of a site that didn't have this problem. I switched to a style over 100% width, and this problem arose in the process.

My question is this: is there a way to get the page to double-check its size when switching to another / shorter content?

+8
javascript jquery css google-chrome ajax
source share
7 answers

I think I found a solution. (At least I did not see this happen in a few minutes). In the .ajax callback, after setting the contents with $('div').html(data); , I resize the whole window using $(window).resize();

+3
source share

Exactly the same problem I ran into, and the answer I received is no.

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

It would be very nice if someone could find a way to force resize, but at the same time, this solution worked perfectly regardless of the amount of content.

+1
source share

I was able to fix this with css only. the problem was that I completely positioned my page wrapper element so that it effectively sits outside the flow of body elements. I deleted the position: absolute; top: 0; From left to right: 0; and just put the border: 0; and indentation: 0; on the body element.

+1
source share

This should be a pure CSS problem, I did not use jQuery for AJAX myself, but when you call the content, do you use this?

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

or are you using jQuery

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

if you are using jQuery you must first clear the div, for example:

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

And if that doesn't help, you can use fixed height and use the overflow css property

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

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

0
source share

If pressing clicks, you can always force the height after loading using javascript.

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

0
source share

You can use css to solve:

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

asyncBoolean

Default: true

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

-2
source share

More articles:


All Articles