change mozilla className onfocus

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • ukfusion
    New Member
    • Sep 2007
    • 35
    #1

    change mozilla className onfocus

    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
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      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

        Comment

        • ukfusion
          New Member
          • Sep 2007
          • 35
          #3
          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

          Code:
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.menub {
	overflow: hidden;
	width: 100px;
	height: 29px;
	clear: both;
	float: left;
}
.menuc {
	overflow: visible;
	width: 100px;
	height: auto;
	clear: both;
	float: left;
}
a.menu3:link, a.menu3:active, a.menu3:visited {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #cccccc;
	display: block;
	padding: 5px;
}
a.menu2:link {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	background-color: #666666;
	display: block;
	padding: 5px;
}
a.menu2:hover,a.menu2:active,a.menu2:visited {
	background-color: #0099FF;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding: 5px;
}
-->
</style>
</head>

<body>

<div class="menub" id="menu1">
<li><a href="#" class="menu3" onfocus="menu1.className='menuc'" onblur="menu1.className='menub'">Link1a</a></li>
<li><a href="#" class="menu2">Link2a</a></li>
<li><a href="#" class="menu2">Link3a</a></li>
<li><a href="#" class="menu2">Link4a</a></li>
<li><a href="#" class="menu2">Link5a</a></li>
</div>
<div class="menub" id="menu2">
<li><a href="#" class="menu3" onfocus="menu2.className='menuc'" onblur="menu2.className='menub'">Link1b</a></li>
<li><a href="#" class="menu2">Link2b</a></li>
<li><a href="#" class="menu2">Link3b</a></li>
<li><a href="#" class="menu2">Link4b</a></li>
<li><a href="#" class="menu2">Link5b</a></li>
</div>
</body>
</html>
          Last edited by ukfusion; Mar 25 '08, 01:04 PM. Reason: forgot something

            Comment

            • gits
              Recognized Expert Moderator Expert
              • May 2007
              • 5390
              #4
              that IS javascript:

              Code:
              onfocus="menu1.className='menuc'"
              and i don't know a way without using javascript ... at least no cross-browser way ...

              kind regards

                Comment

                • ukfusion
                  New Member
                  • Sep 2007
                  • 35
                  #5
                  Originally posted by gits
                  that IS javascript:

                  Code:
                  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
                  Last edited by ukfusion; Mar 25 '08, 01:23 PM. Reason: tested with javascript disabled

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      Correct. html/css are not programming languages so they cannot change properties, elements or attributes.

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          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

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              Yes, that will work, but like you said, only modern browsers and not IE.

                                Comment

                                Previous template Next
                                Working...