How Do I?

**knate5000** · July 11, 2008

What I'm looking to do is have a menu on the bottom left of a page and when you click an option it changes the content in the right 'pane'. Could you tell me what the code is called or point me in the direct (iframe?)

See the attached picture for more of a reference of what I'm talking about. Thanks!

**TCH-Bruce** · July 11, 2008

Sounds like you are wanting to do frames. Name your frame and add this to your link target="framename"

**Bob Crabb** · July 12, 2008

You could certainly use frames to do what you are wanting to accomplish, but a page with frames is not very search engine friendly.

There are a few other alternatives.

You could use PHP in a variety of ways to put variable content in the box. One way would be to put a function call in the box and code a function with a switch that would get the file contents of a variety of html files, depending upon the case set in a get variable in the menu link.

You could use AJAX, to which I am a total noob, and can't be of any help.

Or, you could code all the content into the page, in hidden elements, and use javascript to toggle the visibility of the element. I've done that before using some code that I had found, so I dug up the javascript and used it in this example. If you decide to use that method, here is an example from which you can use as much of the code that might apply to what you are wanting to do.

><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Toggle test page</title>
<style type="text/css">
<!--
body {
background-color: #000000;
color: #E5E5E5;
}
.wrapper {
width: 750px;
height: 500px;
margin: 0 auto;
}
.half_wide {
width: 50%;
height: 100%;
float: left;
}
.menu {
text-align: center;
}
.menu a, .menu a:visited {
color: #E5E5E5;
text-decoration: none;
}
.menu a:active, .menu a:hover{
color: #FFFFDD;
text-decoration: none;
}
.menu a:hover {
text-decoration: underline;
}
.content_demo {
font-size: 1.5em;
font-weight: bold;
}
#div1, #div2, #div3, #div4 {
position: absolute;
top: 10px;
padding: 7px;
visibility: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function toggleDiv(id,flagit) {
if (flagit=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (flagit=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
//-->
</script>

</head>
<body>
<div class="wrapper">
<div class="half_wide">
	<div style="height: 92%">
	</div>
	<div class="menu">
	<a href="#" onclick="toggleDiv('div1',1)" onblur="toggleDiv('div1',0)">HOME</a> | <a href="#" onclick="toggleDiv('div2',1)" onblur="toggleDiv('div2',0)">ABOUT</a> | <a href="#" onclick="toggleDiv('div3',1)" onblur="toggleDiv('div3',0)">PORTFOLIO</a> | <a href="#" onclick="toggleDiv('div4',1)" onblur="toggleDiv('div4',0)">CONTACT</a>
	</div>
</div>
<div class="half_wide">
	<div style="border: 1px solid #E5E5E5; height: 100%;">
		<div id="div1">
			<div class="content_demo">
			this is the "home" content
			</div>
		</div>
		<div id="div2">
			<div class="content_demo">
			this is the "about" content
			</div>
		</div>
		<div id="div3">
			<div class="content_demo">
			this is the "portfolio" content
			</div>
		</div>
		<div id="div4">
			<div class="content_demo">
			this is the "contact" content
			</div>
		</div>
	</div>
</div>
<br style="clear: both" />
</div>
</body>
</html>

**OJB** · July 12, 2008

I would personally do it with PHP and dynamically change what appears in the right pane as Bob Crabb said

Sign In

How Do I?

Recommended Posts

knate5000

TCH-Bruce

Bob Crabb

OJB

Join the conversation

Hosting