Now honestly, I think the all famous Prototype has something for this, but if you aren’t using the all famous Prototype… well you’re screwed. Until now.
This is the idea, you want show or hide something on a click of it.
<div onclick="HideOrShowMe();">
YAYAAYAYAY!
</div>
Annoying thing is trying to keep up with whether it’s hidden or not. Now there are ways to do this for sure, but if you had them you wouldn’t be here… or you just love idiotic banter. Either way, you’re here.
To start, get a class going:
if (typeof ClassHandler != 'object')
{
ClassHandler = new Object();
}
Normal declaration. Yeehaw. Now we need a method to check for the class:
ClassHandler.CheckForClass = function(element, nameOfClass)
{
var returnValue = false;
//Check to see if the element variable is a string or (hopefully) a control.
//If it is a string, get the control that belongs to that id.
if (typeof element == 'string')
{
element = document.getElementById(element);
}
//next you use a regular expression to check the className property for
// the class you want. If it finds a match, you're good to go.
if (element.className != '')
{
returnValue = new RegExp('\\b' + nameOfClass + '\\b').test(element.className);
}
return returnValue;
}
Ok so now you have a method to check if it’s there… but what about if you want to replace the old one with a new one? Well that could be broken into two methods first (Both that are useful). First one is the removal of the old class:
ClassHandler.RemoveClass = function(element, nameOfClass)
{
var returnValue = false;
//You know the drill
if (typeof element == 'string')
{
element = document.getElementById(element);
}
//Hey cool, I just used the CheckForClass method
if (ClassHandler.CheckForClass(element, nameOfClass))
{
//Real simple, replace the old
//But you have to check if the nameOfClass exists with a preceding space
//If it does, then you replace that with a space, other wise just replace
//the nameOfClass with a space.
element.className = element.className.replace((element.className.indexOf(' ' + nameOfClass) >= 0 ? ' ' + nameOfClass : nameOfClass),'');
returnValue = true;
}
return returnValue;
}
And now you’ll have to add in the new one.
ClassHandler.AddClass = function(element, nameOfClass)
{
var returnValue = false;
//lalalala
if (typeof element == 'string')
{
element = document.getElementById(element);
}
//If className already has a value, precede the nameOfClass with a space
// otherwise just add it in.
if (!ClassHandler.CheckForClass(element, nameOfClass))
{
element.className += (element.className ? ' ' : '') + nameOfClass;
returnValue = true;
}
return returnValue;
}
Now for the replace:
ClassHandler.ReplaceClass = function(element, classToRemove, classToAdd)
{
var returnValue = false;
//african elephants only have four teeth for chewing their food.
if (typeof element == 'string')
{
element = document.getElementById(element);
}
//Remove the old one
//Add the new one
if(ClassHandler.CheckForClass(element, classToRemove))
{
ClassHandler.RemoveClass(element, classToRemove);
ClassHandler.AddClass(element, classToAdd);
returnValue = true;
}
return returnValue;
}
Now you might be thinking, “Tool, why don’t you just use the replace method in the replace method.” Well I suppose you could, but this way you have two other methods at your disposal for future use. Up to you really, part of this was because I actually needed those methods and the title says “Add, Remove, or Replace”. I can’t go against the title. I don’t have that kind of strength.
Usage? Well there are couple ways you can do this.
if(ClassHandler.CheckForClass('someDiv', 'hide'))
{
ClassHandler.ReplaceClass('someDiv', 'hide', 'show');
}
else
{
ClassHandler.ReplaceClass('someDiv', 'show', 'hide');
}
or this:
if(!ClassHandler.ReplaceClass('someDiv', 'hide', 'show'))
{
ClassHandler.ReplaceClass('someDiv', 'show', 'hide'));
}
And other ways to be sure. Now I’m not saying this is the best way to do it, just a decent way… although looking back on this I wonder if I could clean up the regex stuff.
