[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=558413215-16062006><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 class=558413215-16062006><FONT face=Arial color=#0000ff
size=2>anyway.</FONT></SPAN></DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff size=2>My
external css file is loaded first and looks like:</FONT></SPAN></DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff
size=2>.helpIcon {<BR> vertical-align: middle;<BR> border: 1px solid
#E7E7EF;<BR> cursor: help;<BR>}<BR>img.helpIcon:hover, img.jsHover
{<BR> border: 1px solid #99CCFF; <BR>}</FONT></SPAN></DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff size=2>the
external .js file is loaded next and looks like:</FONT></SPAN></DIV>
<DIV><SPAN class=558413215-16062006><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 class=558413215-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff size=2>the
image link looks like:</FONT></SPAN></DIV>
<DIV><SPAN class=558413215-16062006><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 class=558413215-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff size=2>But
yet it does not work.</FONT></SPAN></DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff
size=2></FONT></SPAN> </DIV>
<DIV><SPAN class=558413215-16062006><FONT face=Arial color=#0000ff size=2>Anyone
else see why?</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>Myles
Angell<BR><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></DIV>Should only need a CSS update giving that new
declaration.<BR><BR>Here's example of it working for me:<BR><A
href="http://triston.teamwarfare.com/toys/jquery/imageHover.php">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
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!!</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 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_10bdd6e09bba446b_2><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 class=e id=q_10bdd6e09bba446b_4>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">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/