My Favorite Javascripts for Designers

October 14, 2004

Are there certain javascripts that you seem to always use from project to project? Lately, I have seen javascript being used more and more effectively on websites. For example, Gmail’s user interface and Mike Davidson’s sIFR technique. How we use javascript on a website can certainly make a website experience better and more enjoyable. I will never proclaim to be a javascript expert or even write javascript from the scratch. On the other hand, I do excel at the copy, paste, and tweak method.

Some of the reasons I use javascript are, (1) it can’t be done with CSS, (2) it is client-side making things fast, and (3) it improves the user experience. Simple, fast and effective javascript is what I like when using a javascript script. So, these are the ones that made my list. What would you put on your list? They are in no paticular order and example follow with each.

My top javascripts

ExpandCollapse

Used for expanding and collapsing block elements. I use this one for hiding divs or expanding the divs for forms. Very useful.

function expandCollapse() {
for (var i=0; i<expandCollapse. »
arguments.length; i++) {
var element = document.getElementById »
(expandCollapse.arguments[i]);
element.style.display = (element.style. »
display == "none") ? "block" : "none";
	}
}

Example:

Timer Layer

Used for hiding an element after ‘x’ of seconds. Great for hiding status messages after a person has submitted a form.

var timerID;

function ShowLayer(id)
{
  document.getElementById().style.display = "block"; 
}

function HideTimedLayer(id)
{  
    clearTimeout(timerID);
    document.getElementById(id). »
		style.display = "none";
}

function timedLayer(id)
{
  setTimeout("HideTimedLayer(\"" + id + "\")",»
	 5000); //5000= 5 seconds
}

Example:

Style Switcher

Paul Sowden’s article on A List Apart’s about switching styles and saving that style with cookie is awesome. I’ve used it from changing font-sizes to changing the complete layout and color of a site. Very useful when a site is built with CSS.

Example:

This is simple change of the background color on this site Background Blue Background Brown

Form Checker

Probably one of the most useful scripts and there are several out there about form validation. This figures out what fields are required from the value in in a hidden input tag. Than it highlights the error areas.

