Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="_styles/default.css" />
<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="_styles/ie.css" />
<!--[if lt IE 7]>
<link rel="shortcut icon" href="../favicon.ico" />
<img src="_images/logo.gif" alt="Doc Types" title="Doc Types"/>
<a href="clients/_active.tpl.php">Active Clients</a>
<a href="clients/_inactive.tpl.php">Inactive Clients</a>
This is where the content needs to change out depending on which link in "leftContent" is clicked.
</div> <!-- end contentContainer -->
</div> <!-- end mainContainer -->
<div id="footer"><p>Copyright © 2008 by DocTypes, LLC. All Rights Reserved.</p></div>
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
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. ; )
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);
el.style.display = '';
el.style.display = 'none';
Then I call it like this:
Is that what you mean or is there a better way to do that?
Using the function in the previous post, here's the code I came up with for the left nav:
<span id="activeStatic">Active Clients</span>
<span id="inactiveStatic" style="display:none;">Inactive Clients</span>
And here's the right column for the content:
<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>
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
Does that make sense?
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.
But you could just make a function that took the div to show and bring it in via onclick.
So something like
And then bring it in via
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.
This topic is now closed. New replies are no longer allowed.