CODEWITHSUNDEEP
javascriptjquerygoogle-chromeiframeheight
Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

Chrome: jQuery .height issue

I have been looking into this issue for some time now but could not find any solution.

Case:

I have an iframe which I need to re-size according to content (the page is AJAX intensive and content can increase and decrease as per users actions). As both the parent page and the one loading in iframe are on the same domain I have written a js function in parent page, which expects an integer value. And then sets the height of iframe through js as mentioned below.

document.getElementById('frameId').style.height = (height) + "px";

Issue:

I am using jQuery to get the height of the document when it changes.

jQuery(document).height();

The issue that I encountered was that Chrome was giving me height about 300px more than the Firefox/IE. I was looking into why this was happening. And after banging my head around I found that in Chrome for some reason when I am getting height of document it also includes in calculation those elements whose "display" setting in css is set to "none". I have a list that displays when a user makes an action. And now it is creating problem in my calculations. Due to this extra height that I am getting the page looks empty at the bottom and it feels as if something has not loaded yet (which is not very appealing).

Any assistance would be greatly appreciated.

Regards

Jehanzeb

Upvotes: 0

Views: 834

Answers (1)

adeneo
adeneo

Reputation: 318302

Did you try:

$('#frameId').height( $(document).innerHeight() );

Upvotes: 2

Related Questions