I have an iframe on my index.html and this iframe is dynamic.
on my index.html I have a form, which when submitted, shows the results inside the iframe.
The problem is the Iframes height also has to be dynamic for the website to look "clean".
So in the Iframes php page, I have this code:
<body onload="parent.resize_iframe(document.body.scrollHeight)">
And in the index.html (which is the parent in this case) I have this function:
function resize_iframe(new_height){
byId('iframe001').style.height=parseInt(new_height) + 20 + 'px';
}
The problem here is not the function, but that Safari and Chrome thinks the scrollHeight is something alot bigger than it is.
I have tried alerting the scrollHeight, and the nr is always around 2000px in Chrome and Safari, but in other browsers it is dynamic as it should be (500, 300, 800 etc)...
Any ideas?
UPDATE:
I noticed when I click a link on the index, and then click the browser back button, the iframe DOES resize correctly in SAFARI and CHROME.
But I must click back in the browser for it to work...
SEE THIS QUESTION FOR FURTHER INFORMATION: Can't figure out why Chrome/Safari can't get the ScrollHeight right here
I am not sure but however I want to say what I want say. Safari and Chrome both webkit based browsers so its normal to behaviour like that. So I guess that they calculating the height adding padding and margin to normal height. please google it "webkit calculated style"
Sometimes javascript does not work as expected when the page has validation errors.
First try validating your markup (HTML).
If validating does not work, try using jQuery.
jQuery is cross-browser compatible; you should get the exact same result on every browser.
Related
I'm trying to embed a website that I don't have control on inside my website.
The issue as the title mentioned I'm facing an infinite scrolling within the iframe. If I try to open the original website it's working. Does anyone know why this happens?
Check this https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/ site to see the expected result.
while if you try to load it in an iframe it won't render correctly.
Code:
<iframe src="https://revolution.themepunch.com/le-chef-restaurant-website-wordpress-template/"></iframe>
Updats:
After debugging that page I found there's a strange behavior, which is the document height is equal to the window/view port height, this is the reason of this issue. What might cause a behaviour like this (document height == window height), I cannot find any part of code that modify the window height using API like resizeto or other stuff.
Notes:
The size of the loaded website is about 20MB.
It opens correctly on Andorid devices.
For Iphone if a scrolling animation forked, then my website crashed completely.
I'm running into the exact same problem. Will post an answer once I figure it out. So far none of the posted solutions I've found have worked (probably because I'm an amateur when it comes to CSS).
EDIT (x-post/repost):
Okay, so the answer that I found is that if you set scrolling=no for your iframe, then the bug will go away. Unfortunately the project I'm working on needs to have a scrolling iframe, so that's sort of a problem for me, but I hope this solution helps!
var iFrame = document.getElementById("iFrame");
iFrame.scrolling = "no";
I have a little problem. On my aspx page I have an iframe which contains grids, tables, etc and they always change their height obviously. The previous developer team solved the problem, that they set the height attribute of the iframe to constant 3500px. It's not so elegant way so I added a JS code, that automatically checks the content and adjust the iframe height.
I got the JS script from here:
iframe Auto Adjust Height as content changes
The issue is that, this js code works well in Chrome and Firefox and almost everytime in IE. Sometimes I got an error message in IE that says:
"unable to get property 'nodename' of undefined or null reference jquery" or "Invalid argument". From this time somehow the function inside the setInterval will never run again and that's why the iframe height will never be adjusted. I made some modification and this height checking function is called from body onload event. Theoretically this js script will run when the whole dom structure is loaded. Firefox and Chrome is Ok, and 8 times from 10 IE also works.
Can somebody help me? Is there any solution you can suggest me? Thanks a lot.
Execute your code within to ensure that it executes when the full page has been constructed:
$(document).ready(function(e) {
// .. iframe resize here
});
Sporadic failures like this on page load are almost always caused by executing JavaScript before the page is loaded and the DOM is ready.
I'm having a bit of trouble with an if statement.
I've got a little lightbox popup error message running on the site. It works fine across everything except my windows phone where the popup load at the top of the screen (apparently ie mobile doens't like absolute positioning).
My solution is to simply scroll to the top of the page to display this (but only on ie-mobile.
Here's my code:
function checkiemob()
{
if (navigator.userAgent.match(/iemobile/i))
{
window.scrollTo(0,0);
}
}
If I remove the if statement this works fine. I've also tested the if statement with simply inserting text and that works too.
Cheers
I've been working some time on Hybrid applications, and i can tell that it's not worth it if you're not CSS professional and know everything about differences in browsers.
Don't know about absolute, but maybe it will give you a hint:
position:fixed - attaches element to the specified position on the page. ( HTML standart ). Works fine in Safari and Google Chrome.
But in IEmobile this position fixes the element to the display!
I think there might be same problem with you'r absloute
That means if i try to move whole page - in google and safari this fixed element will move along with the page, remaining on the same place, but in IEmobile it will stay on the same place
I am building a site that has an image map menu with a popup box that is supposed to pop at the mouse when the mouse is hovering over a particular area. It works great in firefox and IE but when I load the page in chrome the boxes appear as if the page were not scrolled. it works fine if the page is scrolled all the way to the top, but as soon as the user scrolls down, the boxes are to high on the page.
I am using a script i got from http://www.dhtmlgoodies.com/index.html?whichScript=bubble_tooltip www(dot)dramanotebook(dot)com/menu/ (i can only put one hyperlink in)
Thanks in advance for Your help
Thats a bug in this script that also shows up on the example page. Maybe its enough to delete this line:
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0;
I was about to ask 'have you tried this in Safari?', since Chrome and Safari both use the webkit engine.
Take a look at the .js file.
function showToolTip(e,text){
/* blah blah*/
var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; /**** THIS ****/
var leftPos = e.clientX - 100;
/*etc.*/
}
It has a fix applied specifically to Safari, using the userAgent string. Chrome sends 'Safari' in the user agent string, too, so it will apply that to Chrome also. This is generally considered a poor practice. In general, I'd say the scripts from dhtmlgoodies are very outdated. Is this fix still needed for newer webkit renderers? Who knows. You might try commenting it out and seeing if that fixes it.
I am resizing an iframe, and when I do that in Firefox, the content gets refreshed.
I have a swf that extends, and in Firefox when the iframe extends to accommodate the swf, the swf appears in its normal position.
In IE this doesn't happen.
Anyone know how to prevent the refresh from happening in Firefox?
Thanks
Edit:
Ok I think the page is not being refreshed just the swf please check this out at:
http://antoniocs.org/iframe/index_.html
You can see that when the re-dimensioning takes place there is a quick "flash", in Firefox 3 and the swf returns to its initial state (not expanded), this does not happen in IE.
The code is all client side so you can view it all if you look at the source of the pages.
Antonio, I'm afraid that the problem is in Firefox it self. When Gecko detects a change to the width of an iFrame, it repaints the page and causes that "refresh." There's no way that I know of to change this behavior, short of using a different technique.
I confirmed that the problem exists in other Gecko-based browsers as well (specifically Camino and Flock). I was not able to duplicate it in WebKit-based browsers (Chrome and Safari).
It seems to be that either setting position: absolute; or .cssText will refresh the frame.
The solution is to add style="position: absolute;" to your <iframe> and set your css like this:
this.mrec_div_idObj.style.left = ((offsetLeftIframe) - (dimX - disX)) + "px";
this.mrec_div_idObj.style.top = (offsetTopDiv - disY) + "px";
this.mrec_div_idObj.style.zIndex = 99999999;
this.mrec_div_idObj.style.margin = 0;
this.mrec_div_idObj.style.padding = 0;
I've tested this and it works in Firefox 3.
There is no onresize code.
It's simple! I have an iframe with width 300 and height 250 and when I change them to 500 and 400 firefox refreshes the content and I want to prevent that.
Here is a page where you can see the code -> http://antoniocs.org/iframe/index_.html
The code to re size the iframe runs after 3 seconds and you can see the the swf, if it was extended, appears in it's initial (not extended) form.
To extend the swf just hover the mouse over it.
In ie there is no refresh in the iframe.