BubikolRamios
12-16-2008, 11:58 AM
Wanted to have a tabbed menu from <a> tags, providing that last clicked stays visualy marked as selected. Since there is no way to do this via css, at least not cross browser, and examples , if any, had a bunch of unnecesary stuf around it, I putted this together:
All you need is, to edit on and off css to your desires.
The items in play should all be initialy in the same class (off),
<html>
<head>
<style type="text/css">
.off
{
background:yellow;
}
.on
{
background:lawngreen;
}
</style>
<SCRIPT language="javascript" type="text/javascript" >
function Semaphore(semaphoreData)
{
var lastClicked = null;
// init scan all semaphore elements
//**************************************************************************************************** ********************************
var arr = getElementsByClassName(semaphoreData.strClassSemaphoreOff,semaphoreData.strFilterTag/* optional ,semaphoreData.objContElm*/);
for (var i = 0; i < arr.length; i++)
{
arr[i].id = i;
// attach evets to them
addEvent(arr[i],'click', function(){ func_to_execute_onclick(this,arr); });
}
if (semaphoreData.defaultPick != null)
{
arr[semaphoreData.defaultPick].className = semaphoreData.strClassSemaphoreOn;
lastClicked = arr[semaphoreData.defaultPick];
}
//**************************************************************************************************** ********************************
function func_to_execute_onclick(sender,a)
{
sender.className= semaphoreData.strClassSemaphoreOn;
if (lastClicked != null)
{
lastClicked.className= semaphoreData.strClassSemaphoreOff;
}
lastClicked = sender;
}
//http://ejohn.org/projects/flexible-javascript-events/
//**************************************************************
function addEvent( obj, type, fn )
{
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn )
{
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
//**************************************************************
//http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
//**************************************************************
function getElementsByClassName(strClass, strTag, objContElm)
{
strTag = strTag || "*";
objContElm = objContElm || document;
var objColl = objContElm.getElementsByTagName(strTag);
if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all;
var arr = new Array();
var delim = strClass.indexOf('|') != -1 ? '|' : ' ';
var arrClass = strClass.split(delim);
for (var i = 0, j = objColl.length; i < j; i++) {
var arrObjClass = objColl[i].className.split(' ');
if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
var c = 0;
comparisonLoop:
for (var k = 0, l = arrObjClass.length; k < l; k++) {
for (var m = 0, n = arrClass.length; m < n; m++) {
if (arrClass[m] == arrObjClass[k]) c++;
if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
arr.push(objColl[i]);
break comparisonLoop;
}
}
}
}
return arr;
}
//**************************************************************
};
window.onload = function()
{
semaphoreData = new Object();
//mandatory
semaphoreData.strClassSemaphoreOff = 'off';
//mandatory
semaphoreData.strClassSemaphoreOn = 'on';
//optional
semaphoreData.strFilterTag = 'a';
//optional
//semaphoreData.objContElm = null;
//optional
semaphoreData.defaultPick = 2;
semaphore = new Semaphore(semaphoreData)
}
</script>
</head>
<body>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<div> SOME VISUAL DELIMITER</div>
<div class = 'off' > test</div>
<div class = 'off' > test</div>
<div class = 'off' > test</div>
</body>
</html>
All you need is, to edit on and off css to your desires.
The items in play should all be initialy in the same class (off),
<html>
<head>
<style type="text/css">
.off
{
background:yellow;
}
.on
{
background:lawngreen;
}
</style>
<SCRIPT language="javascript" type="text/javascript" >
function Semaphore(semaphoreData)
{
var lastClicked = null;
// init scan all semaphore elements
//**************************************************************************************************** ********************************
var arr = getElementsByClassName(semaphoreData.strClassSemaphoreOff,semaphoreData.strFilterTag/* optional ,semaphoreData.objContElm*/);
for (var i = 0; i < arr.length; i++)
{
arr[i].id = i;
// attach evets to them
addEvent(arr[i],'click', function(){ func_to_execute_onclick(this,arr); });
}
if (semaphoreData.defaultPick != null)
{
arr[semaphoreData.defaultPick].className = semaphoreData.strClassSemaphoreOn;
lastClicked = arr[semaphoreData.defaultPick];
}
//**************************************************************************************************** ********************************
function func_to_execute_onclick(sender,a)
{
sender.className= semaphoreData.strClassSemaphoreOn;
if (lastClicked != null)
{
lastClicked.className= semaphoreData.strClassSemaphoreOff;
}
lastClicked = sender;
}
//http://ejohn.org/projects/flexible-javascript-events/
//**************************************************************
function addEvent( obj, type, fn )
{
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn )
{
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
//**************************************************************
//http://muffinresearch.co.uk/archives/2006/04/29/getelementsbyclassname-deluxe-edition/
//**************************************************************
function getElementsByClassName(strClass, strTag, objContElm)
{
strTag = strTag || "*";
objContElm = objContElm || document;
var objColl = objContElm.getElementsByTagName(strTag);
if (!objColl.length && strTag == "*" && objContElm.all) objColl = objContElm.all;
var arr = new Array();
var delim = strClass.indexOf('|') != -1 ? '|' : ' ';
var arrClass = strClass.split(delim);
for (var i = 0, j = objColl.length; i < j; i++) {
var arrObjClass = objColl[i].className.split(' ');
if (delim == ' ' && arrClass.length > arrObjClass.length) continue;
var c = 0;
comparisonLoop:
for (var k = 0, l = arrObjClass.length; k < l; k++) {
for (var m = 0, n = arrClass.length; m < n; m++) {
if (arrClass[m] == arrObjClass[k]) c++;
if ((delim == '|' && c == 1) || (delim == ' ' && c == arrClass.length)) {
arr.push(objColl[i]);
break comparisonLoop;
}
}
}
}
return arr;
}
//**************************************************************
};
window.onload = function()
{
semaphoreData = new Object();
//mandatory
semaphoreData.strClassSemaphoreOff = 'off';
//mandatory
semaphoreData.strClassSemaphoreOn = 'on';
//optional
semaphoreData.strFilterTag = 'a';
//optional
//semaphoreData.objContElm = null;
//optional
semaphoreData.defaultPick = 2;
semaphore = new Semaphore(semaphoreData)
}
</script>
</head>
<body>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<a class = 'off' href = #> test1</a>
<div> SOME VISUAL DELIMITER</div>
<div class = 'off' > test</div>
<div class = 'off' > test</div>
<div class = 'off' > test</div>
</body>
</html>