[jQuery] Re: , hover & active

[Erik R. Peterson]

Thanks.  Upgrade didn't work..  I feel I'm so close.

Erik



On Jul 5, 2009, at 2:23 PM, Charlie wrote:

using older version jQuery 1.2.6 see what happens if upgrade

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js "></script>.

another thing to consider is you are using 2 click events on your links. You have one click event scripted for loading content, another for switching class, might be better to consolidate into one. I really don't know the impact of the 2 events but it may be cause of problems, not sure. Certainly not as efficient as combining into 1

Erik R. Peterson wrote:

I have the fixed version pasted inside the html.

I'm still getting a error when I click on the first link:

Line 22 is:      $(this).addClass("active");

[Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.enaturalskin.com/src/js/jquery/core/jquery-1.2.6.min.js :: anonymous :: line 22" data: no]

http://www.enaturalskin.com/src/js/jquery/core/jquery-1.2.6.min.js
Line 22

On Jul 5, 2009, at 11:44 AM, Charlie wrote:

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.

Page:  http://www.enaturalskin.com/needhelp.htm

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