SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    HTML 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>

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>?

  3. #3
    SitePoint Enthusiast Mongoose.wa's Avatar
    Join Date
    Feb 2008
    Location
    Seattle, WA
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add my vote for either switching display states or pointing to div IDs. Pseudo-classes aren't supported well enough at this point.

  4. #4
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    BTW, instead of <div id="header"> shouldn't you just use <h1>?
    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. ; )

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, thanks for the help. Most appreciated.

  7. #7
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    simple display toggling.
    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:

    Code:
    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:

    HTML Code:
    <a href="#" onclick="javascript:showHide('activeClient', 1); ">Active Clients</a>
    Is that what you mean or is there a better way to do that?

  8. #8
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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:

    HTML Code:
    <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?

  9. #9
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Last edited by jazajay; Mar 17, 2008 at 01:19. Reason: Odd word here and there

  10. #10
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    PHP Code:
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •