Archive for May, 2009

Javascript: Changing Class Names to Alter CSS

As I discussed in my previous post, Javascript: Opportunities Abound, javascript is very powerful and can be used for a wide variety of client-side interactions. One of the most useful items I’ve found for it so far (mostly because of how much I love CSS) is to alter CSS classes! And the best part is it is incredibly easy. So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function changeCSS(tagID)
{
   var currentTag = document.getElementById(tagID);
   currentTag.setAttribute("class", "secondClass");
   currentTag.setAttribute("className", "secondClass");
   return;
}

The second setAttribute function is for certain versions of IE that for some odd reason (IE sucks) setting the class through javascript does not always function properly. I personally have not noticed this issue with IE6 or IE7, and IE5 is tops 1% of your users, so you can probably leave it out, I’ve just seen other people using it…

And now the HTML that goes with that JS:

<a href="#" onclick="changeCSS(targetTag);" id="targetTag" class="firstClass">Adjust link CSS</a>

Yep, simple as that! When the link is clicked, it calls the javascript function, sending over the id to identify the tag it should work with. In this case, the link is adjusting it’s own CSS, but it can work on anything else in the page. But what if you want the link to work both ways, to be able to change the CSS class of an object back and forth instead of just one direction? Try this on for size, a simple if statement in your JS function (the same HTML will do)

The New Javascript:

function changeCSS(tagID)
{
   var currentTag = document.getElementById(tagID);
   if (currentTag.className == "firstClass")
   {
      currentTag.setAttribute("class", "secondClass");
      currentTag.setAttribute("className", "secondClass");
   }
   else
   {
      currentTag.setAttribute("class", "firstClass");
      currentTag.setAttribute("className", "firstClass");
   }
   return;
}

And that’s that! Simple right? It is also possible to just change a specific aspect of the CSS instead of the entire class, but I’ll talk about that in a future post. Comments? Questions?

Javascript: Opportunities Abound

Javascript is a useful coding language that creates “client-side” changes to a website. It is really a great tool for simple and yet amazing interactivity on your website. Now for those of you who are used to only coding with HTML and CSS, Javascript will be quite a jump for you. Where HTML and CSS apply simply to content and layout, javascript can be very heavy on logic, something that typical computer programming is founded on. So be aware that JS could be a very big change for you.

So what can you do with JS? You can automatically rotate through images, or let users rollover thumbnails to enlarge a main photo. You can change text or even the styles that apply to text or other layouts. You can apply a simple watermark to a text box to indicate what users should do with it. You can sort tables or have fantastic animation effects to coincide with user actions. Have you ever encountered a popup window that greys out the background? Yep, that’s javascript (often combined with a few other fancy things such as AJAX, but no need to worry about that). There are really an endless number of options, many of which are pre-written to make your life easier! Here are some great resources for pre-written JS:

1. JQuery and JQuery UI are fantastic libraries of pre-written javascript. JQuery is an open-source (free for the masses) series of core JS files.The public then uses this open source base to build plugins that can do everything you could possibly imagine for client-side scripting. I’ve used jquery plugins on my fulltime employer’s website for a content slider and table sorting just to name a few items. JQuery UI is a subset of JQuery that focuses on very cool animation effects. I’ve used this to implement an accordion (multiple items where only one is visible at a time), sliding content boxes open and closed, and selection sliders, again to name a few. Great tools, and incredibly easy to implement! Be aware though, because it is open source, a lot of the plugins you end up using can be very finicky on your site…

2. Carousels and Content Sliders are a great way of exposing users to a lot of content without overpowering them with options. A lot of people choose Flash for the same purpose, but flash is awful for SEO purposes, is limited because not all of your users will have it installed on their computer, and is more difficult to update. I’ve found two great carousels that can be applied to either photos or content, and have a lot of customization abilities. Check out jcarousel by Jan Sorgalla, or for a slightly lighter version (the one I ended up using) take a look at jcarousellite. Another one I’ve found out there is at cssglobe.com, which seems pretty sweet as well.

3. Popup Boxes are one of the best javascript tools you’ll ever find. They also are one of the only ones you’ll ever find yourself contemplating paying for. Even though most web users hate the idea of popup windows, popup boxes are entirely different. When used in response to a user action, the popup box offers great opportunities for what you can provide your users with, without navigating them away from a page. They can login to a site that requires registration, they can fill out forms without being forced to have the form take up space on the regular page, or they can view slideshows of images, all without feeling like they’ve left the page that they felt comfortable enough on to click a link. The two best implementations of popup boxes (or shadow boxes or lite boxes as I’ve also heard them called) are Highslide and Lightview. I have more experience using Highslide, but I think Lightview is very well made and looks gorgeous. I had found Lightview by accident some time ago, and when trying to relocate it for this post, I found a listing of all the JS popups out there here. Careful, I haven’t tested any of them.

Those are just a handful of examples of pre-written JS that you can use. In upcoming posts I’ll write a little bit about simple JS that you can implement easy peasy on your own without any coding background.