PowWeb Forums - The Perfect Community for the Perfect Host  

Register now to interact with over 11,000 members! Registered users have Posting Privileges, free access to Private Messaging, Email Notifications and more.

Go Back   PowWeb Community Forums > Web Site Design > HTML/CSS/Javascript
User Name
Password
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
Old 4-19-12, 08:33 PM   #1
VooDooChicken
 
Join Date: Feb 2008
Location: Colombia
Posts: 127
Reputation: 32
resizing iframe from iframe content

hi, i want to display some contents, and below each content is an iframe; initially the iframe shows a summary of the content rating, but once i click on the iframe, it should expand to display the ratings in more detail. this 'detail list' is arbitray in lenght, so i want that when the user clicks on it, it will resize to fit the entire list, how do i resize an iframe from the page displayed inside it? (i want to resize the lenght, not the width, which must remain the same)

tnx
VooDooChicken is offline   Reply With Quote
Old 4-20-12, 02:23 AM   #2
rainbore
Rick
 
Join Date: May 2002
Location: Minneapolis, MN
Posts: 1,721
Reputation: 280
I believe it may be technically possible to dynamically resize an <iframe> with JavaScript if the content being displayed is all coming from the same domain. But it's an area where I don't have enough experience to give you particulars and I don't have time just now to experiment to find out. I just know enough to expect that if it is possible, it might not be simple or elegant.

My first instinct is that you will need to check that the document has fully loaded, which might be very difficult to determine. But if all goes well, then do some calculations based on the result of getComputedStyle on the style.height of the <iframe> document's <body> tag. Much of this will probably best be done with JavaScript embedded in the <iframe>d document, and then you'll pass the result back to the JavaScript in the parent document that will update the <iframe>.style.height.

If you run into roadblocks with the <iframe> method, my advice would be to load the dynamic content into a <div> with AJAX. I think this will be much easier, with far less potential for JavaScript security issues, and provide better results. Although here, too, it will be much easier if you have total control over the dynamic content. Good luck!
__________________
Rick Trethewey
rainbore is offline   Reply With Quote
Old 4-20-12, 11:23 AM   #3
VooDooChicken
 
Join Date: Feb 2008
Location: Colombia
Posts: 127
Reputation: 32
hmm.. i can not have the content preloaded, since the ratings are in one table, and the content in other, i would have to make a request for each list of ratings (which means number of requests = 1+number of contents, for the ratings of each one), which is what i am trying to avoid, so that's why i made the ratings only available on demand, as a separate request. you may be right about ajax, but i don't know ajax yet which means i have to start from zero for this particular thing, and that was another thing i was trying to avoid.. well, the sooner the better
VooDooChicken is offline   Reply With Quote
Old 4-20-12, 04:47 PM   #4
VooDooChicken
 
Join Date: Feb 2008
Location: Colombia
Posts: 127
Reputation: 32
just checked the ajax thing.. that wasn't so hard (luckily). tnx
VooDooChicken is offline   Reply With Quote
Old 4-27-12, 05:04 PM   #5
VooDooChicken
 
Join Date: Feb 2008
Location: Colombia
Posts: 127
Reputation: 32
hi, this is not a 'how do i'.. but instead a 'why does this happen'

i was checking the ajax thing, i plan to set there the summary of the ratings for that content, and when the user clicks on the summary, it will load and display the ratings in all detail. inside the div, as a first conent, i place a table with an 'onclick' event (related to the table inside the div, not the div itself, so when the table is gone after being replaced, the event handle is gone as well). as a test i was trying to load not dynamic content, but one of my pages with static content. i was clicking and changing and doing stuff but the page did not load inside the div.. i was expecting the page to load inside the div like it was an iframe, never happened. so i changed that for a simple php, which would display whatever it was that i passed as parameters to it, and it worked. i believe the difference is not because one ended in html and the other in php, or that i was using 'post' method. i can post or get to an html whatever i want, the only difference is that the html will do nothing with it. why did it not load the html inside the div? is it because of the html headers? i was expecting the div to act like an iframe for that case, and i spend quite a while believing i was doing the ajax thing wrong.. what are the requisites for a content to appear inside a div after an ajax call?

tnx
VooDooChicken is offline   Reply With Quote
Old 4-27-12, 09:13 PM   #6
rainbore
Rick
 
Join Date: May 2002
Location: Minneapolis, MN
Posts: 1,721
Reputation: 280
No, a <div> will not behave like an <iframe> and the HTML <head> data is why. The <div> is a part of the existing page, with its own stylesheet and other settings. So while you can insert an entire HTML page into a <div> with JavaScript, you end up with a malformed HTML page that browsers will not render reliably. That's why you need to use an <iframe> for this purpose. <iframe>s are intended to accept complete HTML documents and render them independent of the settings in the parent HTML document.
__________________
Rick Trethewey
rainbore is offline   Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT -4. The time now is 09:28 AM.


Contents ©PowWeb, Inc. ~ vBulletin, Copyright 2000-2007 Jelsoft Enterprises Limited.