[jQuery] CSS features

[jQuery] CSS features

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2800.1543" name=GENERATOR></HEAD>
<BODY>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff size=2>GREAT
QUESTION!! I am a newbie JS programmer as it is and BRAND new to Jquery! Thank
you for spotting this.</FONT></SPAN></DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff size=2>I
vaguely remember it from the docs when I skimmed them a couple months
ago.</FONT></SPAN></DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff size=2>My .JS
code should look like this then:</FONT></SPAN></DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff
size=2>$(document).ready(function(){<BR> $("img.helpIcon").hover(<BR> function()
{ $(this).addClass("jsHover"); },<BR> function () {
$(this).removeClass("jsHover"); }<BR> );<BR>});</FONT></SPAN></DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=736394415-16062006><FONT face=Arial color=#0000ff size=2>And it
tests perfectly!! Thanks for helping me use JQuery I hope to make much use of it
in the future.</FONT></SPAN></DIV>
<BLOCKQUOTE>
<DIV class=OutlookMessageHeader dir=ltr align=left><FONT face=Tahoma
size=2>-----Original Message-----<BR><B>From:</B> discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com]<B>On Behalf Of </B>Giuliano
Marcangelo<BR><B>Sent:</B> Friday, June 16, 2006 11:42 AM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] CSS
features<BR><BR></FONT></DIV>Daniel,<BR><BR>silly question, but you are
putting this code between
<BR><BR>$(document).ready(function(){<BR>   //code goes here
<BR>  });<BR><BR>because the js certainly works<BR><BR><BR>
<DIV><SPAN class=gmail_quote>On 16/06/06, <B class=gmail_sendername>Acuff,
Daniel (Comm Lines, PAC)</B> <<A
href="mailto:Daniel.Acuff@thehartford.com">Daniel.Acuff@thehartford.com</A>>
wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Thank you for the link. It
got blocked by company firewall.. Maybe because of warfare or
toys...</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>anyway.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>My external css file is
loaded first and looks like:</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN></DIV>
<DIV><SPAN class=q><FONT face=Arial color=#0000ff size=2>.helpIcon
{<BR> vertical-align: middle;<BR> border: 1px solid
#E7E7EF;<BR> cursor: help;<BR>}<BR></FONT></SPAN></DIV>
<DIV><SPAN class=q><FONT face=Arial color=#0000ff size=2>img.helpIcon:hover,
img.jsHover {<BR> border: 1px solid #99CCFF; <BR>}</FONT></SPAN></DIV>
<DIV></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>the external .js file is
loaded next and looks like:</FONT></SPAN></DIV></DIV>
<DIV><SPAN class=q>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2>$("img.helpIcon").hover(<BR>function() { $(this).addClass("jsHover");
}, <BR>function () { $(this).removeClass("jsHover");
}<BR>);</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV></SPAN></DIV>
<DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>the image link looks
like:</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Response.Write " <img
onClick='helpPop(this);' id='Retail' class='helpIcon'
src='../images/question.gif' title='" & searchString &
"'/>"</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>But yet it does not
work.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Anyone else see
why?</FONT></SPAN></DIV>
<BLOCKQUOTE>
<DIV dir=ltr align=left><FONT face=Tahoma size=2></FONT></DIV><FONT
face=Tahoma size=2></FONT>
<DIV><SPAN class=q><FONT face=Tahoma size=2>-----Original
Message-----<BR><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A> [mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A>]<B>On Behalf Of </B>Myles
Angell<BR></FONT></SPAN></DIV>
<DIV><SPAN class=e id=q_10bdd7c4da4f8e80_7><FONT face=Tahoma
size=2><B>Sent:</B> Friday, June 16, 2006 11:30 AM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] CSS
features<BR><BR></FONT></SPAN></DIV>
<DIV></DIV></BLOCKQUOTE></DIV>
<DIV><SPAN class=e id=q_10bdd7c4da4f8e80_9>Should only need a CSS update
giving that new declaration.<BR><BR>Here's example of it working for
me:<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="http://triston.teamwarfare.com/toys/jquery/imageHover.php"
target=_blank>http://triston.teamwarfare.com/toys/jquery/imageHover.php
</A><BR><BR>Does it work for you?<BR>Myles<BR><BR>
<DIV><SPAN class=gmail_quote>On 6/16/06, <B class=gmail_sendername>Acuff,
Daniel (Comm Lines, PAC)</B> <<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:Daniel.Acuff@thehartford.com"
target=_blank>Daniel.Acuff@thehartford.com </A>> wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Thank
you!!</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2></FONT></SPAN><FONT
face=Arial color=#0000ff size=2></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2>I<SPAN>t does not
work however... :(</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN>Is it because
my img tags will all have to be edited?? They currently look like
this:</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN>Response.Write " <img onClick='helpPop(this);' id='MM1'
class='helpIcon' src='../images/question.gif' title='" & searchString
& "'/>"</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN>I will double
check the code you shared.</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN>Sincerely,</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT
size=2><SPAN>Dan</SPAN></FONT></FONT></FONT></DIV>
<BLOCKQUOTE>
<DIV dir=ltr align=left><FONT face=Tahoma size=2></FONT></DIV>
<DIV><SPAN><FONT face=Tahoma size=2>-----Original
Message-----<BR><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com</A> [mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com" target=_blank>
discuss-bounces@jquery.com</A>]<B>On Behalf Of </B>Myles
Angell<BR></FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Tahoma size=2><B>Sent:</B> Friday, June 16, 2006
11:12 AM<BR><B>To:</B> jQuery Discussion.<BR><B>Subject:</B> Re:
[jQuery] CSS features<BR><BR></FONT></SPAN></DIV>
<DIV></DIV></BLOCKQUOTE></DIV>
<DIV><SPAN>You have to overload the hover declaration, as IE does not
recognize the :hover psuedo class.<BR><BR>So in your case you could add an
additional class to the hover declaration such as ".jsHover":<BR>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>.helpIcon
{<BR> vertical-align: middle;<BR> border: 1px solid
#E7E7EF;<BR> cursor: help;<BR>/* border: 1px solid #99CCFF;
*/<BR>/* border: 1px solid #000080; */<BR>}<BR>img.helpIcon:hover
<SPAN style="FONT-WEIGHT: bold">, </SPAN></FONT></SPAN><SPAN
style="FONT-WEIGHT: bold"><FONT face=Arial color=#0000ff
size=2>img.jsHover </FONT></SPAN><SPAN><FONT face=Arial color=#0000ff
size=2><SPAN style="FONT-WEIGHT: bold"></SPAN>{<BR> border: 1px solid
#99CCFF; <BR>}</FONT></SPAN></DIV>
<DIV><SPAN></SPAN> </DIV>
<DIV>Then, change your js code to:<BR><SPAN><FONT face=Arial color=#0000ff
size=2><BR></FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>   
$("img").hover(<BR>    function() {
$(this).addClass("</FONT></SPAN><SPAN><FONT face=Arial color=#0000ff
size=2>jsHover</FONT></SPAN><SPAN><FONT face=Arial color=#0000ff
size=2>"); }, <BR>    function () {
$(this).removeClass("</FONT></SPAN><SPAN><FONT face=Arial color=#0000ff
size=2>jsHover</FONT></SPAN><SPAN><FONT face=Arial color=#0000ff
size=2>"); }<BR>    );</FONT></SPAN></DIV>
<DIV><SPAN></SPAN><BR>I would also add further specificity on your
selector: $("img") to be: $("img.helpIcon")<BR><BR>So it finally turns
into: <BR></DIV><BR>$("img.helpIcon").hover(<BR>  function() {
$(this).addClass("jsHover"); }, <BR>  function () {
$(this).removeClass("jsHover"); }<BR>);<BR><BR>.helpIcon
{<BR> vertical-align: middle;<BR> border: 1px solid
#E7E7EF;<BR> cursor: help;<BR>/* border: 1px solid #99CCFF; */<BR>/*
border: 1px solid #000080; */ <BR>}<BR>img.helpIcon:hover, img.jsHover
{<BR> border: 1px solid #99CCFF;<BR>}<BR><BR>myles<BR><BR>
<DIV><SPAN class=gmail_quote>On 6/16/06, <B class=gmail_sendername>Myles
Angell</B> <<A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:triston@gmail.com" target=_blank> triston@gmail.com</A>>
wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>You could use it in an external CSS file. Since you are merely
adding / removed the class with regards element, it doesn't matter.
<BR><BR>I also prefer to not put embedded CSS into documents, if I can
avoid it... <BR><BR>Glad I could help. <BR></DIV>
<DIV><SPAN><BR>Myles</SPAN></DIV>
<DIV><SPAN><BR><BR>
<DIV><SPAN class=gmail_quote>On 6/16/06, <B
class=gmail_sendername>Acuff, Daniel (Comm Lines, PAC)</B> < <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:Daniel.Acuff@thehartford.com"
target=_blank>Daniel.Acuff@thehartford.com</A>> wrote: </SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2>Great!!</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Does the css class
have to be Embedded as opposed to External, so that the Class is
created *after* the JQuery .js script library is
loaded?</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>I normally use
external css *only*.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>Amazing reply, just
what I hoped for.</FONT></SPAN></DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN><FONT face=Arial color=#0000ff size=2>BTW I *am* intranet
IE only if that helps.</FONT></SPAN></DIV></DIV>
<DIV><SPAN>
<BLOCKQUOTE>
<DIV dir=ltr align=left><FONT face=Tahoma size=2>-----Original
Message-----<BR><B>From:</B> <A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com"
target=_blank>discuss-bounces@jquery.com </A>[mailto:<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss-bounces@jquery.com" target=_blank>
discuss-bounces@jquery.com</A>]<B>On Behalf Of </B>Myles
Angell<BR><B>Sent:</B> Friday, June 16, 2006 10:49 AM<BR><B>To:</B>
jQuery Discussion.<BR><B>Subject:</B> Re: [jQuery] CSS
features<BR><BR></FONT></DIV>With jQuery you could add a css
Class:<BR>img { border: 1px solid #000; }<BR>img.myHover { border:
1px solid #f00; }<BR><BR>       
    $("img").hover(<BR>   
          function() {
$(this).addClass("myHover"); }, <BR>   
          function () {
$(this).removeClass("myHover"); }<BR>   
        );<BR><BR>Similar to the
suckerfish menus, you have to add JS code to activate a hover state
for the images. Granted, you could get away without that item if you
do a quick check to ensure you're in IE, and then change your css
to: <BR><BR>img { border: 1px solid #000; }<BR>img:hover,
img.myHover { border: 1px solid #f00; }<BR><BR>- myles<BR><BR>
<DIV><SPAN class=gmail_quote>On 6/16/06, <B
class=gmail_sendername>Dean Edwards</B> <<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:dean@edwards.name" target=_blank>
dean@edwards.name</A>> wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">On
16/06/06, Acuff, Daniel (Comm Lines, PAC)<BR><<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:Daniel.Acuff@thehartford.com" target=_blank>
Daniel.Acuff@thehartford.com</A>> wrote:<BR>> I tried today
to add a bordercolor change on an img/icon on hover. Using
IE6<BR>> and to my horror found out YOU
CAN't.<BR>><BR><BR>You can't because IE6 only supports hover
for anchor elements (<A> tags).
<BR><BR>-dean<BR><BR>_______________________________________________<BR>jQuery
mailing list<BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com"
target=_blank>discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A>
<BR></BLOCKQUOTE></DIV><BR></BLOCKQUOTE></SPAN></DIV>
<DIV><FONT size=3><BR></FONT></DIV>
<DIV><SPAN><FONT
size=3><BR>*************************************************************************<BR>This
communication, including attachments, is<BR>for the exclusive use of
addressee and may contain proprietary,<BR>confidential and/or
privileged information. If you are not the intended<BR>recipient, any
use, copying, disclosure, dissemination or distribution is<BR>strictly
prohibited. If you are not the intended recipient, please
notify<BR>the sender immediately by return e-mail, delete this
communication and<BR>destroy all
copies.<BR>*************************************************************************<BR></FONT></SPAN></DIV>
<DIV></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com"
target=_blank>discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR></SPAN></DIV></BLOCKQUOTE></DIV><BR></SPAN></DIV>
<DIV></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com"
target=_blank>discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR></SPAN></DIV>
<DIV></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR></BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/