IFRAME instead of FRAME, to get left menu to scroll with page -- how to set size?

I'm using a simple set-up with a top frame (menu choices) and a bottom frame (contact info)
In between there's a main frame where all the action takes place.
These are static html pages only, no database or application.

The main page itself consists of a text area (most of the page) and some "quick links" on the left hand side.
The quick links more or less the same on all different main pages.
However, the links must scroll together with the main page text.


One solution would be to create a table, putting the quick links in the left column and the text in right (large) column.
But then I would need to include the quick links on all pages.

Instead of repeating the quick links on each and every main page (too much work when the links shall be updated), I was thinking of putting an IFRAME in the right (large) column.
The quick links would then just change the src attribute of the IFRAME.
In effect, it would be like having the quick links in a frame, but still have it scroll together with the main page.

Any input on this?
The only problem so far is that the IFRAME always needs a height.
I cannot get the IFRAME to resize to its contents. I don't have any problems determining a width, but the height must be depending on the content of it, as I do not know how much text there is to display.
I could of course set the IFRAME height to "large enough" but then it will start scrolling if the text doesn't fit. And, of course, the "main page" itself will also scroll with its own scroll-bar, if the IFRAME doesn't fit in the browser window.


Can I get an IFRAME to size to its content (at least the height)?

Otherwise, should I try to dynamically set the IFRAME to the exact pixel height of the main page -- thus, always relying on the scroll-bar in the IFRAME and never using the scroll-bar in the main page itself.
If so, does anyone have any javascript code samples for such a solution?

Thanks!
Stefan LennerbrantAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
If you use frames ANYWAY, why not have a left frame with the links?
0
Michel PlungjanIT ExpertCommented:
Like this
<html>
<head>
<script>
var banner = '<body bgcolor="red">Banner</body>'
var menu = '<body bgcolor="white"><a href="">Link</a><br><a href="">Link</a><br><a href="">Link</a><br><a href="">Link</a><br></body>'
var content = '<body bgcolor="blue">Content</body>'
var footer = '<body bgcolor="teal">Footer</body>'
</script>
</head>
<frameset rows="50,*,50">
  <frame name="banner" src="javascript:top.banner">
  <frameset cols="100,*">
    <frame name="menu" src="javascript:top.menu">
    <frame name="content" src="javascript:top.content">
  </frameset>    
  <frame name="footer" src="javascript:top.footer">
</frameset>  
 
  

Open in new window

0
Michel PlungjanIT ExpertCommented:
Without the borders:
<html>
<head>
<script>
var banner = '<body bgcolor="red">Banner</body>'
var menu = '<body bgcolor="white"><a href="">Link</a><br><a href="">Link</a><br><a href="">Link</a><br><a href="">Link</a><br></body>'
var content = '<body bgcolor="blue">Content</body>'
var footer = '<body bgcolor="teal">Footer</body>'
</script>
</head>
<frameset rows="50,*,50" frameborder="0" framespacing="0">
  <frame name="banner" src="javascript:top.banner">
  <frameset cols="100,*" frameborder="0"  framespacing="0">
    <frame name="menu" src="javascript:top.menu">
    <frame name="content" src="javascript:top.content">
  </frameset>    
  <frame name="footer" src="javascript:top.footer">
</frameset>  
 
  

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Stefan LennerbrantAuthor Commented:
No, this is not the solution. With your setup, the left area (menu) stays put if the main page text (content) scrolls.
The left area must scroll with the main area and it must not have a scroll-bar of its own.

(note that you must make the window really small to see this behaviour, alternatively add some more rows of text to the "content" frame)
0
Michel PlungjanIT ExpertCommented:
<html>
<head>
<script src="menu.js"></script>
</head>
<body onLoad="if (showMenu) showMenu()">
<table>
<tr valign="top"><td id="menuCell"></td><td id="content">Bla bla bla</td></tr>
</table>
</body>
</html>

and in menu.js have

// -- start
var menu = "";
menu +='<a href="">Link 1</a><br>';
menu +='<a href="">Link 2</a><br>';
menu +='<a href="">Link 3</a><br>';
menu +='<a href="">Link 4</a><br>';
menu +='<a href="">Link 5</a><br>';
function showMenu() {
  var menuCell = document.getElementById('menuCell');
  if (menuCell)  menuCell.innerHTML=menu;
}
// --- end of menu
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Stefan LennerbrantAuthor Commented:
A little complicated, but it seems to work very well.
Instead of onLoad (which may take a long time if there are images on the main page), I suppose I could simply insert a call to showMenu() at the end of the page (which is executed in parallell with image loading)
The only downside with this solution is that if the "quick links" contains a lot of html code, it'll be a lot of javascript (a little more difficult to administer for someone who isn't used to it)

Perhaps this is as good as using iframes?
Does anyone have an idea of an alternative solution, not using so very much javascript for creating the actual html code.
0
Michel PlungjanIT ExpertCommented:
You can call showMenu right after the html that renders the cell it goes into..

This is as good as it gets without some CMS server process...

the script can be made easier for the person who has to create it or you can put the menu in the iframe (now why did I not think of that before ;)
0
Computer101Commented:
Forced accept.

Computer101
EE Admin
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.