Making Joomla h3 Module title double styled or double colored using JQuery

In Joomla, you know that words that the module titles are presented with are the h3 tags.  Generally they are designed with single background image or any background color with single one color for title texts.

I have used jquery to make the h3 tags multiple styled.  One color or style for first word and another set of style for remaining words.   So, it looks better than normal h3 tag styles.

You need to add the following code inside head tag of the index.php file of template.  Also you need to include the jquery base classes to make the things happen in right way.

Firs i would like to tell that i am not a pro coder.  I am just a designer with intermediate level of script knowledge.

Ok, here is what the code does.  Once the document is loaded, the script searches for “sideBar” div inside page(you can change this tag to anything).  The “each” keyword is used to rotate inside available h3 tags manipulation.  So if there are more than 1 h3 tags, it will work on all of them separately.  The “ft” variables picks all the text including html tags from the h3 text.  the “cc” variable searches for first space character.  Suppose if it contains any space character, it is assumed that the h3 text is of more than 1 word and it enters into “if” condition.  The “fword” variable is filled with first word.  and “otherwords” are filled with words that is available after the first word.

Then i merge the words by adding “newh3Style” span tag with “otherwords”.  That is it.

Please note that again, i am not a coder.  I know there will be better code or optimized code than this.  If you have found any please reply them in comment.  Your comments can help me improve the code.

Demo Page

<script type=”text/javascript”>
jQuery(document).ready
(
function()
{
$(”#sideBar h3″).each(function(i)
{
var ft =($(this).html());
var cc = ft.indexOf(” “);
if (cc>0)
{
var fword = ft.slice(0,cc+1);
var otherwords = ft.slice(cc+1);
$(this).html(fword+”<span class=’newh3Style’>”+otherwords+”<\/span>”);
}
}); }

);
</script>