• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 318
  • Last Modified:

Active psuedo-class doesn't work in this instance

I have a java script that normally works with css to mark a menu item as active when used with an SSI, it isn't working with this page for some reason.

Any idea why it doesn't work in this instance?
CSS 
a.home { 
	background-image: url(../images/home.png); 
	display: block; 
	height: 60px; 
	width: 128px; 
	outline: none;
	margin: 0 auto;
	position: absolute;
	left: 25px;
	top: 331px;
	z-index: 1;
} 
a.home:hover {	background-position: -128px 0; } 
a.home:active {	background-position: -128px 0; } 

java script in include
<script type="text/javascript"> 
function setActiveTab( id ) { 
document.getElementById( id ).className = "here"; 
} 
</script> 

java script on page
<script type="text/javascript"> 
// Something like this would be on each page after the include... 
setActiveTab( "home"); 
</script>

HTML
<a href="#"  class="home" id="home">

Open in new window

0
Bob Stone
Asked:
Bob Stone
  • 4
  • 3
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
what does "here" class do?

you need to call setActiveTab() method after the document is loaded,
so call it at the body onload event
<body onload="setActiveTab( 'home')">
0
 
Bob StoneIT GuruAuthor Commented:
It just sets the active to the proper id from the second part.

The document is in 3 parts, the header, body and footer. Header and footer stay the same, body changes and it calls the header and footer in the server side include.  Header has the first bit of js script and the body has the second.
0
 
Gurvinder Pal SinghCommented:
did you tried calling that method from body onload event as i suggested?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Bob StoneIT GuruAuthor Commented:
Setting it as active isn't the problem, when it is set I don't get an image at all.
0
 
Gurvinder Pal SinghCommented:
Please share with me if you have a link where i can see your problem.
0
 
Chris StanyonCommented:
When your page loads your anchor tag looks like this

<a href="#"  class="home" id="home">

Once you've called setActiveTab("home"), your anchor looks like this

<a href="#"  class="here" id="home">

The class is no longer 'home' - it's 'here', so your CSS rules won't apply. They only apply to an anchor with a class of 'home'





0
 
Bob StoneIT GuruAuthor Commented:
OK, that makes sense. I tried changing the CSS to use id instead of class for the image part which doesn't break when the script sets active, now it does nothing.  
CSS
a#home { 
	background-image: url(../images/home.png); 
	display: block; 
	height: 60px; 
	width: 128px; 
	outline: none;
	margin: 0 auto;
	position: absolute;
	left: 25px;
	top: 331px;
	z-index: 1;
} 
a#home:hover {background-position: -128px 0; } 
a#home:active {background-position: -128px 0; }

HTML 
<a href="index.shtml"  id="home">

Open in new window

0
 
Chris StanyonCommented:
OK. I think there may be some confusion here over the pseudo class of active and making a navigation item seem Active, i.e hilighted when you're on that page.

The active pseudo class only applies when you click on a link. It's not persistent. Once the link is no longer selected, the active pseudo class doesn't apply.

To make a navigation item seem active (selected) to indicate the page your on, you usually add a class to the item.

Change your Javascript so that it adds a class to the relevant link. Call it something different to 'active' to prevent confusion.

And then change your CSS to include a rule for the selected state.









//JS
<script type="text/javascript"> 
function setActiveTab( id ) { 
     document.getElementById( id ).className = "selectedPage"; 
} 
</script> 

//CSS
a#home.selectedPage {background-position: -128px 0; }

Open in new window

0
 
Bob StoneIT GuruAuthor Commented:
That worked.

Thanks =o)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now