Solved

Active psuedo-class doesn't work in this instance

Posted on 2010-09-19
9
304 Views
Last Modified: 2012-05-10
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
Comment
Question by:Bob Stone
  • 4
  • 3
  • 2
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33713863
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
 
LVL 9

Author Comment

by:Bob Stone
ID: 33713975
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714000
did you tried calling that method from body onload event as i suggested?
0
 
LVL 9

Author Comment

by:Bob Stone
ID: 33714273
Setting it as active isn't the problem, when it is set I don't get an image at all.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33714474
Please share with me if you have a link where i can see your problem.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
ID: 33716155
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
 
LVL 9

Author Comment

by:Bob Stone
ID: 33716351
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
 
LVL 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 33716490
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
 
LVL 9

Author Closing Comment

by:Bob Stone
ID: 33717724
That worked.

Thanks =o)
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now