XML Cake!

Hat tip to MoinAnjum’s  A New Morning!

A colleague of mine at work, Patrick Alcisto, asked me how a getElementByClass is done in JavaScript since getElementByID exists in JavaScript but getElementbyClass does not exist. And I have been using a standard script ever since 2004 that I just always have handy in my previous work, but sometimes, looking and remembering which websites I applied it on takes some time. So just to make it easy for me find the code when I need it, might as well post it on my blog so it is easy to find. Check the sample getElementsByClass code below:

The getElementByClass example code.

/* getElementByClass
/**********************/

var allHTMLTags = new Array();

function getElementByClass(theClass) {

//Create Array of All HTML Tags
var allHTMLTags=document.getElementsByTagName(”*”);

//Loop through all tags using a for loop
for (i=0; i<allHTMLTags.length; i++) {

//Get all tags with the specified class name.
if (allHTMLTags[i].className==theClass) {

//Place any code you want to apply to all
//pages with the class specified.
//In this example is to “display:none;” them
//Making them all dissapear on the page.

allHTMLTags[i].style.display=’none’;

}
}
}

Just a brief explanation to the less knowledgeable in JavaScript how this sample code of getElementByClass works is you are simply taking note of all HTML tags present on the page. And going through a loop check each tag, placing them in an array. Then for each member of the array, check if any of them has a class name. And check if it is the class you are specifying.

Feel free to use the code above and share to the world.

Since this is a function, you just tie it up to any event like an onclick or onmouseover on within other functions. Here is an example where someone clicks on a link and will apply the JavaScript code in getElementByClass to a div.

<div class=”whatever”>…</div>

…

<a href=”…” onclick=”getElementByClass(’whatever’);”><img src=”…”></a>

Just a small note, not all browsers support all JavaScript versions. This script may not work in older browsers. Where getElementByID will not work either. Another note is if you did a copy and paste to the codes above, be sure to change the doublequotes and ( ” )  single quotes ( ‘ ) with the plain text ones so you get no errors.

Now check this enhanced checkbox using CSS and Javascript. It looks better.

Impressed? But how was this possible?

I stumbled upon this page on the Internet showing how you can change the boring checkbox into an exciting one. What’s great about this is that you no longer have to change your existing code. By embedding this code, you can easily customize the look of the checkboxes any way you want.

<script type=”text/javascript” src=”checkbox.js”></script>

Don’t you think that this is simply amazing? You can’t do this with plain HTML but with the use of a simple code, you can now make your checkboxes look better and exciting.

This custom checkbox is one of the examples of the importance of CSS. Most modern websites now use CSS (Cascading Style Sheets), either full CSS or partial. Before CSS even existed, when we do major design updates we either change all the pages, taking so much time. But with CSS, work has become easier and faster.

I have been making websites since 1997. And has gone into web development also since 1999 and started out with the server-side language Miva, and soon moved over to PHP starting with the PHP Manual. But maybe I am one of the worst PHP programmers with spaghetti code everywhere. I guess I have just started cleaning up my code with my own library of functions, classes and include files late 2003. And up to now there are still a mess.

I wanted to chat with Mike Lopez one time about Smarty, but he was offline and I had a chat with Reine Sison who I know uses Smarty also. I was getting her advice if Smarty is something I need to learn and get into, but it ended up with her advising me not to learn Smarty and just do the MVC architectural pattern. She further told me about CakePHP and says this is like the PHP version of Ruby on Rails. Sounds like something I definitely need to try out.

This is not a new technique, and in fact in the company where I used to work, everyone is doing this. I guess it was also due to the great in that company that cascade the knowledge down to the every other employee, but as I randomly asked other people who make tableless CSS websites, do you use body ids? And explain how they are used like programming control structures like if..then conditional statements. Many of them still say no.

What is this for?

Making CSS driven websites is very ideal with all the advantages you have probably read about already, and one of these advantages is for doing global changes to a number of pages by simply changing the stylesheet. Which makes this type of website building ideal for mobile devices as well if done correctly, changing the appearance of a website for another type of screen will simply mean changing the stylesheet.

Many parts of pages look the same, that it is like using a template with a template of styles but of course, not all pages are the same. There are still parts that are not the same of course. And this is where this technique comes in, you have general rules for many parts of the page, and you have exceptions to the rules on some parts like in graphic titles of a page, changing mastheads, selected current buttons on spritenavs, removing parts for some pages.

How to do it

Let me explain by example, but before I do, let me just show the concept first. In your stylesheet, you are going to have something like this:

#general-rule{
…
}

And for instance, you have these pages: index.html, about.html and contact.html, they will then have these body tags respectively in their individual files:

<body id=”index”>, <body id=”about”> and <body id=”contact”>

Now to make exceptions to the rule of the general rule, you do something like this to your stylesheet:

#general-rule{
…
}

body#index #general-rule{
…
}
body#about #general-rule{
…
}
body#contact #general-rule{
…
}

In a way, they seem to act like programming control structures, like a nested if…then, or even like a switch…case if you wish to look at it that way. The styles that are in body#index will only apply to the index.html since it has the body tag id index and will not be used on other pages.

I can’t picture it, show me a working example

Here is one of our latest websites, a website for Pillows and Designs by Melody. If you check the CSS file, you find this part:

#container-top{
width:778px;
padding:0px;
margin:0px;
}

body#index #container-top{
background:url(../images/container-top-index.jpg) top no-repeat;}
body#about #container-top{
background:url(../images/container-top-about.jpg) top no-repeat;}
body#contact #container-top{
background:url(../images/container-top-contact.jpg) top no-repeat;}
body#products #container-top{
background:url(../images/container-top-products.jpg) top no-repeat;}
body#cart #container-top{
background:url(../images/container-top-cart.jpg) top no-repeat;}

Obviously, this is changing the image of #container-top for the various pages. All other properties of container top are set in the initial properties and only the image changes of every page. And take a look at the images so you get an idea of what is changing.

Why do it this way?

I will not go over the CSS advantages, and if you are reading this article, I assume you use CSS tableless builds already since you have already seen the light in CSS. Now why do it this way, using body IDs? And my answer is, why not? If you use plain div tags and image replacement, you will need to create IDs for each one. And often set the height and width for each one. If the website suddenly adds a new page, you create a new div inside with the right ID. Making a global change to these will also be easier doing it this way.