CSS Sprite Current State Issues...

[drewpark88]

Hey Guys,

I have an image that has two images in one to create my sprite. I have a lighter version of the image on top and a darker version on bottom for the .hover state. I want the hover state (which works right now) to also be the "Current" state.

Any ideas on how to do this? Here's the code I use for my current nav bar just a normal and hover state:

<!-- Start Normal State-->
#navigation a.pools {
  background-position: 0 0;
  width: 201px;
}
<!--End Normal State-->

<!--Start Hover State-->
#navigation .highlight a.pools:hover,
#navigation a.pools .hover {
  background-position: 0 -77px;
  width: 202px;
}

<!--End Hover State-->

Thanks everyone, any help appreciated : )

[macneato]

I would just do something like this

#navigation .highlight a.pools:hover,
#navigation a.pools_active,
#navigation a.pools .hover {
  background-position: 0 -77px;
  width: 202px;
}

Then just add the class "pools_active" to your link when it is active. If that doesnt work, just make the selector more specific. eg.

div #navigation a.pools_active,

So your HTML will look like this when you want the link to be active

<a href="#" class="pools pools_active">example</a>

[drewpark88]

That helped alot macneato, although I am having a problem because I am using the Jquery tab function. Which means the page content does not refresh it is hidden and appears when the nav button is clicked on....so how would I know it is active? I have set that in javascript right? Not sure

- Drew

[macneato]

Could you post your js tab function? so i can take a look at it.

[drewpark88]

Yeah I posted more details about my problem along with the tab function here: http://www.daniweb.com/forums/thread294802.html

Thank you : )

[macneato]

Hi Drew,

Ok took a look at the jquery, so i see what the issue is, we gonna need a global active class. Naturally, the easiest way to do this, will be to add ALL your navigation items to one sprite. So all normal state items on the top and all active items on the bottom. Then just update our "active" to something like this

/* This example is assumming the height of all your menu items is 40px */
.active {
 background-position: 0 -40px;
}

Does that make any sense?

[drewpark88]

Well kinda, I see what you mean. My sprite is all one image. It is two images one on top (normal) and the other on bottom (hover). I just want to use the same positioning for the hover as my current (active) tab.

I see what you mean but still kinda new to this, so in my jquery tabs function I will change my active state to the same as the hover state.

So is there any javascript I need to change or just that css .active state?

Thank you a bunch : )

Hi Drew,

Ok took a look at the jquery, so i see what the issue is, we gonna need a global active class. Naturally, the easiest way to do this, will be to add ALL your navigation items to one sprite. So all normal state items on the top and all active items on the bottom. Then just update our "active" to something like this

/* This example is assumming the height of all your menu items is 40px */
.active {
 background-position: 0 -40px;
}

Does that make any sense?

[macneato]

Wait, you could try this though (havent tested it or anything, so bare with me.

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		var currentItem = $(this).attr('class')
		$(this).addClass(currentItem + "_active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});

This in theory, should work with the "pools_active" class we created earlier.

[drewpark88]

This makes sense, I saw something like this in the tabs documentation but wasn't sure if this would work. I will try this tomorrow morning and let you know the outcome. Thanks again for the help, greatly appreciated : )

[drewpark88]

I am still having issues, but I am probably implementing this wrong because I am still a noob. I will continue at it, thank you soooo much for all of your help : )