By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,481 Members | 1,199 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,481 IT Pros & Developers. It's quick & easy.

change mozilla className onfocus

P: 35
i need a way of changin a class name on focus which works in both ie and mozilla style browsers.....i think i read that className doesnt work in mozilla because its a reserved term or something....is there something similar which i can apply to an oFocus which is browser compatible and does not require script.

thanks
Mar 24 '08 #1
Share this Question
Share on Google+
7 Replies


gits
Expert Mod 5K+
P: 5,390
that seems to be a javascript question ... but setting className works in both, IE and Mozilla/FF ...

show your code in case you have problems with it.

kind regards
Mar 25 '08 #2

P: 35
Heres the page code....i think my problem is to do with the way im specifying which element to change.... i.e. menu1.className='menub'.

but please note i want to achieve this WITHOUT script hence the post in css/html forum

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. .menub {
  9.     overflow: hidden;
  10.     width: 100px;
  11.     height: 29px;
  12.     clear: both;
  13.     float: left;
  14. }
  15. .menuc {
  16.     overflow: visible;
  17.     width: 100px;
  18.     height: auto;
  19.     clear: both;
  20.     float: left;
  21. }
  22. a.menu3:link, a.menu3:active, a.menu3:visited {
  23.     font-family: Arial, Helvetica, sans-serif;
  24.     color: #FFFFFF;
  25.     text-decoration: none;
  26.     background-color: #cccccc;
  27.     display: block;
  28.     padding: 5px;
  29. }
  30. a.menu2:link {
  31.     font-family: Arial, Helvetica, sans-serif;
  32.     color: #FFFFFF;
  33.     text-decoration: none;
  34.     background-color: #666666;
  35.     display: block;
  36.     padding: 5px;
  37. }
  38. a.menu2:hover,a.menu2:active,a.menu2:visited {
  39.     background-color: #0099FF;
  40.     font-family: Arial, Helvetica, sans-serif;
  41.     color: #FFFFFF;
  42.     text-decoration: none;
  43.     display: block;
  44.     padding: 5px;
  45. }
  46. -->
  47. </style>
  48. </head>
  49.  
  50. <body>
  51.  
  52. <div class="menub" id="menu1">
  53. <li><a href="#" class="menu3" onfocus="menu1.className='menuc'" onblur="menu1.className='menub'">Link1a</a></li>
  54. <li><a href="#" class="menu2">Link2a</a></li>
  55. <li><a href="#" class="menu2">Link3a</a></li>
  56. <li><a href="#" class="menu2">Link4a</a></li>
  57. <li><a href="#" class="menu2">Link5a</a></li>
  58. </div>
  59. <div class="menub" id="menu2">
  60. <li><a href="#" class="menu3" onfocus="menu2.className='menuc'" onblur="menu2.className='menub'">Link1b</a></li>
  61. <li><a href="#" class="menu2">Link2b</a></li>
  62. <li><a href="#" class="menu2">Link3b</a></li>
  63. <li><a href="#" class="menu2">Link4b</a></li>
  64. <li><a href="#" class="menu2">Link5b</a></li>
  65. </div>
  66. </body>
  67. </html>
Mar 25 '08 #3

gits
Expert Mod 5K+
P: 5,390
that IS javascript:

Expand|Select|Wrap|Line Numbers
  1. onfocus="menu1.className='menuc'"
and i don't know a way without using javascript ... at least no cross-browser way ...

kind regards
Mar 25 '08 #4

P: 35
that IS javascript:

Expand|Select|Wrap|Line Numbers
  1. onfocus="menu1.className='menuc'"
and i don't know a way without using javascript ... at least no cross-browser way ...

kind regards
ahh ok....so is any use of the DOM javascript?...i could achieve what i want in css using the hover class....but id rather get it onclick or focus.

(sorry to be a pain...but i disabled javascript on my browser and all the functions worked fine without any problems so does menu1.className='menuc' still use javascript?)

so theres basically no way to change a class name without script?

cheers
Mar 25 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Correct. html/css are not programming languages so they cannot change properties, elements or attributes.
Mar 25 '08 #6

gits
Expert Mod 5K+
P: 5,390
without javascript you can do the following in newer mozilla/FF versions:

[HTML]<style type="text/css">
a:focus {
color: green;
}
</style>
<body>
<a href="#"> test </a>
</body>
[/HTML]
so you use a specific focus selector ... and i think this will not work with IE? ... with javascript you could call a function and use getElementById() and change the className.

kind regards
Mar 25 '08 #7

drhowarddrfine
Expert 5K+
P: 7,435
Yes, that will work, but like you said, only modern browsers and not IE.
Mar 25 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.