Resize My Iframe(ifr) Based On The Content Loaded In It?
Aug 27, 2010
I have been having an issue with this script to resize my iframe(ifr) based on the content loaded in it.I am half bald from this issue. Works perfect in IE7 & 8 but not in FF or Chrome.FF works "almost" - It resizes on first page loaded but doesn't resize if the iframe content is changed until refreshed. (example: If I load search results which shows 10 results and then click one and it loads the page which isn't as high as the search results page was then it just stays at the larger height until I refresh and then resizes correctly.)
I've been able to get the iFrame to resize to the content - see this link - it's pretty simple. My only problem, is if the user clicks a link so that another page is displayed, the iFrame doesn't resize. It will only resize when the parent page is reloaded. So, not sure what to do about that.
(I do work with someone who writes Javascript and PHP, so they would know how to implement it if I found a solution).
I am using a WYSIWYG web editor (Serif WebPlus X4; for a whole range of reasons - please don't turn this thread into a discussion of the pros and cons of WYSIWYG! ). It has a tool to create a site search facility, whereby you add a text box to accept the search terms, and specify an iFrame in which the results appear. The source of the iFrame is not specified as a page, but rather the content is generated and inserted by the search JavaScript that runs when the user searches the page.
I really don't want the results to be in an iFrame, because I think it looks a mess when the page and the iFrame both scroll. To avoid this, I'm trying to get the iFrame to resize to fit the results, so it won't need to scroll. (Of course, the alternative would be to change the JavaScript so the results are placed directly onto a page rather than in an iFrame, but because of the way the WYSIWYG editor works, that's less straightforward).
I've found many scripts online that would let me change the size of the iFrame based on its content, but they all assume that the content is coming from a file saved on the server, and work by checking the height of the file's content, and inserting that value as the height of the iFrame. Now, the problem is that when I use these scripts they cause the iFrame to become 0px high, I assume because the frame doesn't have a fixed source that can be measured, but rather gets its content fed in from the search JavaScript.
Can anyone help me figure out a way to resize the frame even though its content is dynamically generated as the page with the frame is loaded? I've copied below the search script and the html page with the iFrame that needs to resize. Ideally, whatever solution I use shouldn't involve editing the .js file I've attached, since this is generated automatically by the WYSIWYG program.
Ive written some code to try and resize a page dependant on the content oof an iframe. Code is as follows:
window.onload=sizeAdj(); function sizeAdj() { var elFrame = document.getElementById('theFrame'); var elTable = document.getElementById('tableGrab'); var elDivMain = document.getElementById('main'); var elDivWrapper = document.getElementById('wrapper'); [Code]....
I originally thought that I would just be able to resize the iframe and the other elements would follow suit but as you can see Ive tried to resize the other encasing elements also. The code resizes partially in chrome but only to a certain point and not to the full height of the doc content.
Basically I created a nice Jquery function to resize a window to the content on an Iframe. Because the Iframe has PHP in it which pulls a list of stockists and Iframes dont Auto resize to fit its contents if it pulls extra info.
[Code]...
So this bit of code is embedded into my Iframe, all its suppose to do is get the documents (the Iframe's) current height then it selects the parent document ( the one containing the Iframe ) then it basically adds the height to the attributes.
THE PROBLEM: It works great, the first time you use it. BOOYAKASHAA. However when you click a another stockist on the list. A smaller list for example... it keeps the height of the document really big. So it initially makes the space bigger to accomadate the list. But does not go smaller afterwards?
I have a webpage with an IFrame in it. The content for the IFrame could change per page and with it size. I don't want scrollbar's inside the IFrame but rather for the whole page. To accomplish this I must resize the height of the IFrame (width = fixed). But I can't seem to accomplish this. The links within the Iframe load the new content but I have to access the parent document to be able to resize the IFrame height. How I can resize the iframe from within javascript in the IFrame.
First time posting here. Have been enjoying all the resources available to us, very helpful. My problem:
Recently started learning css / java - i have a web page with an iframe on the index pages within a div tag, which then loads all other pages into this iframe. The thing is i require the iframe to adjust its height size according to the content loaded.
After lots of searching a have come across only one that worked for me,however it only seems to work in IE and not firefox and the like.
The project I am working on involves a flash piece that communicates with a iframe.Currently the flash piece just calls on javascript functions. I want the buttons in the flash piece to be able to change the src of the iframe.
<script type="text/javascript"> document.getElementById('video').setAttribute('src',address2); function closeVideo() {
I'm looking for a script to change the height of a iframe depending on the loaded content. I found some scripts who let it work when a webpage loads in the iframe.
But when the height of the page changes by javascript animations.
Like a box is getting 200px higher by a javascript action. The page won't reload by this action so the iframe height remains in it's current height.
Anyone has a good script that the iframe height even changed on javascript commands?
I have the following script resizeing my iframe based on height. The problem is if my site is on one domain say http://mydomain.company.com and the target page is on another domain say http://anotherdomain.mycompany.com the script does not resize the page. I cannot add anything to the pages i am linking to because they live in a CVS repository so i cannot call a function or passs information in that way.
is there any way to make my script work? I'm so fustrated, I'm so close! help!
<!--this script auto resizes the height of the iframe based on contents--> <script type="text/javascript"> <!-- function resize_iframe(){ document.getElementById("_iframe").height=768 // required for mozilla/firefox bugs, value can be "", null, or integer document.getElementById('_iframe').height=window.frames["_iframe"].document.body.scrollHeight } // --> </script>
which uses the following iframe <iframe width=96% id="_iframe" name="_iframe" src="intro.htm" scrolling="no" frameborder="no" ALLOWTRANSPARENCY="true" onload=resize_iframe();></iframe>
I'm looking for a good cross-domain iframe resizing script that adjusts its height based on its content. I have access to the html/css for the source of the iframe as well. Is there any out there?
Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really.Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with.We have a central area which can be longer or shorter depending on the forum.
I am making a simple lightbox without using the silly plugins and I want to know how to make the lightbox resize equally when its being loaded. I can only get it expand from the corner, I want it to stretch down then widen but equally on both sides.
This is the code im using: // Javascript <script language="javascript"> $(function(){ $("a#show-panel").click(function(){ $("#lightbox, #lightbox-panel").animate({"height" : "400px"},2000); $("#lightbox, #lightbox-panel").animate({"width" : "400px"},2000); }); $("a#close-panel").click(function(){ $("#lightbox, #lightbox-panel").fadeOut(300); }); }); </script>
I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript.
I am trying to write a custom BBcode for a forum I moderate. I don't have the licensing information because its not my forum and i am just a moderator. If anyone wants to verify the legitimacy of the forum I work for please PM me and I will try and get you any information I can.
I am looking at an easier way to have the background-image for a site be resized so that it looks the same across all screen resolutions (or at least close enough). The way I am doing it now is by using Javascript to get the width of the screen and then loading an appropriate sized image. Looks like this:
I need to adjust my IFrame Height based on srource page height (src) given for that IFrame. I am getting it for the pages calling in the same domain like src='test.html', but I am not getting it when calling pages from other domains like src='http://someurl.com'.
An example of the resizing of an image can be seen here as well as at most photography galleries that are full-screen. You can see the size of the image change by shrinking your browser window. I want to make that gallery using javascript. I already have the ability to make a horizontal slider with left/right navigation - that part is easy. I just have never done anything with dynamic image sizes.One thing that was brought up to me already was the ability to shrink the browser window to fit.
Is there any way to resize the iframe automatically, so that it could obtain the original height and width of the page which is embedded in that iframe? I actually saw this function on PayPal but I don't remember its link.
i have one issue on Font resizing - To set proportional fonts(i.e Arial or verdana) to match window size. That is, if this setting is in effect, and the window is enlarged, then the font size should correspondingly increase.if you get the browser's width and height details on window resize,is it possible through javascript?
i have an iframe on page to hold record editing form - the form presented in the frame needs to be different sizes depending on the form size i want the page called to resize the frame but, i can't figure out how to refer to it from the page loaded in the iframe parent().$("#myiframe").height( $("#formcontentwrapper").height() ) ;
I have an iframe on my page and I added the following code to detect the iframe file height to avoid scrolling which is working fine.
<script type="text/javascript"> function setIframeHeight(iframeName) { //var iframeWin = window.frames[iframeName];
[code]....
There is a form in the iframe and it is coming from a third party web site which I have no access. My problem is when a client submits the search form in the iframe search results page is higher than the search main page and half of search results page is not shown. Is there a way to sense that the page in the iframe is changed and resize the iframe height accordingly?
