tree view navigation - results of content on the right.

External Since: Nov 04, 2005 Posts: 10

I would like to have a tree view navigation on the left border of a
page where when a user clicks on a topic, it expands and shows the
content within the topic. Then if someone clicks the underlying topic,
it will appear on the right (middle of the screen) -- at the same time
keeping the tree view to the left.

This would be helpful with such things as navigating through a
handbook.

I have tried working with DHTML's and can get a tree view, but do not
know how to get it to be on the left side and never move, while the
contents display on the right.

Any ideas?

Thank you!

External Since: May 18, 2007 Posts: 328

One thought is to use an absolutely positioned <iframe>

Here is a quick example modified from my site where the iframe contains a
news page

You would need to replace the button with the drop down menu whose entries
are
onclick = ''topic1.html" etc

You may also need to adjust the position of #News.

<html>
<head>
<style type="text/css">
body {margin: 0;}
#News {position: absolute; left: 20%;
height: 100%; width: 80%;
display: none;
background : red}
</style>
<script type="text/javascript">
function loadIframe(sPath) {
var x = document.getElementById("News")
if (x.style.display != 'block') {
x.src = sPath
x.style.display = 'block'
}
else
x.style.display = 'none'
}
</script>
</head>

<body>
<button onclick="loadIframe('news.html')" title="Open/Close">
Open/Close</button>
<iframe id="News"></iframe>
</body>
</html>
--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

<annettem RemoveThis @co.saint-croix.wi.us> wrote in message
news:45bee5fe-9ca4-4678-9072-21b5e647b996@34g2000hsh.googlegroups.com...
>I would like to have a tree view navigation on the left border of a
> page where when a user clicks on a topic, it expands and shows the
> content within the topic. Then if someone clicks the underlying topic,
> it will appear on the right (middle of the screen) -- at the same time
> keeping the tree view to the left.
>
> This would be helpful with such things as navigating through a
> handbook.
>
> I have tried working with DHTML's and can get a tree view, but do not
> know how to get it to be on the left side and never move, while the
> contents display on the right.
>
> Any ideas?
>
> Thank you!