CSS invisible section on page - display content

This is actually best illustrated by my image (attached) but I need to divide the body of a page into two parts, let's say a 30/70 ratio.

The left part would have a drop down list that, when selected, would show the content of the corresponding drop down list.  So if you select "Content A" it would show all the content from "Content A" on the right side of the page.  

Then when you'd select "Content B", "Content A" would disappear and all the content from Contene B would appear and so on. This should illustrate what I typed above
freezillaAsked:
Who is Participating?
 
s8webCommented:
Here ya go, this should be what ya need. EE uploader won't allow .asp for whatever reason, so here's a link.

http://www.s8web.com/ee/freezilla.zip

Mind you, I don't have an asp box to test on due to my MS allergy. If you want to keep it static, you can, but you're in for a world of pain if it gets big because you will have to change each file (or find and replace.)

To make it static, remove the <!--#include file ="assets/inc/menu.inc.asp"--> on line 18 and paste the contents of menu.inc.asp in it's place. Then change .asp to .htm.

I would definitely do the server side include.




0
 
s8webCommented:
This code will hide the active page link in your nav.
<!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=utf-8" />
		<title>Hide Active Page Link in Nav</title>
		<style type="text/css">
		a.selected{display:none;}
		</style>
		<script type="text/javascript"
		src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript">
		$("a").live('click', function() {
		  $("a").removeClass("selected");
		  $(this).addClass("selected");
		  return false;
		});
		</script>
	</head>
	<body>


	</body>
</html>

Open in new window

0
 
s8webCommented:
Now on to the other part. What server technology are you using? (php, cfm, asp)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
freezillaAuthor Commented:
Currently it's all static, so HTML, but it's on a Windows box so I could use Classic ASP if need be.
0
 
s8webCommented:
You will want to set up your menu as an include and call it from each page. This way, all of your menu content is in one place. The css is pretty basic. I'll give an example in a min.

Take a look at http://www.w3schools.com/asp/asp_incfiles.asp for information about asp includes.

Your include will look something like <!--#include file ="yourfile.asp"-->
0
 
freezillaAuthor Commented:
Perfect.  Thank you!
0
 
s8webCommented:
My pleasure, but I just realized that the js is a bit buggy. Cut the contents of assets/js/add_class_to_active_href and replace with the snippet. This snippet came from http://www.jessenicola.com/blog/jquery-set-active-links-current-url
$(document).ready(function() {
   var pathname = window.location.pathname;
   var pathname = pathname.split('/');
   var tester = pathname[pathname.length-1];
   
   $('#leftdiv a').each(function(){
       var test = $(this).attr('href');
       if (test == tester){
           $(this).addClass('selected');
       }
   });
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.