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
7  3096  gits 5,390
Expert Mod 4TB
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
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 - <!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>
gits 5,390
Expert Mod 4TB
that IS javascript : - onfocus="menu1.className='menuc'"
and i don't know a way without using javascript ... at least no cross-browser way ...
kind regards
that IS javascript:
- 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
Correct. html/css are not programming languages so they cannot change properties, elements or attributes.
gits 5,390
Expert Mod 4TB
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
Yes, that will work, but like you said, only modern browsers and not IE.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Scott Navarre |
last post by:
Hi,
I have Red Hat 8.0 and have the default Mozilla browser that comes with
it. I am programming in javascript and have come across something
problematic. Given the following code:
<HTML>...
|
by: Cezary |
last post by:
Hello.
I have this code below and want to change background, but this works only in
IE5.x. Why ?
<div onmouseover="this.className='change'" onmouseout="this.className=''"...
|
by: swathi |
last post by:
-----------------------------------------------------------------------
A poll associated with this post was created, to vote and see th
results, please visit...
|
by: michael |
last post by:
I'm changing colors of table cells like this:
<style type="text/css">
..over {background-color: #bedddc}
..out {background-color: #99cccc}
</style>
<td onmouseover="this.className='over'"...
|
by: r_mun |
last post by:
Hello,
I think it would be an interesting issue to everyone.
What I'd like to do is simply change the style of my dynamically created table cell.
I have written the following code to...
|
by: Robert |
last post by:
Hi,
Is it possible to dynamically change the style of a class instead of
just an individual element? If so could you point me in the right direction?
Robert
|
by: Inny |
last post by:
Im using This nifty code that works Great in IE but not so great in Mozilla,
In ie if you add an image, the sidenote fits around it, but in mozilla the image just sits over the top. please help
...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
