?
Solved

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

Posted on 2008-02-05
9
Medium Priority
?
1,144 Views
Last Modified: 2012-06-21
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!
0
Comment
Question by:Stefan Lennerbrant
  • 5
  • 2
8 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20823537
If you use frames ANYWAY, why not have a left frame with the links?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20823590
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20823629
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:Stefan Lennerbrant
ID: 20823674
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 20823847
<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
 

Author Comment

by:Stefan Lennerbrant
ID: 20824059
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20825950
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
 
LVL 1

Expert Comment

by:Computer101
ID: 21077454
Forced accept.

Computer101
EE Admin
0

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

601 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