[Javascript] How can I change this using CSS

Wed Jul 20 17:28:33 CDT 2005

I noticed this in you last code example.  You are starting with a class string of "cat on".  You then replace "on" with "cat" on mouse over giving you a class string of "cat cat", you then replace "cat" with "on" on mouse out giving you a string of "on on".  This will then bounce between "cat cat" and "on on" an subsequent mouse events.

So the question is do you want to replace "cat" with "on" and vice a versa then start with class="cat".  If you want to add on to cat and then remove it form the original declaration leaving just class="cat" then add "on" with something like this.className = this.className + " on"; and then replace it with an empty string to remove it: this.className = this.className.replace(" on","");  If you want a second class that is either on or off in addition to the class cat, then start with something like class="cat off" and then replace "off" with "on" and vice a versa.

--------------
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA

"C code. C code run. Run code run. Please!"
- Cynthia Dunning

-----Original Message-----
From: Roland Dong [mailto:rdong at advance.net] 
Sent: Wednesday, July 20, 2005 3:11 PM
To: '[JavaScript List]'
Subject: RE: [Javascript] How can I change this using CSS

Mike, Thanks for showing me the trick! I think the code still has a problem.

First of all, upon opening the page, the background color is visible. How do set the default background to "cat"? I switched "cat" and "on" and get wired result. Please see the see the source here <http://www.wiu.edu/users/murbhd/menuTest.html> . I took the code from javascript into html just to make it easy to test.

I think using function could be complicated here. Since each cell also contains image and links and they all trigger mouse over/out events.  Already tried and gave up.

Thanks you very much

> -----Original Message-----

> From: javascript-bounces at LaTech.edu [mailto:javascript-bounces at LaTech.edu]

> On Behalf Of Mike Dougherty

> Sent: Wednesday, July 20, 2005 4:28 PM

> To: [JavaScript List]

> Subject: Re: [Javascript] How can I change this using CSS

> 

> document.write('<div

> onmouseOver=\'this.className=this.className.replace("on", "cat");\'

> onmouseout=\'this.className=this.className.replace("cat", "on");\'

> class="cat on">');

> 

> note:  you must escape the single quote to delimit the onmouseover/out

> attributes

> it takes some concentration to maintain all the nested string delimiters

> 

> On Wed, 20 Jul 2005 15:53:28 -0400

>   "Roland Dong" <rdong at advance.net> wrote:

> > Thanks Mike and Ian for your help.

> >

> > As a matter of fact, the html is javascript generated so I have to write

> > something like:

> >

> > document.write('<div

> onmouseOver=this.className=this.className.replace("on",

> > "cat"); onmouseout=this.className.replace("cat", "on"); class="cat

> on">');

> >

> > Can you tell me what is wrong with the above code, I tried single quote,

> > double quote and no quote on cat and on... but I keep getting errors.

> What

> > is the right syntax for the above code?

> >

> >> -----Original Message-----

> >> From: javascript-bounces at LaTech.edu [mailto:javascript-

> bounces at LaTech.edu]

> >> On Behalf Of Ian Skinner

> >> Sent: Wednesday, July 20, 2005 2:55 PM

> >> To: [JavaScript List]

> >> Subject: RE: [Javascript] How can I change this using CSS

> >>

> >> Something like this maybe?  May require some tinkering depending on the

> >> effect you are actually going for.

> >>

> >> This uses the CSS specification that the class can be a space

> delimitated

> >> list of two or more classes to apply to the given element.

> >>

> >>

> >> div onmouseover: this.className=this.className.replace(" on", " over");

> >> onmouseout: this.className=this.className.replace(" over", " on");

> >> class="cat on">

> >> --------------

> >> Ian Skinner

> >> Web Programmer

> >> BloodSource

> >> www.BloodSource.org

> >> Sacramento, CA

> >>

> >> "C code. C code run. Run code run. Please!"

> >> - Cynthia Dunning

> >>

> >> ...-----Original Message-----

> >> ...From: Roland Dong [mailto:rdong at advance.net]

> >> ...Sent: Wednesday, July 20, 2005 11:42 AM

> >> ...To: '[JavaScript List]'

> >> ...Subject: [Javascript] How can I change this using CSS

> >> ...

> >> ...

> >> ...Hello:

> >> ...

> >> ...I have the following working code:

> >> ...<div onmouseOver="style.backgroundColor='#FF00FF'; " onmouseOut=

> >> ..."style.backgroundColor='#FFFFFF'" class="cat">

> >> ...

> >> ...

> >> ...I want to move background color changing code to CSS. I tried

> something

> >> ...like

> >> ...this:

> >> ...

> >> ...<div onmouseover: this.className="on"

> onmouseout:this.className="off"

> >> ...class="cat">

> >> ...

> >> ...in style sheet add:

> >> ...

> >> ...................

> >> ....off{ background: #D2D2EC; }

> >> ....on { background: #FFFFFF; }

> >> ....................

> >> ...

> >> ...However, since there is already a "cat" class, it would override the

> >> ..."cat"

> >> ...class.

> >> ...

> >> ...Any suggestion?

> >> ...

> >> ...Thanks

> >> ...

> >> ...

> >> ...

> >> ...Here is part of the style:

> >> ...<style >

> >> ...table.menu       {position:absolute; visibility:hidden; background-

> >> color:

> >> ...#FFF}

> >> ...    .off{ background: #D2D2EC; }

> >> ...    .on { background: #FFFFFF; }

> >> ...

> >> ...    /* submenu formatting classes */

> >> ...    td .col                {border: 1px solid #00186B}

> >> ...    .cat, .itm       {border-bottom: 1px solid #ADADAD; padding:

> 2px

> >> ...3px; background-color: #FFF}

> >> ...    .cat             {font-weight: bold}

> >> ...    .cat img         {margin-right: 5px}

> >> ...    .cat .new        {color: #FF0000}

> >> ...    .itm a, .cat a    {text-decoration: none}

> >> ...    .itm a, .itm a:hover, .itm a:visited, .itm a:active

> >> ...                     {color: #42425D}

> >> ...    .cat a, .cat a:hover, .cat a:visited, .cat a:active

> >> ...                     {color: #383843}

> >> ...    .csel            {background-color: #D3D4ED}

> >> ...

> >> ...

> >> ...<style >

> >> ...

> >> ..._______________________________________________

> >> ...Javascript mailing list

> >> ...Javascript at LaTech.edu

> >> ...https://lists.LaTech.edu/mailman/listinfo/javascript

> >>

> >> Confidentiality Notice:  This message including any

> >> attachments is for the sole use of the intended

> >> recipient(s) and may contain confidential and privileged

> >> information. Any unauthorized review, use, disclosure or

> >> distribution is prohibited. If you are not the

> >> intended recipient, please contact the sender and

> >> delete any copies of this message.

> >>

> >>

> >> _______________________________________________

> >> Javascript mailing list

> >> Javascript at LaTech.edu

> >> https://lists.LaTech.edu/mailman/listinfo/javascript

> >

> > _______________________________________________

> > Javascript mailing list

> > Javascript at LaTech.edu

> > https://lists.LaTech.edu/mailman/listinfo/javascript

> >

> >

> > __________________________________________________________

> > This message was scanned by ATX

> > 3:53:58 PM ET - 7/20/2005

> 

> _______________________________________________

> Javascript mailing list

> Javascript at LaTech.edu

> https://lists.LaTech.edu/mailman/listinfo/javascript

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050720/178220b3/attachment.htm>