tag:blogger.com,1999:blog-3554775196719271875.post3760388066143172773..comments2023-03-23T04:52:08.748-07:00Comments on House 9: jQuery iframe auto height pluginHouse 9http://www.blogger.com/profile/08045832658861127427noreply@blogger.comBlogger30125tag:blogger.com,1999:blog-3554775196719271875.post-44866555942213389722012-01-11T17:44:49.464-08:002012-01-11T17:44:49.464-08:00I have not used Drupal, so don't know much abo...I have not used Drupal, so don't know much about it - but it does seem to be the factorHouse 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-42513151702977182582012-01-11T11:09:13.596-08:002012-01-11T11:09:13.596-08:00At the same site I use another Iframe to load an I...At the same site I use another Iframe to load an Imagegalerie and in this case your plugin works well in Firefox when the images(links) are clicked.<br /><br />Console Output:<br />({heightOffset:0, minHeight:0, callback:(function (newHeight) {}), debug:true, diagnostics:false})<br />[object XrayWrapper [object HTMLIFrameElement]]<br />New Height: 402<br />--<br />New Height: 501<br />--<br />New Height: 545<br /><br />After switching to the slideshow it does not work anymore. Is this also a Drupal problem?<br /><br />ErikErik Verkuilhttps://www.blogger.com/profile/15951741074076200146noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-33894929688941220772012-01-09T21:09:24.728-08:002012-01-09T21:09:24.728-08:00it must have something to do with Durpal - your co...it must have something to do with Durpal - your console output of [object XrayWrapper [object HTMLIFrameElement]]<br /><br />but in my demo pages that line outputs the iframe dom element - i.e. - <iframe scrolling="no" frameborder="0" style="width: 660px" src="/iframe_content/pic2">House 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-23467609225592931712012-01-09T11:29:49.039-08:002012-01-09T11:29:49.039-08:00Thanks for your reaction.
The script that loads th...Thanks for your reaction.<br />The script that loads the form and the confirmation inside the Iframe is a php-script that just shows another html-page after the form is submitted, no ajax is involved.<br />I did what you suggested and here is the output of the console.<br />When the form is loaded-<br />({heightOffset:0, minHeight:0, callback:(function (newHeight) {}), debug:true, diagnostics:false})[object XrayWrapper [object HTMLIFrameElement]]<br />New Height: 1567<br /><br />After submitting the form -<br />New Height: 1567<br /><br />Hope this will do.<br /><br />ErikErik Verkuilhttps://www.blogger.com/profile/15951741074076200146noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-86860967810471361312012-01-07T13:39:27.922-08:002012-01-07T13:39:27.922-08:00@Erik Verkuil - the plugin fires when the iframe l...@Erik Verkuil - the plugin fires when the iframe loads, my guess is the form is submitting using ajax and never reloads - If that is the case I would not expect it to work in other browsers either, have you tried specifying debug:true and checking the output to the firefox console?House 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-51049454421020793372012-01-05T03:15:15.702-08:002012-01-05T03:15:15.702-08:00Hi,
nice plugin! I had a small problem with a fra...Hi,<br /><br />nice plugin! I had a small problem with a frameset loaded in the iframe (yes, I know...) because a frameset has no body tag. I fixed it by replacing "var newHeight = $body[0]...]" (line 75) with the following code:<br />var newHeight=0;<br />if ($body.length>0) {<br /> newHeight = $body[0].scrollHeight + options.heightOffset;<br />} <br /><br />This way the minHeight is used when no body tag is found. <br /><br />Maybe this is useful for others too.Jenshttps://www.blogger.com/profile/09758830207634803842noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-68016922455468039782012-01-04T07:15:26.679-08:002012-01-04T07:15:26.679-08:00Hello,
I'm using your script to load a regist...Hello,<br /><br />I'm using your script to load a registering script(php) inside Drupal7. The script returns a confirmation page inside the iframe on success.<br /><br />Your plugin-script works very well in allmost every browser I've tested. I only have a problem with Firefox(I've tested with several versions) when the confirmation page is loaded. The first page with the registering form is nicely adjusted to the right height. The confirmation page however inherits the length of the first page. So it looks like a blank page and you have to scroll up to see it has data in it. All the other browsers I've tested handle this right and adjust the page-length of the second page.<br /><br />I hope it is possible to solve this problem.<br /><br />Thanks, ErikErik Verkuilhttps://www.blogger.com/profile/15951741074076200146noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-39648805230809298132011-09-13T05:58:44.445-07:002011-09-13T05:58:44.445-07:00Hi,
is it possible to add "auto-width" ...Hi,<br /><br />is it possible to add "auto-width" funtion? E.g. if the iframe has an content, which has style="width:500px". If the widht cannot be determined, then just use some default (100%).Ondrej Medekhttps://www.blogger.com/profile/02465917905307330831noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-91927709556046229442011-08-29T04:33:20.159-07:002011-08-29T04:33:20.159-07:00Sorry for double post. My comment was: Is there a ...Sorry for double post. My comment was: Is there a solution for cross domain issue? Is there some js I can add that would allow this to work cross domain?<br /><br />Thxelhttps://www.blogger.com/profile/04200970573506625046noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-88696454699290492632011-07-27T23:17:57.191-07:002011-07-27T23:17:57.191-07:00Hi,
I am experiencing a problem I can't under...Hi,<br /><br />I am experiencing a problem I can't understand and I hope you are able to help me. The thing is I am accessing a site (my site) from 2 different methods both using MSIE 9. One from my private pc where the Iframe behaves beautifully expanding and auto adjusting. But when I access the same page via my citrix connection running MSIE9 too the page is cut off and I can't scroll to the bottom of the page. If instead I use Firefox on the Citrix it once again show as beautiful as I had planned.<br /><br />Can you give me a hint on what to do? <br /><br />You can check the page at:<br /><br />http://www.stat.gl/BEE201003/o1<br /><br />best regards<br /><br />LarsLars Phttps://www.blogger.com/profile/11380540168537996305noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-80113104932901697552011-07-27T05:57:19.411-07:002011-07-27T05:57:19.411-07:00Hi,
Unfortunately, I can't show you the proble...Hi,<br />Unfortunately, I can't show you the problem because the pages are on my intranet.<br /><br />The major problem is that on the child iframe, I put a text editor (the great aloha editor) : so, users can comment parts of the page. When the comment grow (carriage return for example), the main page scroll to top.<br /><br />Just to apologize, sorry for my poor english, it's difficult to me to explain in not my natural language :)<br />Thanks, yoYoOnehttps://www.blogger.com/profile/09927108916398009320noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-46040122199601830342011-07-20T07:54:55.478-07:002011-07-20T07:54:55.478-07:00@YoOne, I'm not 100% sure I know what you mea...@YoOne, I'm not 100% sure I know what you mean, if the 'host' page is scrolling back to the top after the iframe is resized, it is most likely because the total content has shrunk to only be as big as the browser window?<br /><br />do you have an example I can look at<br /><br />if the above is the issue, maybe adding 'spacer' divs below the iframe would stop this from happening?House 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-23032968534310547112011-07-20T02:57:30.058-07:002011-07-20T02:57:30.058-07:00Hi,
Thanks for this great plugin !
I've got ju...Hi,<br />Thanks for this great plugin !<br />I've got just one problem (Chrome12, FF4) : when the iframe is resized on a big page, the page scroll up to the top. I just want to the iframe be resized but no scroll appears.<br />Is this possible ?<br />Thanks, YoYoOnehttps://www.blogger.com/profile/09927108916398009320noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-21918506914991734512011-03-23T11:02:19.497-07:002011-03-23T11:02:19.497-07:00This is what I have been looking for, but I seem t...This is what I have been looking for, but I seem to have trouble with FF3.6. The contents of my iFrame is a .net application, so it is not doing a total refresh, but a postback. The same page works fine in IE7 and the iframe appears to resize properly. (your example code works fine in FF)<br /><br />Thanks,<br />DavidUnknownhttps://www.blogger.com/profile/06512715505604314672noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-90748237763376352322011-03-16T07:45:25.003-07:002011-03-16T07:45:25.003-07:00@carbeck - you might want to build up an array of ...@carbeck - you might want to build up an array of file extensions that you do not want resizing for, then check the iframe.src $(iframe).attr('src') attribute and loop through the array using lastIndexOf<br /><br />there is probably a better way <br />- JesseHouse 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-85743239830593651402011-03-16T06:44:07.599-07:002011-03-16T06:44:07.599-07:00@Venkatesh - you must include the jquery.js, see t...@Venkatesh - you must include the jquery.js, see the markup in the head tag, you need both of those script tags<br />https://github.com/house9/jquery-iframe-auto-height/blob/master/index.htmlHouse 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-52171463790525203282011-03-15T22:48:47.186-07:002011-03-15T22:48:47.186-07:00when i include the iframe.js,in this $ is not defa...when i include the iframe.js,in this $ is not defainedUnknownhttps://www.blogger.com/profile/15502772907613912293noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-34532568725769104802011-03-14T12:41:29.221-07:002011-03-14T12:41:29.221-07:00Hi Nathan,
is there any way to build in a check f...Hi Nathan,<br /><br />is there any way to build in a check for the type of media that’s included in the iframe? Adjusting the height of text files and images automatically works fine as far as I’ve tried this out on my own page, but the problem with audio files is that the iframe will use the heigth of the previously viewed file, so you may easily get a 1000 px high audio player window in the iframe… So ideally, I’d like to exclude any file type other than text and image files from automatic resizing, and instead leave the value at a default of, say, 200 px. If this sounds too abstract, here’s what I wanted to use the script for: http://goo.gl/F7Zsf (Caution: contains serious geekery).<br /><br />The thing is, in that iframe sometimes .mp3 and .pdf files have to be included, however those of course don’t have a height. I tried my luck with if-statements in the <i>function resizeHeight(iframe)</i> clause, checking the file name with <i>iframe.contentDocument.baseURI.lastIndexOf()</i>, however that only seems to allow for the case "is" and "is not" (e.g. <i>if(...lastIndexOf("mp3") == '-1') { *do stuff to resize* } else { *set a fixed value* }</i>), so I cannot check multiple values with that. My Javascript-foo is weak and <i>else if</i> doesn't work like I'd expect (from PHP), so I don't know how to proceed. It’s driving me nuts :O<br /><br />Best Wishes!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-25534373488518730752011-03-10T10:53:59.360-08:002011-03-10T10:53:59.360-08:00OK, thanks.OK, thanks.Unknownhttps://www.blogger.com/profile/04376427696230642009noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-76032843419668480832011-03-10T07:26:48.233-08:002011-03-10T07:26:48.233-08:00I don't know how you would accomplish the same...I don't know how you would accomplish the same thing for PDF files? it is using javascript and the html DOM to resize things, as far as I know PDF does not expose anything like html DOM, in fact many browsers do not inline PDF.House 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-69614804284051806832011-03-10T07:15:50.217-08:002011-03-10T07:15:50.217-08:00Thank you for this code. It works very well for m...Thank you for this code. It works very well for me.<br /><br />Do you have a version that will do the same thing using pdf files instead of html files?<br /><br />Thank you again for sharing this code, and thank you for any help you can offer.Unknownhttps://www.blogger.com/profile/04376427696230642009noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-24723797469336363172011-03-03T08:43:25.370-08:002011-03-03T08:43:25.370-08:00@lamy, yeah the plugin only does resizing when the...@lamy, yeah the plugin only does resizing when the iframe loads, any clientside changes don't refire the resize.<br /><br />I just messed around, here is some code that might do what you want, will try to incorporate something similar in the future<br /><br />https://gist.github.com/853055<br /><br />this replaces the plugin code, there is 1 additional public method at the bottom and then an example of how you might call itHouse 9https://www.blogger.com/profile/08045832658861127427noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-71359614152411257462011-03-02T01:50:31.463-08:002011-03-02T01:50:31.463-08:00the code works great but it doesnt auto-resize if ...the code works great but it doesnt auto-resize if the contents of the page inside the iframe is created dynamically, i have a page for newsfeeds that dynamically ads new divs every 5 seconds, is there a way to call the resize function whenever needed?Unknownhttps://www.blogger.com/profile/06949613378244364611noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-44027326662605311412011-02-22T09:43:20.435-08:002011-02-22T09:43:20.435-08:00Hi,
For information, demos don't work with ch...Hi,<br /><br />For information, demos don't work with chrome 9 :'(Unknownhttps://www.blogger.com/profile/13666759373892533774noreply@blogger.comtag:blogger.com,1999:blog-3554775196719271875.post-13218182419745014112011-02-14T19:51:39.062-08:002011-02-14T19:51:39.062-08:00I'm having some issues with this in Safari. It...I'm having some issues with this in Safari. It seems to resize the iframe prematurely. Anyone else experiencing this?Piper Stallardhttps://www.blogger.com/profile/04034821423331184568noreply@blogger.com