[jQuery] Re: .hasClass() not behaving as expected.
Thanks for the reply. I eventually removed the -color and -image for the
css background.
mkmanning wrote:
In your code you're attaching the hover event to the anchor tags; in
the sample html none of the anchors has a class (the class is on the
parent li element).
On Feb 8, 4:24 pm, MiD-AwE cr.midda...@gmail.com wrote:
Please help, I've been wrestling with this for too long now.
I've put together this code to change the background of a div when the
mouse hovers over a list of divs. One of the listed divs has a class
name of ash and I want to add a background image on that one hover;
all of the other listed divs only have colors. The problem is that
the .hasClass() doesn't seem to be behaving as it should, or I'm not
doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me
what I'm doing wrong? Why is my $(this).hasClass('ash') not
recognizing when my mouse hovers over the div with the class=ash?
Thanks in advance,
[code]
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en-us xml:lang=
en-us
head
meta content=text/html; charset=UTF-8
http-equiv=content-type /
titlemouseover color changer with preview/title
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/
jquery.min.js/script
script type=text/javascript
//![CDATA[
$(document).ready(function () {
$.cstmzclrns = {clkclr : white};//$.cstmzclrns.clkclr
$(#colors ul li a).hover(
function () {
if (!$(this).hasClass('ash')) {
var color = $(this).css(background-color);
$(#cfilter).css({'background-color' : color});
$(#cfilter).css({'background-image' :
'none'});
} else {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
}
}, function () {
if ($.cstmzclrns.clkclr == 'ash') {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
} else {
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' :
'none'});
}
}).click(
function () {
if ($(this).hasClass('ash')) {
$.cstmzclrns = {clkclr : ash};
$(#cfilter).css({'background-color' : 'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/
ash.png)'});
} else {
$.cstmzclrns = {clkclr :
$(this).css(background-color)};
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' : 'none'});
}
});});
//]]
/script
style media=screen type=text/css
body {
background-color: black;}
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;}
/style
/head
body style=direction: ltr;
div id=customizeMouse over color blocks to see the
design in available colors.
div id=colors
ul
li class=white
# background-color: white; color:
white;.
/li
li class=ash
# background: gray
url(img/ts/ash.png); color:
gray;
[jQuery] Re: .hasClass() not behaving as expected.
I tested your code here and works fine. I just ident your code to look
better.
On Mon, Feb 9, 2009 at 00:05, mkmanning michaell...@gmail.com wrote:
In your code you're attaching the hover event to the anchor tags; in
the sample html none of the anchors has a class (the class is on the
parent li element).
On Feb 8, 4:24 pm, MiD-AwE cr.midda...@gmail.com wrote:
Please help, I've been wrestling with this for too long now.
I've put together this code to change the background of a div when the
mouse hovers over a list of divs. One of the listed divs has a class
name of ash and I want to add a background image on that one hover;
all of the other listed divs only have colors. The problem is that
the .hasClass() doesn't seem to be behaving as it should, or I'm not
doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me
what I'm doing wrong? Why is my $(this).hasClass('ash') not
recognizing when my mouse hovers over the div with the class=ash?
Thanks in advance,
[code]
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en-us xml:lang=
en-us
head
meta content=text/html; charset=UTF-8
http-equiv=content-type /
titlemouseover color changer with preview/title
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/
jquery.min.js/script
script type=text/javascript
//![CDATA[
$(document).ready(function () {
$.cstmzclrns = {clkclr : white};//$.cstmzclrns.clkclr
$(#colors ul li a).hover(
function () {
if (!$(this).hasClass('ash')) {
var color = $(this).css(background-color);
$(#cfilter).css({'background-color' : color});
$(#cfilter).css({'background-image' :
'none'});
} else {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
}
}, function () {
if ($.cstmzclrns.clkclr == 'ash') {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
} else {
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' :
'none'});
}
}).click(
function () {
if ($(this).hasClass('ash')) {
$.cstmzclrns = {clkclr : ash};
$(#cfilter).css({'background-color' : 'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/
ash.png)'});
} else {
$.cstmzclrns = {clkclr :
$(this).css(background-color)};
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' : 'none'});
}
});});
//]]
/script
style media=screen type=text/css
body {
background-color: black;}
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;}
/style
/head
body style=direction: ltr;
div id=customizeMouse over color blocks to see the
design in available colors.
div id=colors
ul
li class=white
a href=# style=
background-color: white; color: white;./a
/li
li
[jQuery] Re: .hasClass() not behaving as expected.
In your code you're attaching the hover event to the anchor tags; in
the sample html none of the anchors has a class (the class is on the
parent li element).
On Feb 8, 4:24 pm, MiD-AwE cr.midda...@gmail.com wrote:
Please help, I've been wrestling with this for too long now.
I've put together this code to change the background of a div when the
mouse hovers over a list of divs. One of the listed divs has a class
name of ash and I want to add a background image on that one hover;
all of the other listed divs only have colors. The problem is that
the .hasClass() doesn't seem to be behaving as it should, or I'm not
doing something, or I'm just completely clueless?
Below is my code and a sample html to test. Can someone please tell me
what I'm doing wrong? Why is my $(this).hasClass('ash') not
recognizing when my mouse hovers over the div with the class=ash?
Thanks in advance,
[code]
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml; lang=en-us xml:lang=
en-us
head
meta content=text/html; charset=UTF-8
http-equiv=content-type /
titlemouseover color changer with preview/title
script type=text/javascript
src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/
jquery.min.js/script
script type=text/javascript
//![CDATA[
$(document).ready(function () {
$.cstmzclrns = {clkclr : white};//$.cstmzclrns.clkclr
$(#colors ul li a).hover(
function () {
if (!$(this).hasClass('ash')) {
var color = $(this).css(background-color);
$(#cfilter).css({'background-color' : color});
$(#cfilter).css({'background-image' :
'none'});
} else {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
}
}, function () {
if ($.cstmzclrns.clkclr == 'ash') {
$(#cfilter).css({'background-color' :
'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/ash.png)'});
} else {
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image' :
'none'});
}
}).click(
function () {
if ($(this).hasClass('ash')) {
$.cstmzclrns = {clkclr : ash};
$(#cfilter).css({'background-color'
: 'transparent'});
$(#cfilter).css({'background-image' :
'url(img/ts/
ash.png)'});
} else {
$.cstmzclrns = {clkclr :
$(this).css(background-color)};
$(#cfilter).css({'background-color' :
$.cstmzclrns.clkclr});
$(#cfilter).css({'background-image'
: 'none'});
}
});});
//]]
/script
style media=screen type=text/css
body {
background-color: black;}
#cfilter {
margin: 0px;
padding: 0px;
opacity: 0.503;
position: absolute;
width: 473px;
height: 466px;
display: block;
right: 0px;
top: 0px;
float: right;
z-index: 1;
clear: none;
background-color: white;}
#customize {
border: 3px solid #afa688;
margin: 0px;
padding: 10px 10px 10px 13px;
font-size: 0.8em;
font-family: Arial,Helvetica,sans-serif;
display: block;
float: left;
clear: left;
position: absolute;
opacity: 0.899;
background-color: #f4e2ab;
color: black;
width: 200px;
top: 25px;
z-index: 3;}
#colors {
border-style: solid;
border-width: 1px;
padding: 0px;
position: relative;
background-color: white;
height: 21px;
top: 9px;
width: 137px;
left: 31px;
display: block;}
#colors ul {
border-style: none;
border-width: 1px;
list-style-type: none;
position: relative;
top: -11px;
width: 99.9%;
left: -39px;
height: 99.9%;}
#colors ul li {
margin: 0px;
padding: 0px;
float: left;}
#colors ul li a {
border: 1px solid black;
margin: 0px 0px 0px 2px;
padding: 0px;
height: 15px;
display: block;
list-style-type: none;
list-style-position: inside;
width: 15px;
float: left;}
/style
/head
body style=direction: ltr;
div id=customizeMouse over color blocks to see the
design in available colors.
div id=colors
ul
li class=white
a href=# style=
background-color: white; color: white;./a
/li
li class=ash
a href=# style=
background: gray url(img/ts/ash.png); color:
gray;
./a
/li
li class=light_blue
a
