Link in left nav div targets content in right div

What’s the best way to use links in a left div to change the content in a right div on the same page? I saw another post with a similar question and the solution given was iframes but it seems like I’ve read that those aren’t always the best - can’t remember why. I think there are probably JavaScript/Ajax solutions, too. Would love to hear your thoughts about how you’d do this.

Here’s the 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>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Clients/Sessions/Payments</title>
	<link rel="stylesheet" type="text/css" href="_styles/default.css" />
	<!--[if IE ]>
	<link rel="stylesheet" type="text/css" href="_styles/ie.css" />
	<![endif]-->
	<!--[if lt IE 7]>
	<script defer type="text/javascript" src="_scripts/pngfix.js"></script>
	<![endif]-->
	<script type="text/javascript" src="_scripts/myScripts.js"></script>	
	<link rel="shortcut icon" href="../favicon.ico" />
</head>
<body>
	<div id="mainContainer">
		<div id="header">
			<img src="_images/logo.gif" alt="Doc Types" title="Doc Types"/>
		</div>
					
		<div id="contentContainer">			

			<div id="leftContent">
					<ul id="leftNav">
						<li class="leftNavItem">
							 <a href="clients/_active.tpl.php">Active Clients</a>
						</li>				
						<li class="leftNavItem">
							 <a href="clients/_inactive.tpl.php">Inactive Clients</a>
						</li>	
					</ul>
			</div>
			
			<div id="rightContent">
				This is where the content needs to change out depending on which link in "leftContent" is clicked.
			</div>
			
		</div> <!-- end contentContainer -->
	</div> <!-- end mainContainer -->
<div id="footer"><p>Copyright © 2008 by DocTypes, LLC. All Rights Reserved.</p></div>
</body>
</html>


Definitely not iframes. The only other way, really, is Javascript. Ideally one could be able to use the :target pseudo-class and just use CSS but that’s not viable at the moment.

Unless the content of each div is more than a couple of kB, then I would just switch between display states of block and none. Otherwise I would pull the content from the server (XHR).

In either case the navigation links should point to the ID of each div (#div1, #div2, etc.). In this way, you cater for the “JS off” situation.

BTW, instead of <div id="header"> shouldn’t you just use <h1>?

Add my vote for either switching display states or pointing to div IDs. Pseudo-classes aren’t supported well enough at this point.

Thank you so much and yes. I’m still learning but that’s exactly the way it should be. I’ll change it.

The content will be drawn from a DB and in some cases will definitely be more than 2KB. Still use XHR? And if so, can you give me a link so I can learn what I need to know about that? I’m cluess about XHR except that I know it pertains to Ajax. I think. ; )

Ajax is just a fancy name for XMLHttpRequest + JavaScript. If you don’t know anything about it, start here. If you can’t be bothered and you’re only going to have, say, three DIVs with 3kB of markup each, then you might as well just use simple display toggling.

Ok, thanks for the help. Most appreciated.

I’m back. I thought I knew what you meant and then when I thought about it, I wasn’t sure. I’ve been using this function:


function showHide(elementID, show)
{
	var el = document.getElementById(elementID);

	if(show)
	{
		el.style.display = '';
	}
	else
	{
		el.style.display = 'none';
	}

	return false;
}

Then I call it like this:


<a href="#" onclick="javascript:showHide('activeClient', 1); ">Active Clients</a>

Is that what you mean or is there a better way to do that?

I’ve been playing with this and although what I came up with works, I have a strong suspicion it’s far from being best practices. My way uses both inline styles and inline JavaScript and I know that there are reasons against using both. If it matters, this is for an application that people will have to subscribe to and one of the requirements for using the app will be that they have JavaScript enabled.

Using the function in the previous post, here’s the code I came up with for the left nav:


<ul id="leftNav">
	<li class="leftNavItem">
		<a href="#" onclick="javascript:showHide('active', 1); showHide('activeStatic', 1); showHide('activeLink', 0); showHide('inactive', 0); showHide('inactiveStatic', 0); showHide('inactiveLink', 1);" id="activeLink" style="display:none;">Active Clients</a>
		<span id="activeStatic">Active Clients</span>
	</li>
				
	<li class="leftNavItem">
		<a href="#" onclick="javascript:showHide('inactive', 1); showHide('inactiveStatic', 1); showHide('inactiveLink', 0); showHide('active', 0); showHide('activeStatic', 0); showHide('activeLink', 1);" id="inactiveLink">Inactive Clients</a>
		<span id="inactiveStatic" style="display:none;">Inactive Clients</span>
	</li>	
</ul>

And here’s the right column for the content:


<div id="rightContent">
	<div id="active">Text from DB for active clients blah blah</div>
	<div id="inactive" style="display:none;">Text from DB for inactive clients blah blah</div>
</div>

Are there better ways to do this? What are they? And is this way absolutely gosh awful?

The way I would do it is to make it totally accessable.
Rather than just killing the link

href=“#”

You put the content that would load in the div, on the right on another page. You referance that page in the href. If JavaScript is disabled the indivdual page would load with the content in seperatly.

Does that make sense?

Then use unobtrusive JavaScript to stop the link sending and bring the content in via AJAX if JavaScript is accessable.

Jaza

I don’t know how to use unobtrusive js to target a different div. However, even though in general, I agree that unobtrusive js is the way to go, it won’t be as essential in this app because of having a limited audience who will be required to have JavaScript enabled. Also, the search engine issues aren’t a concern because the information kept in the app will be confidential so we’re going to do all we can to make sure search engines DON’T find it.

What I’m thinking, though, is that I may have misunderstood what 2 previous posters meant when they talked of changing display states from block to none. That’s what I was trying to achieve with my function but when I actually wrote out everything I needed to make it work, it seemed so unwieldy that I thought I may have misunderstood what y’all meant. Am I on the right track or totally off course?

Well if it works it works.
I personally would do it via unobtrusive JavaScript.

But you could just make a function that took the div to show and bring it in via onclick.

So something like


function change(id){
var a=document.getElementById(id);
if(a.style.display=="none"){
a.style.display="";
}
else{
a.style.display="none";
}
}

And then bring it in via
onclick=“change(‘idYouWantToChange’);return false”

What that does is gets the id you specify in the change function,
test it’s style property. If it is set to none it’ll set it to nothing, meaning it would become visible. If it’s display property equals empty or not set it sets it to none, so hidden.

If you would want it to hide the other divs you would need to loop through them and change the style of any other divs that are visible to none.

That would make your code more manageable if that is your concern.

But if it works it works.

Also place this in the head of the page for the search engines -

<meta name=“robots” content=“nofollow,noindex” />

That will stop the search engines indexing and following the links on the page.

Jaza