This is quite a well known but under used technique for highlighting your form elements without any JavaScript. By using the CSS property focus you can apply style to a form element when it is clicked, also know as focus.

Example:

The HTML

The HTML is really simple all you need is a input box:

<input type="text" />

The CSS

The css can be approached by one of two ways you could either apply a class name to any form element which is applicable.

input:focus.yourclassname { background-color: red; }

or you can use the CSS selectors to highlight every form like this.

input[type="text"]:focus { background-color: red; }

The focus selector only works in the modern browsers, and not ie7 and below. if you want this to be compatible with ie6 use this javascript, along with prototype.

$$('input[type="text"]').each(function(element)) {
   event.observe(element, 'click', function() {
     element.toggleclassname('yourclassname');
   });
 });

Prototype has a very useful function which is not well documented, Element.inset. Element.insert is a very powerful prototype function which lets you insert a element in one of 4 positions, before, after, top, bottom of an element.

Syntax:

Element.Insert(‘element you inserting to’, {where: element your inserting})

The Script.aculo.us effects library is a fantastic add on for Prototype. If this tutorial I will show you how to utilise the scroll method to create a handy ‘jump to top link’.

Step 1: Add References

Make sure you the Prototype and Script.aculo.us libraries are attached to your web page, instructions for how to do this can be found here.

Step 2: Create JavaScript

You can either create a new JavaScript file or append these functions to an already existing one. So first of all we need the function to bind our jump to top link onto. We only want to bind the event once the document is loaded, which saves us from using any nasty onclick events.

The ScrollTo effect can be called in one of to ways:

• new Effect.ScrollTo(‘div_id’, {..options..}), or
• $(‘div_id’).ScrollTo({..options..})

Where ‘div_id’ is the id of the div you want to scroll to.

ScrollTo Options:

- Taken from http://github.com/madrobby/scriptaculous/wikis/core-effects

In your JavaScript file you can now add this:

// wait for the page to load
Event.observe(document, 'load', function(){
// give an object an onclick method
$('go_to_top').observe('click', new Effect.ScrollTo(‘div_id’, {..options..}));
});

Step 3: Add HTML

Finally an id of ‘go to top’ will have to be added to your go to top link.

<div id="go_to_top"></div>