Page resizing is disabled in Chrome after an Ajax load

Question

Page resizing is disabled in Chrome after an Ajax load

I've been tirelessly working on the CSS for a website I'm building, and I've encountered a strange issue that only seems to affect Chrome. Firefox and Internet Explorer work perfectly fine.

I am using jQuery to load HTML stubs and a significant amount of content from an external blog. However, when transitioning from long pages to short ones, there is extra unused space added to the end of the document.

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

<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 content loads are done through jQuery load(). Previously, this issue did not exist before as I was transitioning to a wider layout style.

My question is: is there a way to make the page re-evaluate its size when switching to different or shorter content?

javascript jquery css ajax google-chrome

Answer 1

Answer №1

After some experimentation, it seems like I may have stumbled upon a resolution for this issue. (Thus far, I haven't noticed any recurrence in the past few minutes). Within the .ajax callback function, following the configuration of the content using $('div').html(data);, I trigger a window resize by executing $(window).resize();

Answer 2

After some experimentation, it seems like I may have stumbled upon a resolution for this issue. (Thus far, I haven't noticed any recurrence in the past few minutes). Within the .ajax callback function, following the configuration of the content using $('div').html(data);, I trigger a window resize by executing $(window).resize();

Answer 3

Answer №2

I faced the exact same issue, and after some trial and error, I found that the answer is negative.

The only way I was able to resolve this was by comparing the height of the new div containing the AJAX-loaded content and adjusting it using jQuery.

Although it would be ideal to have an automatic resizing feature, for now, this method worked flawlessly regardless of the content size.

Answer 4

I faced the exact same issue, and after some trial and error, I found that the answer is negative.

The only way I was able to resolve this was by comparing the height of the new div containing the AJAX-loaded content and adjusting it using jQuery.

Although it would be ideal to have an automatic resizing feature, for now, this method worked flawlessly regardless of the content size.

Answer 5

Answer №3

Through some CSS adjustments, I successfully resolved the issue. The root cause was my page wrapper element being absolutely positioned, causing it to be detached from the body element flow. To fix this, I removed the absolute positioning and instead applied border:0; and padding:0; directly to the body element.

Answer 6

Through some CSS adjustments, I successfully resolved the issue. The root cause was my page wrapper element being absolutely positioned, causing it to be detached from the body element flow. To fix this, I removed the absolute positioning and instead applied border:0; and padding:0; directly to the body element.

Answer 7

Answer №4

In tackling this issue, I think it's critical to approach it purely from a CSS perspective. Although personally, I have not delved into using jQuery for AJAX tasks before. When the content is called, do you implement the following snippet?

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

Alternatively, are you leveraging jQuery with commands like:

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

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

If jQuery is your tool of choice, make sure to clear the div first as shown below:

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

If these methods don't yield the desired outcome, consider setting a fixed height and utilizing the overflow property in your CSS:

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

Admittedly, resorting to a fixed height may not always be ideal, but it could serve as a useful temporary fix.

Answer 8

In tackling this issue, I think it's critical to approach it purely from a CSS perspective. Although personally, I have not delved into using jQuery for AJAX tasks before. When the content is called, do you implement the following snippet?

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

Alternatively, are you leveraging jQuery with commands like:

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

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

If jQuery is your tool of choice, make sure to clear the div first as shown below:

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

If these methods don't yield the desired outcome, consider setting a fixed height and utilizing the overflow property in your CSS:

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

Admittedly, resorting to a fixed height may not always be ideal, but it could serve as a useful temporary fix.

Answer 9

Answer №5

In case of necessity, one can resort to using JavaScript to manually set the height after the content has loaded.

I tend to avoid utilizing position:absolute whenever feasible.

Answer 10

In case of necessity, one can resort to using JavaScript to manually set the height after the content has loaded.

I tend to avoid utilizing position:absolute whenever feasible.

Answer 11

Answer №6

Applying CSS can help resolve the issue:

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

Answer 12

Applying CSS can help resolve the issue:

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

Answer 13

Answer №7

asyncBoolean

The default setting for the asyncBoolean is true, meaning all requests are sent asynchronously. If you require synchronous requests, change this option to false. It's important to note that cross-domain requests and dataType: "jsonp" do not support synchronous operation. Keep in mind that synchronous requests can temporarily lock the browser, preventing any other actions while the request is active.

Visit jQuery.ajax Documentation for more information

Answer 14

asyncBoolean

The default setting for the asyncBoolean is true, meaning all requests are sent asynchronously. If you require synchronous requests, change this option to false. It's important to note that cross-domain requests and dataType: "jsonp" do not support synchronous operation. Keep in mind that synchronous requests can temporarily lock the browser, preventing any other actions while the request is active.

Visit jQuery.ajax Documentation for more information

Page resizing is disabled in Chrome after an Ajax load

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Blend the background color seamlessly with the image without affecting the content

Transform form.serialize() into a custom object

The best way to centralize the input group in bootstrap

Using jQuery to search for corresponding JSON keys in the PokéAPI

From where does the data return in the case of an unsuccessful ajax request?

Issues with sending parameters via an initialisation function in JavaScript

Firefox does not process Ajax requests in the same way as other browsers

Unable to showcase information in a jQuery UI popup through AJAX when initially presented

Is it possible to iterate through div elements using .each while incorporating .append within an AJAX call?

`Async/await: Implementing a timeout after a fadeout once the fadein operation is

Nuxt Page Featuring One Exclusive Product

Utilizing JSON and AJAX for data parsing

Ways to Resolve Issues with WordPress Update and Publish Failures

Icons positioned centrally while floating to the left

javascript mysql and php clash when it comes to loading

The system of jQuery Dialog UI is unable to recognize when the close icon is clicked

What are the steps for leveraging a proxy with NodeJS and Selenium?

A combination of Webpack CSS modules with Angular templates

EMFILE error encountered while attempting to initialize a new react-native project and watch file changes

The functionality of window.event.target appears to be malfunctioning in the Firefox browser