you put typo version on page with missing bracket, my bad but I did try
to fix it. Throws erreor also in Firebug, if you open Firebug, paste
that JS right into console and click run, you can see the active class
get added when you do test click. Click another link, see the first
"active" disappear, new active added.
Erik R. Peterson wrote:
Wow..
this one is really kicking me!
http://www.enaturalskin.com/needhelp.htm
I placed the code and updated my CSS, but no go...
So far this is what I have:
CSS:
#cs_links
{width: 146px; float: left; margin:5px 0px 0px 25px}
#cs_links a:hover, .active {background-position: -146px;}
#cs_contact
{width: 146px; height: 34px; float: left;}
a.cs_contact {width: 146px; height: 34px;
background: url('/img/pages/cs_contact.png'); display:block}
#cs_appoint
{width: 146px; height: 34px; float: left; margin: 10px 0px 0px
0px}
a.cs_appoint {width: 146px; height: 34px;
background: url('/img/pages/cs_appoint.png'); display:block}�
JS:
<script type="text/_javascript_">
$(document).ready(function(){
$("#cs_links a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
return false;
});
HTML:
<div id="cs_links">
<div id="cs_contact">
<a id="js_contact" class="cs_contact"
href=""></a></div>
etc.....
On Jul 5, 2009, at 9:25 AM, Charlie wrote:
typo, left out a bracket
$("#cs_links a" ).click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
return false;
});
Charlie wrote:
>From what I see
all your image links do exact same shift of background image on hover
and active. You used a different class for each link to assign
indiividual background images, however you don't need to create a new
class for each link just to shift the background since they all shift
same amount. You can chain CSS similar to chaining jQuery also.
CSS:
#cs_links a:hover, .active {background-position: -146px;}
//this one rule will replace the 11 rules you are going to create ( one
for each link and one for active)
JS:
//inside document.ready
$("#cs_links a".click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
return false;
});
Erik R. Peterson wrote:
I went ahead and placed the script but still no success.
Could my CSS be an issue here?
Erik
On Jul 5, 2009, at 8:10 AM, waseem sabjee wrote:
ok.
replace your js with the following (all the js)
$(function() { // similar to $(document).read() {
var obj = $(".cs_links");
var items = $(".cs_contact", obj);
items.click(function(e) {
e.preventDefault();
var current = items.index($(this));
items.removelass("active");
items.eq(current).addClass("active");
});
});
you can call the above a test.
make sure the active class is being added correctly to the element
then try the rest of your scripts
the error you are getting is because you put te
$(function() {
});
within the
$(document).ready(function(){
});
you cant embed one in the other
you can choose to either use
$(document).ready(function(){
or
$(function() {
On Sun, Jul 5, 2009 at 1:27 PM, Erik
R. Peterson <eriks...@mac.com> wrote:
Still doesn't work.
I placed your script:
var obj = $(".cs_links");
var items = $(".cs_contact", obj);
$(".cs_contact").click(function() {
var current = items.index($(this));
items.removeClass("active");
items.eq(current).addClass("active");
});
All of my image-based links are inside a <div
id="cs_links"></div>. The hover works, but no ACTIVE.
Just using two links, is it possible to have ONE
active once clicked?
My CSS:
#cs_contact {width: 146px; height: 34px; float:
left;}
a.cs_contact {width: 146px; height: 34px;
background: url('/img/pages/cs_contact.png'); display:block}
a.cs_contact:hover {background-position: -146px;}
a.cs_contact_a {width: 146px; height: 34px;
background: url('/img/pages/cs_contact.png');
display:block;background-position: -146px;}
#cs_appoint {width: 146px; height: 34px; float:
left; margin: 10px 0px 0px 0px}
a.cs_appoint {width: 146px; height: 34px;
background: url('/img/pages/cs_appoint.png'); display:block}
a.cs_appoint:hover {background-position: -146px;}
My HTML:
<div id="cs_links">
<div id="cs_contact">
<a class="cs_contact" id="js_contact"
href=""></a></div>
<div id="cs_appoint">
<a class="cs_appoint" id="js_appoint"
href=""></a></div>
</div>
I'm confused on the toggle approach.
Still a novice programmer, but learning fast.
Many thanks for all the help.
Erik
On Jul 5, 2009, at 4:55 AM, waseem sabjee wrote:
//
this is our object refference point. we only want to effect elements
within this object
var obj = $(".cs_links");
// we now need a refference point for each item
// the , obj means we only want items within our object
var items = $(".cs_contact", obj);
// click function
$(".cs_contact").click(function() {
var current = items.index($(this)); // get the .eq() of the item
clicked
// remove the active class from all items
items.removeClass("active");
// set clicked item to active
items.eq(current).addClass("active");
});
|
