I am working on the new version of the SMS Central which will be integrated in Joomla, it quite takes some time since I don’t have internet at home and it’s more a trial and error process. This is when you notice how much one is used to the internet and google. But at least I have MAMP (Apache + PHP + MySql) for Mac and I can at least do some tests. I came across Sweet Titles which is great, but by default it does the “Sweet Titles” for the complete site, which isn’t really nice on a joomla site. The simplest solution is to use getEelementById to do it only for one id, this again is also not what I want, because a ID has to be unique, and I want it on more then one place. My solution was to use a GetElementsByClass function which I found here and modify the original sweettitle.js.

Original:

[source:js]
init : function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j;
this.tip = document.createElement(’div’);
this.tip.id = ‘toolTip’;
document.getElementsByTagName(’body’)[0].appendChild(this.tip);
this.tip.style.top = ‘0′;
this.tip.style.visibility = ‘hidden’;
var tipLen = this.tipElements.length;
for ( i=0; i var current = document.getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mouseout',this.tipOut);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
},
[/source]


My modified Version:

[source:js]
init : function() {
if ( !document.getElementById ||
!document.createElement ||
!document.getElementsByTagName ) {
return;
}
var i,j,kk,ll;
this.tip = document.createElement(’div’);
this.tip.id = ‘toolTip’;
document.getElementsByTagName(’body’)[0].appendChild(this.tip);
this.tip.style.top = ‘0′;
this.tip.style.visibility = ‘hidden’;
var tipLen = this.tipElements.length;
for ( i=0; i var myObjColl = getElementsByClassName('sms');
for (var kk = 0, ll = myObjColl.length; kk < ll; kk++) {
var current = myObjColl[kk].getElementsByTagName(this.tipElements[i]);
// var current = document.getElementById('sms').getElementsByTagName(this.tipElements[i]);
var curLen = current.length;
for ( j=0; j addEvent(current[j],'mouseover',this.tipOver);
addEvent(current[j],'mouseout',this.tipOut);
current[j].setAttribute('tip',current[j].title);
current[j].removeAttribute('title');
}
}
}
},
[/source]

What I did was to get all elements of the class I want, like this:

[source:js]
var myObjColl = getElementsByClassName(’sms’);
[/source]

Then create a new loop
[source:js]
for (var kk = 0, ll = myObjColl.length; kk < ll; kk++) {
[/source]

and modify the original line:

[source:js]
var current = document.getElementById('sms').getElementsByTagName(this.tipElements[i]);
[/source]

to this:
[source:js]
var current = myObjColl[kk].getElementsByTagName(this.tipElements[i]);
[/source]

and of course you need to add the new function GetElementsByClassName at the beginning of sweettitle.js

[source:js]
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;
}

// To cover IE 5.0’s lack of the push method
Array.prototype.push = function(value) {
this[this.length] = value;
}
[/source]

That’s all, now you have nice, sweet and fancy titles for the classes you want