?
Solved

dynamic Iframe height (or Div) no scripting

Posted on 2005-03-14
18
Medium Priority
?
2,669 Views
Last Modified: 2012-06-22
Iframe's don't seem to be able to resize to the height of a document going into it.

On a big site, MANY pages of varying lengths may load into an Iframe, each of which must be findable by search engines, meaning "clean" links --  www.site.com/content/2014a.html

So a simple link seems necessary -- <A href="2014a.html" target="main">
<IFRAME name="main" width="400" height="[dynamic]"></IFRAME>

With dynamic = 100%, and with the enclosing html "height=100%" it doesn't work.  When a pixel height is stated, the Iframe can't resize the fit the text, and scrollers are not an option.
 
Using DIVs instead, makes the property inheritance easy -- no special <BODY bgcolor=...> to set the Iframe color, and so forth.  It's important for the many "loaded" pages to be as simple as possible.

Loading into a DIV, however, seems not to work without dynamic scripting, and of course, all this could be done with JS -- but then the links aren't found by S.E.s.  Also the master site has much HTML layout already, and I don't think it could all be recast in CSS layout, without causing other issues.

You understand the problem, the need for clean links, but a global class inheritance for the Iframe or DIV, and the need to load without scripting.  I need to get as many different workable ideas as possible toward a solution.   Thanks.
0
Comment
Question by:sciwriter
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
  • 4
  • +1
18 Comments
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1400 total points
ID: 13539719
Indeed,  iframes don't resize to the height of a document going into it.
You can always set a huge height to your iframe (using "em" units is better).  But that's not very elegant.
Are the pages you need to load inside your iframe on the same domain as your container page?
If that's the case, you can use a javascript in all your content pages that gets a reference to your parent frame. With that reference, you can access the iframe object and modify its height.
I have never done it myself but I have heard it's the only solution to modify an iframe's height based on the size of the page it contains.
0
 
LVL 23

Author Comment

by:sciwriter
ID: 13539895
<< Are the pages you need to load inside your iframe on the same domain>>
Yes, all.
 
<<can use a javascript>>
If you load the pages by JS, search engines won't find them easily.
I thought of using a JS routine to resize the frame (along with a normal link), but when you start talking of 100+ pages, that becomes a big job... the JS code tricky enough, but adding it to 100s of links.... !!

I also considered the long iframe too, but what that seems to require is essentially nothing on the page below the frame position -- i.e. put ALL info in the page above the iframes.  That is still an option.

These are great thoughts, GrandSchtroumpf, keep 'em coming if you have any more.  Much appreciated.

How do you feel about using DIVs instead of Iframes, and is this workable for a simple S.E. friendly link?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 600 total points
ID: 13540251
You don't need javascript for the links, just for teh dynamic re-sizing.  iframe is like any other element.  It can be resized anytime.

Cd&
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 23

Author Comment

by:sciwriter
ID: 13540347
Yes, now if there was a way to automatically spawn that JS routine, without having to hard code it into every link, that might be the ticket.

Cd& -- while you are here, please give some input on replacing the Iframes with DIVs -- this is a viable option, as I see it, keeping in mind the need for clean links for S.E.s -- any thoughts on what would be needed with a DIV setup?  I much prefer the class "inheritance" of DIVs to the class independence of Iframes, but ... well, you tell me...
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1400 total points
ID: 13540397
When i talk about javascript, i'm not talking about loading the page with javascript.  Just loading a page that contains some javascript code and executes a function when it loads.

> when you start talking of 100+ pages, that becomes a big job...
you just need a simple find/replace:

replace this:
</head>

with this:
<script type="text/javascript" src="default.js"></script>
</head>

Now all the code you add to the "default.js" file will be available on all your pages.
If you ever need additional global script, just add it to the file.
If you think that's too much work, you might want to consider moving to PHP or JSP, that requires a lot less maintenance.
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1400 total points
ID: 13540438
Using a div instead of an iframe won't help much and IE will require ActiveX for it to work.
I guess the easiest thing to do is to use a standard frameset then.
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1400 total points
ID: 13540457
Actually the best thing to do is to show your menu inside an iframe and put the iframe in each one of your 100 pages.  This way each content page has it's own url.  Also, since you know the size of your menu, setting the height of the iframe is not a problem anymore.  But it's a little more editing work...
0
 
LVL 23

Author Comment

by:sciwriter
ID: 13540481
<< consider moving to PHP or JSP >>

I did, and am back to HTML -- lot easier (and S.E. friendly) to put pages into an iframe than deal with PHP
:)

Iframes seem ideal, except for the non-resizability.  I've read that Google hates standard framesets.

Keep thinking on various ideas.  The input is great.  Points can ++.

This is a nut that has not been cracked, AFAIK ....
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 600 total points
ID: 13540518
Dynamically load divs are appropriate in only very narrow circumstances.  To reload just a layer, you not only need scripted links, but for IE you have to use activeX and that introduces security issues.

