Using Overflow as a replacement for i-frame?

**jag5311** · Sep 23, 2004 07:56

I am curious about something and I need some recommendations as my best route to take

I need to have a list on the right side of the page that is scrollable and it will be a long list of 50 names that are linked. I would set this div to have overflow: auto

Then on the right side of the page (or content section) will be another scollable pane where the results of whatever is clicked on the left will show up.

Naturally, this screams out I-frame. But I am not sure if I can set that to overflow: auto also and then have the results from the link clicked show up in there or not.

Thoughts?

Thanks

**Paul O'B** · Sep 23, 2004 08:03

Hi,

I very rarely use iframes but I did have this bit of code lying around that someone gave me

Try it out it might be what you want.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
iframe {border:1px solid #fff;padding:0;margin:0;overflow:auto}
</style>
</head>
<body>
<script type='text/javascript'>
function changePage(url) {
document.getElementById('iframe').src = url;
}
</script>
<iframe id='iframe' borders="none" src="iframesrc.htm"></iframe>
<a href='#' onclick="changePage('test1.htm')">Test 1</a>
<a href='#' onclick="changePage('test2.htm')">Test 2</a>
</body>
</html>

Paul

Edit:

You'll probably need to tidy the js up for browsers that don't understand element by id etc.

**vgarcia** · Sep 23, 2004 08:56

I'd also make the links go to the right page anyway, and have the onclick handler of the link set the page in the iframe. This way users will still be able to get to the info with JS disabled. Example:

HTML Code:

<!--use all the code Paul provided, but change the links to look more like this-->
<a href='test2.htm' onclick="changePage(this.href); return false;">Test 2</a>

**Paul O'B** · Sep 23, 2004 09:01

Good thinking Vinnie

User Tag List

Thread: Using Overflow as a replacement for i-frame?

Thread Tools

Display

Using Overflow as a replacement for i-frame?

Bookmarks

Bookmarks

Posting Permissions