 |
| |
| Author |
Thread |
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 04-21-2003 14:17
This probably isn't anything new to most of you here but I thought I'd share it anyways.
I've been playig around with a whole bunch of different things lately and I finally figured out how to do something I've racking my brain about for some time now. Using getElementsByTagName() and the className property you can set CSS values for an entire CSS class on the fly.
It's as simpls as this:
myClass = document.getElementsByTagName("div")
for (i=0; i < myClass.length i++) {
if (myClass[i].className == "myClassName") {
myClass[i].style.myCSSproperty = "myValue"
}
}
Of course this will only work with classes belonging to the one element type (all div's, all span's etc..) but it can be usefull and it works in IE, Mozilla and Opera7 as well.
Edit:
Fixed a typo, thanks for spotting that Slime. 
[This message has been edited by Dracusis (edited 04-21-2003).]
|
InI
Paranoid (IV) Mad Scientist
From: Somewhere over the rainbow
Insane since: Mar 2001
|
posted 04-21-2003 14:59
The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-21-2003 15:47
You have an equals sign in there that should probably be a double-equals.
I've always wondered how browsers handle it when you give an element multiple space-separated classes. How does the browser give you the value of className when an element belongs to multiple classes?
|
InI
Paranoid (IV) Mad Scientist
From: Somewhere over the rainbow
Insane since: Mar 2001
|
posted 04-21-2003 16:09
The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 04-21-2003 16:29
Yup, it's definatly only for the last class defined if you define the classes in like so...
<element class="myClass1" class="myClass2">content</element>
...and className will return the string "myClass2". Or if you set the className attribute through script.
Although if you define a your class like so:
<element class="myClass1 myClass2">content</element>
Which I didn't know you could do untill slime mentioned it above. Then className will return the string as "myClass1 myClass2" so as long as you define your classes like this you could simply use an indexOf() check on the className string to get what you want. Thanks for that Slime, I never knew you could define multiple classes in the same class attribute. So the better way to do this would be:
myClass = document.getElementsByTagName("div")
for (i=0; i < myClass.length i++) {
if (myClass[i].className.indexOf("myClassName") != -1) {
myClass[i].style.myCSSproperty = "myValue"
}
}
The same, in both cases, also applies for Mozilla / Opera7 but I don't know if any of this works on IE/Mac yet.
[This message has been edited by Dracusis (edited 04-21-2003).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-21-2003 16:58
Dracusis: this
<element class="myClass1" class="myClass2">content</element>
is completely unallowed. =)
It surprises me how often people put multiple attributes with the same name in a tag. An attribute can, of course, only have one value, so it can only be specified once per element. Same goes for events like onclick and stuff (which people seem to be fond of trying to assign multiple times per element).
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 04-21-2003 17:22
It is? 
Oh deah... I must have skipped that chapter. I knew you weren't meant to assign multiple event handeler calls from the same element but for some odd reason I never thought more than one class="myClass" was a bad thing. Thanks again for pointing that out.
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-21-2003 17:54
Yeah, that's one of the built-in rules of SGML, I think. If it's not a rule for SGML, then it's at least one for HTML, and certainly for XML.
|
poi
Paranoid (IV) Inmate
From: France
Insane since: Jun 2002
|
posted 04-21-2003 23:45
Indeed, the following code works in Mozilla1.3 code:
<html><head><style type="text/css">
.class1
{
border:4px solid #690;
}
.class2
{
background-color:#cfc;
color:#060;
font-size:200%;
}
</style>
</head>
<body>pouet
<span class="class1 class2">another pouet</span>
a last pouet</body>
</html>
I'm not sure if it's supposed to be valid but it works that way  And Mooncalf's getElementsByClassName function confirms this
Since it seems to be ok to have several classes, it could be useful to add an optionnal parameter to the getElementsByClassName function to precise if the clasName should be alone or not.
[This message has been edited by poi (edited 04-21-2003).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-22-2003 03:17
Yup, it's valid - from http://www.w3.org/TR/html4/struct/global.html#h-7.5.2 :
"This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters."
|
Scott
Bipolar (III) Inmate
From: schillmania.com
Insane since: Jul 2002
|
posted 04-23-2003 22:25
I've played around with this ("multiple-class inheritance") a bit, it is legal to assign multiple class name values but you may have problems if you want to then read those values back via JavaScript.
I think the simplest way to deal with it is to split the className attribute into an array by spaces, then iterate through that array. eg var elementClasses = myDiv.className.split(' '); or whatever.
Also, IE:Mac (5 I believe) has a "whitespace parsing bug" that will screw up multiple class declarations in some cases - basically if you have a class declared that is a substring of another class and there is a space after the first class name, the bug will occur.
The example explains it much better than I can 
http://www.macedition.com/cb/ie5macbugs/substringbug.html
I've been messing around with multiple class stuff and manipulating it via JS - it's pretty neat to be able to append a "mouseover" class or whatever to an element that already has multiple classes declared on it, and then remove it on a mouseout.
[This message has been edited by Scott (edited 04-23-2003).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-23-2003 22:39
quote:
Also, IE:Mac (5 I believe) has a "whitespace parsing bug" that will screw up multiple class declarations in some cases - basically if you have a class declared that is a substring of another class and there is a space after the first class name, the bug will occur.
Thanks for that bit of info, I'll be sure to keep that in mind.
quote:
I've been messing around with multiple class stuff and manipulating it via JS - it's pretty neat to be able to append a "mouseover" class or whatever to an element that already has multiple classes declared on it, and then remove it on a mouseout.
Before using JavaScript for effects like this, you should make sure that they can't be handled with CSS only. For this specific example, the :hover pseudo-class should create the same effect.
|
Scott
Bipolar (III) Inmate
From: schillmania.com
Insane since: Jul 2002
|
posted 04-24-2003 20:38
:hover and :active are CSS2 and aren't supported across too many elements (yet), are they? - Of course it's way more convenient to use them where you can (ie. anchor tags), but I couldn't find much as far as docs on what's supported currently. (The W3C example I saw just used anchor tags, that was about it).
I've been working on a reuseable button widget that takes advantage of this multiple class declaration approach - however, I'm thinking I may have to review and change it if the button tag supports :hover (and chances are it probably does!).
[edit]
Yeah, it does .. at least, in Mozilla (no dice in IE 6). Well, eventually it'll be supported across the table I guess!
I tried it on a TD element under a table also, works in Mozilla. Quite cool.
[/edit]
[This message has been edited by Scott (edited 04-24-2003).]
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-24-2003 20:48
Yeah, I think the support for them is pretty lacking - maybe not as much in Mozilla's case - but you should always test them out first.
You know what *would* be great, is a script that automatically detected what browser it was running in and whether that browser is known to support the :hover/:active pseudo-classes, and, if the browser doesn't, the script would then generate the necessary event handlers to simulate them. The script could then be dropped in any page, and the author could simply use the pseudo-classes as they're meant to be used.
I've been planning on doing stuff like this for a while now to make up for CSS bugs in IE, but never really got around to it. The great thing about this idea is that you only need to make it work in the browsers that *don't* support a CSS feature, because the other browsers can just follow the CSS and won't need to execute the script.
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 04-24-2003 21:41
That is a nice idea but would you be able to do it without having to actually detect the browser?
If you have to rely on detecting for objects that aren't related to what your scripting then there wouldn't be much point. You'd need to figure out a way to detect if the browser supports :hover without knowing what browser it is and I don't know of any properties that actually tell you that.
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 04-24-2003 21:50
The reason detecting the browser is OK here is that you're detecting for *faulty* browsers.
A script which said, "OK, you're Mozilla, and I know Mozilla supports :hover so I won't do anything" would be bad. A script wihch says "OK, you're IE5, and I know IE5 doesn't correctly support :hover so I'm going to do sometihng" is alright, because it makes the assumption that any browser it doesn't know about is standards-compliant.
In this way, if there's a browser that doesn't support :hover, but we've never heard of that browser before, then the page won't work in that browser. However, we can at least isolate the *popular* buggy browsers - which is what we do already when we do things like the box model hack - and fix things up for them. While it's not guaranteed to work in all situations, it helps us avoid messy looking CSS hacks here and there. It's not a complete fix, just an easier workaround (drop it in the page and you're all set).
I doubt there's any way to fully test a browser's support of a CSS feature with scripts. That's why you only want to use the script hack for browsers that you already know don't support the feature. (In addition, the assumption should be made that future versions of all browsers will be perfect. While that isn't likely to be true, it's not a good idea to assume *all* versions of IE mis-support :hover, since future ones may support it fine, and we don't want to be implementing the hack in that case.)
|
Dracusis
Maniac (V) Inmate
From: Brisbane, Australia
Insane since: Apr 2001
|
posted 04-25-2003 07:31
Good point(s)
|