Certainly XMLHTTP from the client in robust and relatively reliable, but is is definitely not seo friendly.

It is actually not that difficult to do resizing without a lot of script.

On the the links in the main page you do:

<a href="somelink.html" target="someiframe" onclick="setTimeout('setSize()',3000);">


Then the script in the head of the main page:
<script type="text/javascript">
function setSize()
{
H=top.frames['someiframe'].document.body.offsetHeight;
W=top.frames['someiframe'].document.body.offsetWidth;
document.getElementById('someiframe').style.height=H+'px';
document.getElementById('someiframe').style.width=W+'px';
}
</script>


Assumptions:
strict doctype
iframe has both an id and a name attribute

You might have to tweak a bit by adding a few pixels, and of course there are timing issues.  If the server is slow responding the script will error out.

Cd&
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
GrandSchtroumpf earned 1400 total points
ID: 13540555
> I've read that Google hates standard framesets.
It's not that it hates standard framesets (as long as you code them correctly).
The problem is that Google indexes the content of the frameset.  So when you get your search results, you will only see the content and not the header nor the menu.  If you use an iframe the way you are currently using it, the result will be exactly the same.  That's why you need to put your menu inside the iframe and not the content.
0
 
LVL 23

Author Comment

by:sciwriter
ID: 13540586
Already the input warrants 500 points A PIECE to EACH of you -- and I still want more ideas than these, they are top-notch from both of you.  What to do, and still keep these ideas coming?  A new day brings new ideas, and I cannot stress enough how crucial this entire issue is to big sites with many pages ....

Perhaps revisit tomorrow with some new twists?  Cd& -- how to get you both max points and still more for more ideas?  

G.S. <<That's why you need to put your menu inside the iframe and not the content.>>
That's an interesting idea, I will have to think on that for a while, maybe overnight....
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13540623
>>>how to get you both max points

Not permitted under the rules.  I have a very strong advocate of the strict interpretation of the cap and I'm record favouring that it belowered.  

The points no longer represent what they once did, so just an ordinary split is fine.

Cd&
0
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 1400 total points
ID: 13540633
> This is a nut that has not been cracked, AFAIK ....
I have never cracked it myself... but i don't need to because i'm very happy with php.
I'm quite new to php though (I started last summer) but i could never go back to straight html.
What i did before is to write a simple java program that merges layout with content and generate the html files (like using includes in php).  It works great for small sites (like 100 pages).  And i could upload the files on my free tripod account that does not support php.  The only problem is that you need to regenerate and upload all the files when you change the layout.

Also i guess it does not need to be cracked, simply because it's not how iframes are supposed to be used (as stated in my previous post).  You should never navigate your site inside the iframe.
0
 
LVL 23

Author Comment

by:sciwriter
ID: 13541045
First, GrandSchtroumpf, I want to hear more of these ideas -- they are crucial to everyone hitting up against the limits of HTML -- will you join me in a continuation of this thread?  Your input, I feel, would be invaluable to everyone struggling with the same issue as me.  I will post a continuing link tomorrow.  Please consider jumping in that thread as we left off here, I want -- need -- to know more.

Second, CD& -- I know you oppose 500 points -- I was there, and you don't remember, but I do.  If you want to see the ultimate in 500 points awarded to trivial answers, just visit the JS thread, where I spent a lot of time and got a lot of points.  I would slog my guts out to help people, only to see others get 500 points for an answer that took only 1 line!!  It was so frustrating, I left that section for good.

Cobol, I was into computers about the same time as you, and I have to tell you, that philosophically, you cannot expect these young experts to have the same "principles" as you.  Things change, and we old timers need to adapt to the changes too.  You need to be "gracious" in accepting that this Q is a very important issue for big, interactive, quickly responsive site development, and allow yourself the leeway of max points for valuable input.  I want you to join me in the continuation of this thread too, NO arguments, either.  I know where you are coming from, but I'm telling you, you HAVE TO ADAPT!!

Thank you both for some stupendous ideas.  You have earned the points.  But this issue is a big one, and I want you to join me in the continuation of it, where we left off here -- NO arguments, please !!!

:)))))
0
 
LVL 23

Author Comment

by:sciwriter
ID: 13541093
BTW -- the EE system forced me to accept only one answer as the "accepted answer".  That is a failing you can correct, Cd&.  Both of you put in equally great ideas, it is unfair to have to choose one over the other :)
0
 
LVL 23

Author Comment

by:sciwriter
ID: 13547895
Please both join this new thread with your input -- GS, don't forget to explain the menu links in Iframe clearer.

Many thanks to you both --

http://www.experts-exchange.com/Web/Web_Languages/HTML/Q_21351836.html
0
 
LVL 9

Expert Comment

by:Sar1973
ID: 37629324
What if you get a "access denied" error?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 37630598
This is ancient history and the answer is no longer valid.


Cd&
0

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question