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