Solved

Active psuedo-class doesn't work in this instance

Posted on 2010-09-19
9
306 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
Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

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

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 43

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

ScreenConnect 6.0 Free Trial

Discover new time-saving features in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Converting dates in JavaScript 2 35
how can i Return this word's max repeat count? 2 19
Box Locations 6 16
Diminish Pop-up  in 3 seconds 7 21
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 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