Yes, I've been doing that for some time and I really find it cleans up
my code, however you should note that class names are usually space
separated. At least in CSS the class "green tomatoes" will get the
styles of "green" and "tomatoes", so by making your javascript aware of
this you can hav multiple classes on you div's which makes life a bit
simpler.
I'm too lazy to use any of javascript's OOP so I just use:
function hasClass(node,className){
if(node.className){
classes=node.className.split(" ");
for(i=0;i<classes.length;i++){
if(classes[i]==className){return true;}}}
return false;
}
function addClass(node,className){
if(!hasClass(node,className)){
classes=node.className.split(" ");
classes[classes.length]=className;
node.className=classes.join(" ");}
}
function rmClass(node,className){
classes=node.className.split(" ");
var newclasses = new Array();
var k=0;
for(i=0;i<classes.length;i++){
if((classes[i]!=className) && (classes[i]!="" )){
newclasses[k]=classes[i];
k++;}
}
node.className=newclasses.join(" ");
}
Not terribly optimized, but it works.
Stuart Sherwood wrote:
> Hi All. I hope someone can help me with my problem but it isn't exactly
> on topic so replies off list are encouraged.
>
> The markup below is far from semantic but necessary for floating
> elements and alignment. It will come out of a publishing system and may
> repeat any number of times. For each category, the list of topics must
> be hidden until clicked.
>
>
> <div class="category"><a class="activate"></a></div> <!-- Toggle Show
> Hide for this category -->
> <div class="topiclist"><!-- Show Hide This -->
> <div class="topic"></div>
> <div class="topic"></div>
> </div>
>
> <div class="category"><a class="activate"></a></div> <!-- Toggle Show
> Hide for this category -->
> <div class="topiclist"><!-- Show Hide This -->
> <div class="topic"></div>
> <div class="topic"></div>
> </div>
>
> <div class="category"><a class="activate"></a></div> <!-- Toggle Show
> Hide for this category -->
> <div class="topiclist"><!-- Show Hide This -->
> <div class="topic"></div>
> <div class="topic"></div>
> </div>
>
> I have this code from the following thread:
> http://www.webmasterworld.com/forum91/1729.htm
>
> <!--
> //Create an array
> var allPageTags = new Array();
>
> function doSomethingWithClasses(topiclist) {
> //Populate the array with all the page tags
> var allPageTags=document.getElementsByTagName("*");
> //Cycle through the tags using a for loop
> for (i=0; i<allPageTags.length; i++) {
> //Pick out the tags with our class name
> if (allPageTags[i].className==topiclist) {
> //Manipulate this in whatever way you want
> allPageTags[i].style.display='none';
> }
> }
> }
> -->
>
> But there are problems with above javascript that I don't understand
> 1. The loop counter, i, should be a local var (a little more efficient).
>
> 2. Some versions of IE5 accept getElementsByTagName but return null when
> given the '*' argument. A quick check - and switch to the all collection
> if needed would make it disaster proof.
>
>
> Suggestions
> Is it possible to pick out all elements with class="activate" and then
> make the function apply to the instance of class="topiclist" that
> immediatly follows it?
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