function check_required(myForm) {
var requiredFields = myForm.required.value.split("|");
var errorString = '';
for (var i=0; i<requiredFields.length; i++) {
var parts = requiredFields[i].split(",");
var field = parts[0]; var title = parts[1];
…
Show Full Script

Example:

Enter Your Info


Drop Down Navigation.

Nothing beats HTML Dog’s Sons of Suckerfish dropdown navigation. It can be argued that it is not as usable as static navigation, but when you need it or it is requested Patrick Griffiths and Dan Webb have a script that is light, simple, valid, and a beautiful combination of CSS and javascript.

Example: used on IAB website.

Download all of the scripts above here in this one file.

A Reader's Toolbox The Microsoft certified of MB2-422 and 220-602 are expert professionals of trouble shooting with windows backup problems. Whenever some virus attacks your system, it damages all existing data in your hard drive. You can perform disk recovery operations with the help of antivirus software that kills viruses and scans your pc. It's also recommended for keeping your chat software safe from virus.

Comments

Dave Child said:

I like a few small ones. My new LiveSearch one is likely to get a lot more use. Form validation is great, as long as it's just there to save some time and server-side validation is in place. A javascript to check font sizing on pages (when using relative sizes) and increase it if below a minimum is also one I use regularly.

Nice list - and it's nice to see JavaScript being used more sensibly nowadays.

Posted on Oct. 14, 2004 05:06 #

Mike P. said:

Great List Blake!! I'm scooping some of these...

I like to use that javascript + CSS pullquote thingy I made. Mostly because I'm not a huge fan of duplicating content...

Posted on Oct. 14, 2004 05:20 #

Rob Mientjes said:

This is one handy writeup. I'm gonna use at least two of those soon, just for the sake of using it :D

Posted on Oct. 14, 2004 07:38 #

Blake Scarbrough said:

David, I really like the live script too. Very useful and quick.

Mike, your script would be a great addition to any CMS.

Posted on Oct. 14, 2004 09:10 #

Christian Watson said:

A very bookmarkable group of scripts - thanks! It would be great if the form checker could display the error message actually on the page itself - any chance of you coming up with a script to do that?

Posted on Oct. 14, 2004 09:24 #

AkaXakA said:

I used to use drop downs like that too, but now with the IE7 javascript, I can just use :hover.

Also, it makes IE behave like it FireFox and Opera, so getting the design into code is made a LOT easier. I'd say that's the nr 1 Javascript I have, as a designer.

Posted on Oct. 14, 2004 15:30 #

Speaker-To-Animals said:

Christian Watson's request should be left as an exercise to the user, since there is already a script that readily demonstrates how this could be done (see ExpandCollapse at the beginning of this article).

Posted on Oct. 14, 2004 20:15 #

Buffalo Bandit said:

Christian,
Gimme a few minutes and I'll have a script for you. It's a great idea and pretty much combines the timer script with the validation script... start your timers... and... go!

Posted on Oct. 15, 2004 08:21 #

Buffalo Bandit said:

Christian Watson,
So I have an example working up on a test server out there:
http://www21.brinkster.com/dienst/sandbox/test_form.htm
The main issue with it is that it will display a "There is no error message" above the form if the user's browser does not support CSS. Otherwise it switches out the pop-up for an in frame message using a combination of the
Expand Collapse and the form validator. Let me know if that works.

Posted on Oct. 15, 2004 09:05 #

Al Abut said:

FYI, the IAB example breaks hard in the browser on my ibook - Safari 1.0.3. The drop downs appear in the upper left corner of the viewport.

Overall though, a handy single page resource for quick js snippets. I'd also recommend Young Pup's stuff - oldie but goodie.

Posted on Oct. 15, 2004 09:51 #

Ozh said:

Collapsing stuff is neat for menus, in such a case I like to add a cookie function so the collapsing state is persistent thru pages or visits.

Also, using js is good, but it can be another cross-browser obstacle. For example, your design is ok in FF but it's a disaster in IE. Yes "IE web standards 6 years old" blabla blabla. But as a matter of fact, there IS still IE around.

Posted on Oct. 15, 2004 12:44 #

Christian Watson said:

Buffalo Bandit - thanks for putting that together. It's close to what I was thinking, but what I was really looking for was an implementation like on Google Adsense. Try logging in without entering any information - it's pretty sweet how they do their error message.

Posted on Oct. 15, 2004 14:31 #

AkaXakA said:

To do that you just need to separate the checks for all the fields and add the class of visible to the fields' error

Posted on Oct. 15, 2004 15:28 #

Blake Scarbrough said:

Ozh what are js scripts are you referring to. All of the javascripts on this page work in IE 6.0

Posted on Oct. 15, 2004 16:38 #

AGaguK said:

Just wanted the thank you for sharing those scripts.

The collapse/expand function you got there is sooo simple yet so effective, exactly what I was looking for!!

Once again, thank you.

Posted on Oct. 19, 2004 07:55 #

Dale Cruse said:

We've all seen scripts that display the date on a site. Try editing the script to display only the year and then embed that script in your copyright notice. Your copyright date will always be to date.

Set it and forget it indeed!

Posted on Oct. 22, 2004 15:09 #

lee said:

Good of you to share this stuff, thanks. Feel free not to answer me but I thought I'd ask anyhow. Wrt the timer layer, can it be made to fade out and how can a form button be made to trigger it?

Thanks again and have a good weekend, Lee

Posted on Oct. 23, 2004 14:58 #

Johnson Page said:

The form validation one is outstanding. I wish I'd stumbled across this site last week when I needed a quick and easy form validation script!

Posted on Oct. 24, 2004 00:11 #

Blake Scarbrough said:

lee if you find out how to do one let me know. You could possibly create an animated gif that is timed to fade away.

Posted on Oct. 25, 2004 10:11 #

Steven Woods said:

Easy way to trim space from either side of a string variable. Useful for validation (in case someone enters a space into your fields).

function stringTrim(strToTrim) {
return(strToTrim.replace(/^\s+|\s+$/g, ''));
}

Posted on Oct. 27, 2004 06:53 #

richard said:

nospam script... replaces [at] with @ at load time to make email address linkable:

function view_mailto() {
mailto=document.getElementById('a-mailto').firstChild;
address=mailto.nodeValue.replace(" [at] ", "@");
mailto.nodeValue=address;
mailto.parentNode.setAttribute("href", "mailto:" + address);
}
window.onload = function() { view_mailto(); }

myname [at] mydomain.com

Posted on Oct. 29, 2004 18:17 #

duval said:

Blake,
excuse my english, i write from Europe/france/Paris. thanks a lot for your generosity and your javascript.
Here in France the web mostly don't use standard and CSS. Cause i'm a graphic designer and want my works to be accessible to everybody i decide to learn by myself these standards and to look at american sites. During my research i discover a very interesting site about DHTML DOM and javascript navigation. Maybe you know it. If not, it give you the keys to make very very impressive java navigation with an effect of in and out and a mouvement between. See :
http://www.youngpup.net/2001/ypslideoutmenus
i use it in a work in progress (a kind of exercice of css) see the navigation in :
http://www.anne-duval.com/senart/v2/essai.html
thanks again
best regards
anne

Posted on Oct. 31, 2004 12:14 #

Francesco said:

This is great, although, more and more users are heeding warnings and disabling JavaScript, so please don't use it for anything that is critical to the proper functioning of your site. Save that for server side.

Posted on Nov. 1, 2004 22:28 #

olivier said:

May I suggest a more powerful and useful form javascript?
Go on :
http://www.tdk-components.com/jobsandcareers/applicationform.htm
Submit the form, and you'll got the error message... all this is done by only 1 function...

Posted on Nov. 7, 2004 18:21 #

Geoff Stearns said:

A couple things that could be added to the list:

a function that adds other functions to the onload of the page, a a reusable Flash detect and embed script (sorry, gotta plug myself for that one :)), and the function that takes rel="external" links and makes them open in new windows (for those very few xhtml strict sites).

Posted on Nov. 22, 2004 22:20 #

Rob said:

This is interesting.

I can't figure out how it's nice enough to appear in del.icio.ustagwebdev every few days for the last 3 months tho (and in bunches), despite being dead to comments for a month.

An experiment in SEO/googlefu?

Posted on Dec. 15, 2004 00:18 #