JavaScript

This is a simple trick that will allow users to select the contents of a text area. First we need a text area.

<form><textarea name="textarea1" id="textarea1" rows="5" cols="40" wrap="off">This is some
long content.
This is some long content.
This is some long content.
This is some long content.
</textarea>
<br />
<input type="button" value="Select text" onclick="selectText('textarea1')">
</form>

This form also includes a button with an on click event that runs a function. This function takes a single parameter as the name of the element. It then sets the focus to this element and then selects all of the text therein.

When a user presses the tab key in a browser window the normal action is for the user to move the focus to a different control. To enable a word processor like tab effect in a text area you need to catch the keystroke and add in the tab character to where ever the cursor is. This is the main issue with creating this solution, it is easy to add a tab to the end of the text, but most users might want to add a tab half way through the text.

Take the following HTML text area.

<textarea name="content" class="textarea" id="content" rows="20" cols="65"  wrap="on" onKeyDown="return catchTab(this,event)"></textarea>

When a keystroke is detected it runs the catchTab() function. This function detects if the keystroke is 9 (which means it is a tab) and runs the function called replaceSelection() in order to find out where the cursor is and replace the text that exists there.

In order to submit a form using an event you need to run a click event on any submit button in the form. Take the following form.

<form method="post" onsubmit="alert('Form submitted!'); return false;">
    <input type="text" name="testvalue" value="" />
    <input type="submit" name="submit" id="submit" value="Submit" />
</form>

To run a submit event using JavaScript we just find the submit button via the id and run click() against it.

document.getElementById('submit').click();

That's it!

The following section of JavaScript will detect if anyone is viewing your page in a frame. If they are then the code will redirect them to your site. It essentially stops people using frames to poach your content and stops online proxy software from viewing your site.

if (top.location != location) {
 top.location.href = document.location.href;
}

All you have to do is include this code either in your script tag or your JavaScript includes. Quite a neat little trick really.

To get the class of an element with JavaScript you use the className property of the element object. Take the following section of HTML code.

<div id="adiv" class="theClass">some text</div>

Use the following bit of code to print off the class name of the div element in a message box.

alert(document.getElementById('adiv').className);

To set the class name to something else you can use the same property, but in this case just pass it a value. The following example changes the class name of the div element to 'newClass'.

Script.aculo.us is a JavaScript framework that allows you to add effects and advanced JavaScript features to any web page. Although Script.aculo.us can be a little slower than Mootools on occasion it makes up for this by having more stuff built into the library components. For example, the slider control is available of both frameworks, but the Script.aculo.us version comes with some handy features (like filling one part of the slider) where the Mootools version doesn't.

A good usability feature of web forms is to fill the contents of one drop down menu, depending on what has been selected in a previous menu. This can be done quite easily with JavaScript.

Take the following form, in this instance I have used some server variables used in mod_rewrite, but the idea is valid.

If you have lots of check boxes in a row a handy little usability trick is to allow a user to click on a button and check all of the checkboxes at once. The following function will either check or uncheck all of the check boxes in your form.

function check_uncheck(truefalse){
 var boxes = document.forms[0].chkboxarray.length;
 var form = document.getElementById('checkForm');
 for(var i=0;i < boxes;i++){
  if (truefalse) {
   form.chkboxarray[i].checked=true;
  } else {
   form.chkboxarray[i].checked=false;
  }
 }
}

All you need to do is to add two buttons to your form that will allow users to either check or uncheck the boxes on the form. The function takes a single parameter, which is what to set the value of the check boxes to, so one button is needed to set them to checked and one to unchecked.

Firebug is by far the best JavaScript debugging plug-in available for Firefox. I have been stuck on a few problems in the past and Firebug has usually provided me with a reason as to why things are going wrong. In fact when developing for other browsers (like Internet Explorer) I can feel a little blind as there are no debugging tools with the power and features of Firebug. It can allow you to stop JavaScript execution at any time using breakpoints.

Firebug is important if you are creating AJAX applications as it will tell you about every client/server communication, what headers where sent and what the response was.

If you are looking for information about the MooTools JavaScript framework then your first stop should be the MooTools home page. The site not only allows you to download MooTools, but it is also a great resource for learning how to use MooTools.

There are examples of all the things you can do on the demo page, and information about all of the classes available in the framework on the documentation pages.