PDA

View Full Version : JavaScript & Current page Active State


fasterthanlight™
November 2nd, 2006, 10:51 AM
Greetings fellow human beings,

I am trying to find some code examples of how to apply an 'active state' to an unordered list item to reflect the current page the user is on.

In the past I have accomplished this using only CSS, I would give each <body> tag on each page a unique ID, and reference through that ID to the navigation item and apply the Active State styling that way.

However, for this project I am working on it is unfeasable to accomplish this task in the same way, and so, I am looking at JavaScript to do what I need.

I can't find any examples on Google because apparently Active State is a company and therefore, populates almost all of the search results.

I should also mention that the header where the <body> tag lies is a Perl include, and so, it is the same across the entire website. (Hence, why I can't use CSS and give each body tag its own ID).

Please, hook a brother up!!
duncanhall
November 2nd, 2006, 11:21 AM
Instead of giving each <body> tag a unique ID, why not just give it to the list item that you want active?

Eg, for a "portfolio" page:



<ul>
<li>Home</li>
<li>About</li>
<li class="active">Portfolio</li>
<li>Contact</li>
</ul>
simplistik
November 2nd, 2006, 11:30 AM
Instead of giving each <body> tag a unique ID, why not just give it to the list item that you want active?

Eg, for a "portfolio" page:



<ul>
<li>Home</li>
<li>About</li>
<li class="active">Portfolio</li>
<li>Contact</li>
</ul>

I told him that... he didn't listen :evil:
fasterthanlight™
November 2nd, 2006, 11:39 AM
Because, the navigation is consistent across the entire site as well! Its within the same header.html include!

Is there code out there that can fill in an ID depending on which page it is?
bwh2
November 2nd, 2006, 11:46 AM
I can't find any examples on Google because apparently Active State is a company and therefore, populates almost all of the search results.ActiveState is the bomb. but...: http://www.google.com/search?q=active+state+unordered+list+-site%3Aactivestate.com+-site%3Aactiveperl.com&btnG=Search



I should also mention that the header where the <body> tag lies is a Perl include, and so, it is the same across the entire website. (Hence, why I can't use CSS and give each body tag its own ID).can you modify the perl include?
fasterthanlight™
November 2nd, 2006, 11:48 AM
Modify in which way?
bwh2
November 2nd, 2006, 11:50 AM
so that perl can grab the URL and print out an unordered list like the one duncanhall posted.

also, why don't you just use a:active for the link. depending on how you have your link tags that may work.
fasterthanlight™
November 2nd, 2006, 11:54 AM
I shall talk to the programmer about it, would prefer not to go this route, as the perl function that handles this thing is used across many many many sites that are already up and running.
bwh2
November 2nd, 2006, 11:58 AM
I shall talk to the programmer about it, would prefer not to go this route, as the perl function that handles this thing is used across many many many sites that are already up and runningah yes. then you don't want to change that file. but you could do a double include. that is something like this:


- index.pl
- header.pl
- parseCurrNav.pl
- currNav.pl

currNav.pl would basically go through a simple parser in parseCurrNav.pl and would get an active thrown in. or something like this:


- index.pl
- parseHeader.pl
- header.pl
simplistik
November 2nd, 2006, 01:37 PM
ummm... you can do this... it not optimized cause it was just a quick throw together but you can get the point.


<?
$id = isset($_GET['id']) ? $_GET['id'] : "";

if ($id == "item2") {
$nav = "
<ul>
<li><a href='index.php'>Item 1</a></li>
<li class='active'><a href='?id=item2'>Item 2</a> - yay i'm active</li>
</ul>
";
} else {
$nav = "
<ul>
<li class='active'><a href='index.php'>Item 1</a> - yay i'm active</li>
<li><a href='?id=item2'>Item 2</a></li>
</ul>
";
}


?>

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Active State</title>
<style type="text/css" media="screen">
body { font: normal 80%/1.2em Arial, Helvetica, sans-serif; color: #333333; }
a { color: #330033; text-decoration: none; }
.active a { color: #0099FF; }

</style>
</head>

<body>
<? echo $nav ?>
</body>
</html>

all my navs and things that are consistant across a number of pages are always plopped in a included file, using classes in an actual object is no problem for them, you shouldn't need to give your body tag an ID, at least... not w/ that as an excuse :evil: