[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=497321715-16062006><FONT face=Arial color=#0000ff size=2>Thank
you!!</FONT></SPAN></DIV>
<DIV><SPAN class=497321715-16062006><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
class=497321715-16062006>t does not work however...
:(</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006>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
class=497321715-16062006></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006>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
class=497321715-16062006></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006>I will double check the code you
shared.</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006></SPAN></FONT></FONT></FONT> </DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006>Sincerely,</SPAN></FONT></FONT></FONT></DIV>
<DIV><FONT face=Arial><FONT color=#0000ff><FONT size=2><SPAN
class=497321715-16062006>Dan</SPAN></FONT></FONT></FONT></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:12 AM<BR><B>To:</B> jQuery
Discussion.<BR><B>Subject:</B> Re: [jQuery] CSS
features<BR><BR></FONT></DIV>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 href="mailto:triston@gmail.com"> 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 class=sg><BR>Myles</SPAN></DIV>
<DIV><SPAN class=e id=q_10bdd61a23276968_2><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></BLOCKQUOTE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/