Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Active psuedo-class doesn't work in this instance

Posted on 2010-09-19
9
Medium Priority
?
313 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: 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!

 
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 44

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 44

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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

715 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