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