Results 1 to 12 of 12
-
05-25-2004, 06:28 AM #1Web Hosting Evangelist
- Join Date
- Jul 2003
- Posts
- 461
Dynamically alter Iframe Height ?
Need some help here...
How can I do it such that the Iframe height will dynamically increase/decrease with the content loaded into the frame ?
Thanks
ps: If you wish to take a look at the page itself, kindly PM me.Shawn Ho
Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
Singapore Soccer - http://www.singaporesoccer.com
EMAIL - shawnho@sgwebhostingtalk.com
-
05-25-2004, 09:33 AM #2Junior Guru
- Join Date
- May 2003
- Location
- Veles, Macedonia
- Posts
- 241
1. Do you mean dynamicly at the page loads or when the page is loaded already. No.2 can't be done I guess.
2. What kind of scripting language do you use. I guess it would be easy to read a value from a database and pass it on to iframe tag.
-
05-25-2004, 09:37 AM #3Web Hosting Evangelist
- Join Date
- Jul 2003
- Posts
- 461
Pardon me for my ignorance in HTML please lol
1. Cause now what i have is the navigation links, and after clicking them the new page loads in the center iframe. So i would like the iframe height to be same as the loaded page and everytime I choose a new page.
2. Currently site uses PHP/MySQL....Shawn Ho
Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
Singapore Soccer - http://www.singaporesoccer.com
EMAIL - shawnho@sgwebhostingtalk.com
-
05-25-2004, 09:39 AM #4Web Hosting Master
- Join Date
- Dec 2003
- Location
- UK
- Posts
- 658
Can't you use a bit of JavaScript to modify the object's .height & .width properties ?
Alex Monaghan - Monaghan Consultants Ltd
Web hosting, ADSL, IT & Database consultancy
Custom Web hosting Linux/cPanel (UK or USA servers) or Windows/DotNetPanel (UK only). Reseller accounts also available
-
05-25-2004, 09:43 AM #5Web Hosting Evangelist
- Join Date
- Jul 2003
- Posts
- 461
Originally posted by monaghan
Can't you use a bit of JavaScript to modify the object's .height & .width properties ?Shawn Ho
Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
Singapore Soccer - http://www.singaporesoccer.com
EMAIL - shawnho@sgwebhostingtalk.com
-
05-25-2004, 10:13 AM #6Junior Guru
- Join Date
- May 2003
- Location
- Veles, Macedonia
- Posts
- 241
toonz, i see your problem - you have text in the iframe right? and then it reformats depending on the no. of characters, line feeds, blanks and so on - automaticly.
So your problem is not how to change the height of the iframe but how to measure in pixels how toll the text will be so you could pass this value either via server-side or client-side scripting (i.e. php or js).
It's an interesting problem but i guess someone has already solved it. I will try searching a little bit and I hope that some of the more experienced members will spare some thoughts with us. If I come up with something I'll get back.
-
05-25-2004, 11:04 AM #7Web Hosting Master
- Join Date
- Jul 2003
- Location
- Kuwait
- Posts
- 5,104
You have two approaches. The css way (which may or may not work on all browsers due to browser quirks).
Code:<style type="text/css" media="screen"> iframe {height:expression(frames("myframe").document.body.scrollHeight); </style> <iframe id="myframe" name="myframe">
And the rather interesting way, which really doesn't use an iframe. What you do is create a div and put the iframe inside that div tag. Then, when the page is loaded in the iframe, you replace the entire iframe tag with the contents of the page.
Sounds a bit weird, but it works
Code:function autoResize() { var dest = document.getElementById('container'); var source = window.frames[0].document.body.innerHTML; dest.innerHTML = source } <div id="container"> <iframe onload="autoResize();" src="foo.html" frameborder="no" width="555px" scrolling="no"> </div>
-
05-25-2004, 12:16 PM #8Web Hosting Evangelist
- Join Date
- Jul 2003
- Posts
- 461
Both doesnt work....anyone wanna help me take a look at it ? Will pay an appreciation fee if anyone get it working for me....
Shawn Ho
Singapore Web Hosting Talk - http://www.sgwebhostingtalk.com
Singapore Soccer - http://www.singaporesoccer.com
EMAIL - shawnho@sgwebhostingtalk.com
-
05-27-2004, 03:42 AM #9Disabled
- Join Date
- Jan 2004
- Posts
- 22
height="100%" width="100%"
-
05-27-2004, 04:21 AM #10Web Hosting Master
- Join Date
- Dec 2003
- Location
- UK
- Posts
- 658
Sorry for the delay, but I had to dig about to find the example, I knew it was somewhere :-)
This was a bit of code I was working on, it may not be complete or even work properly, but should give you a start. I never finished it as the project was shelved.
function resize_image {
var objbb_logo = document.getElementById('bbll');
var objbb_background = document.getElementById('bb');
objbb_logo.height = (objbb_background.height);
};
with bbll being a graphic on the left and bb being the main body area. The idea was to ensure the graphic was correctly sized. This should be applicable to your IFRAME, but I've not tried it myself (too many of my projects to work on !)Alex Monaghan - Monaghan Consultants Ltd
Web hosting, ADSL, IT & Database consultancy
Custom Web hosting Linux/cPanel (UK or USA servers) or Windows/DotNetPanel (UK only). Reseller accounts also available
-
05-21-2006, 03:53 AM #11New Member
- Join Date
- May 2006
- Location
- Johannesburg
- Posts
- 1
- Thanks to fyrestrtr for pointing me in the right direction -
Regarding IFRAMES and getting the Height to dynamically increase. I managed to do this by doing the following:
STEP 1
Create a css stylesheet or insert the following into your css stylesheet:
Code:.iframe {height:expression(frames("myframe").document.body.scrollHeight);}
On the page where you want to display the IFRAME, insert the following:
Code:<iframe id="myframe" src="mypage.php" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="530" height="500" class="iframe"></iframe>
This method can be used for any content/page you want to display in an IFRAME and have the height dynamically resized accordingly.
To see a live example of where I use this method, go to nathealth.za.net under the Recommended Links Section where I am displaying a reciprocal link directory. (linkstationpro)
I'll be honest, I have only tested it on IE, so Firefox and Opera may or may not be displaying it correctly. Anyone using those browsers, I'd love some feedback.
I hope this helps someone though!
Best Regards
-
06-01-2006, 07:01 PM #12New Member
- Join Date
- Jun 2006
- Posts
- 1
Thanks, IamHeSaid, I have been struggling to solve this problem for two days, and even tried some of the other solutions on this page, and still couldn't get it to work. This worked great and this is such a simple solution!
But here is my problem: I created the first iframe on the page, and it worked perfectly. But then when I created the second iframe on the same page, it got confused (must be the duplicate frame name) and used the length for the second iframe to both Iframes. Because the first inserted page was longer than the second, the content got truncated and supplied with a iframe scrollbar.
So do any of you have any idea how to expand this solution to multiple iframes on the same page?
Thx,
Q