[jQuery] Re: , hover & active

Sun, 05 Jul 2009 06:18:12 -0700

>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");
});




Reply via email to