Improve company productivity with a Business Account.Sign Up

x
?
Solved

Active psuedo-class doesn't work in this instance

Posted on 2010-09-19
9
Medium Priority
?
322 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
ID: 33714000
did you tried calling that method from body onload event as i suggested?
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
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:Gurvinder Pal Singh
ID: 33714474
Please share with me if you have a link where i can see your problem.
0
 
LVL 46

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 46

Accepted Solution

by:
Chris Stanyon earned 2000 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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

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.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

580 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