Table Visibilty and Placement 1

mawilliams · Jul 26, 2004

Hi,

I'm pretty pants at Javascript, so you may have to bear with me if I ask dumb questions.

What I'm trying to do is create a nav bar, that when you click on a link it changes the content on the right hand side. But I don't want to use frames. Is there a way to create on one page a number of tables that contain pictures and text and then show and hide them when a particular button is pressed? I have seen many examples of the Show/Hide, but they don't show up in the same place. I need the new table to replace the old table when the link is clicked, so it looks like you've gone to a different page.

Hope that makes sense. Cheers.

BabyJeffy · Jul 26, 2004

Here is a simple html "test harness" you can use to see how you might approach this task. It uses some simple javascript and CSS to do exactly what you want (cross browser and cross platform).

Code:

<html>
<head>
<title>Test harness</title>

<script type="text/javascript">
function showData(myData)
{
 document.getElementById('page1').style.display = 'none';
 document.getElementById('page2').style.display = 'none';
 document.getElementById('page3').style.display = 'none';
 document.getElementById(myData).style.display = 'block';
}
</script>

<style type="text/css">
#pageData {position:absolute;top:50px;left:180px;}
.invisible {display:none;}
</style>

</head>
<body>
<br /><a href="javascript:showData('page1');">Show page one</a>
<br /><a href="javascript:showData('page2');">Show page two</a>
<br /><a href="javascript:showData('page3');">Show page three</a>

<div id="pageData">
<div id="page1">
This is whatever you want for page one.
</div>
<div id="page2" class="invisible">
This is whatever you want for page two.
</div>
<div id="page3" class="invisible">
This is whatever you want for page three.
</div>
</div>

</body>
</html>

Notice that I have left the class="invisible" off the div of id="page1". This acts to show the "first page" of data initially when the page loads. You could easily add the invisible class to that div as well if you didn't want to show any "default" data.

Hope this helps you get under way,
Jeff

mawilliams · Jul 27, 2004

Thanks Babyjeffy, you've been a great help. That's just what I was looking for.

Many thanks again.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Table Visibilty and Placement 1

mawilliams

Technical User

BabyJeffy

Programmer

mawilliams

Technical User

Similar threads

Part and Inventory Search

Sponsor