Email conversation
From | Vincent Dupont |
To | Me |
Subject | question |
Date | 28 November 2003 09:45 |
Hi,
I found your website very interesting.
I have a JS question : DO you have any idea on how I can change the style
definition of one <div> panel inside a menu?
I don't want to simply change its background or position, but to apply
another stylesheet definition when the menuItem is selected (and then come
back to the original css when no more selected - this is ok).
<style>
.menuItem{blabla}
.selectedMenuItem{blabla}
</style>
<div id="menuItem21" class="menuItem">some texte</div>
I found no such an example on the web
Thanks
Vincent
From | Me |
To | Vincent Dupont |
Subject | Re: question |
Date | 28 November 2003 15:38 |
Vincent,
I suspect that what you want to do is to change the 'class' attribute. The
'class' attribute is special, and cannot be changed using the word 'class',
instead you must use 'className'.
Firstly, you need to obtain a reference to the DIV. Changing class does not
work in Layers browsers such as Netscape 4, Escape and OmniWeb4.2 so there
is no need to try. Just reference the div using document.all and
document.getElementById, then change the className property. This should
work in Internet Explorer 4+, Opera 7, Mozilla, Netscape 6+ etc., Konqueror,
Safari, OmniWeb 4.5+, ICEbrowser, WebTV, Netgem 4 browser, Open TV, iPanel
MicroBrowser, iCab, Clue browser (some of the worst of these may not change
all styles correctly but most of them will do it correctly).
function changeClass(divID,desiredName) {
var theDiv;
if(document.getElementById) {
theDiv = document.getElementById(divID);
} else if(document.all) {
theDiv = document.all[divID];
}
if(theDiv) {
theDiv.className = desiredName;
}
}
...
//make it a normal menu item
changeClass('menuItem21','menuItem');
//make it a selected menu item
changeClass('menuItem21','selectedMenuItem');
//make it a regilar div, not
changeClass('menuItem21','');
Hope this helps
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/