Jump to content
Sign in to follow this  
knate5000

How Do I?

Recommended Posts

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!

 

 

post-8381-1215791775_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...