JavaScript

Creating a simple highlight effect is quite easy when you use the JavaScript framework mootools.

The first thing to do is grab the mootools library from the site and link it in your web page. You can select different components with mootools, but if you grab the whole thing you can start to play with whatever you want. Put this line of code in the head section of your web page.

<script type="text/javascript" src="mootools.js"></script>

For this example I want the highlight to occur when the page has finished loading. So I use the window.addEvent function to add an action for the 'domready' event to the window object of the page.

Detecting the user agent in JavaScript can be important due to the way in which different browsers implement JavaScript. Sometimes it is necessary to create logic to do one thing in Firefox and another thing in IE. Luckily, all modern browsers support the navigator.userAgent property so that is a good start.

Because it is possible to mask your user agent in Opera it is necessary to detect this browser first. There are actually two different ways to hide the user agent in Opera. The default user agent is as follows:

Opera/9.23 (Windows NT 5.1; U; en)

It is possible to identify Opera as either Firefox or Internet Explorer. In this case the version of Opera is appended to the end of the user agent string so it is still possible to detect if the user has Opera and act accordingly.

Identify as IE

Having a Marquee on a web page is a nightmare from an XHTML validation point of view, so here is a neat function that will produce the same effect as a vertical scrolling marquee, that passes XHTML validation, and built entirely from JavaScript and CSS.

Vertical Scrolling

Take the following HTML code. Don't worry about reading it. It is just 7 p tags (2 of which act as spacers) contained within a div tag.

Here is a simple function that makes text in a tag fade into one colour slowly before quickly fading back into the original colour. If the background is the same colour as the text then the text will appear to fade in and out.

Letting the user now that something in the background is working is an essential part of website usability. If nothing at all happens then the user will more than likely either try again or go elsewhere. A good way of doing this is to have a little bit of text that says "Working" and animate dots behind it. Here is a function that will do this.

var strDots = '';
var dotLength = 10;
var timeout = 500;
function dots()
  { 
  strDots += '.';
  if ( strDots.length == dotLength ) {
    strDots = '.';
  }
  document.getElementById('working').innerHTML = "<b>Working"+strDots+"</b>";
  dotTimer = setTimeout('dots()', timeout);
}

You then need to add the following bit of HTML to your page to start the dots off. The first one will print off:

Working

Followed by:

All of the maths functions in JavaScript are kept in a handy object called Math, which contains a number of different functions.

To get the absolute value of a number use the abs() function.

Math.abs(3.14159265) // returns 3.14159265

Rounding a number is done by either the round() function to round to the nearest integer, the ceil() function to round up to the nearest integer and the floor() function to round down to the nearest integer.

Math.ceil(3.14159265)    // returns 4
Math.floor(3.14159265)   // returns 3
Math.round(3.14159265) // returns 3

To find the exponent of a number use the exp() function.

Math.exp(3.14159265) // returns 23.140692549708973

The log() method returns the natural logarithm (base E) of a number.

To set up multiple Google Analytics tags on the same page you need to use the _uff = false; command in between the unchinTracker() calls to reset the tracker for the next account. The urchinTracker() function will send information on the page visit off to Google Analytics.

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
  _uacct = "UA-XXXXX"; // First account details
  urchinTracker();
  _uff = 0; // Reset tracker for second account
  _uacct = "UA-YYYYY"; // Second account details
  urchinTracker();
</script>

You can do this for as many accounts as you like, but be aware that there will come a point when there will be a noticeable delay on the site when the calls to Google Analytics are done so don't do too many.

Creating user interfaces in JavaScript can sometimes lead to a problem, especially when the interface used AJAX to load data from the server. As many actions will be event driven by the user you can find that when a user triggers lots of events all at once the browser will send out lots of AJAX requests all at once. This can easily cause bandwidth issues but can also lead to the user getting confused while they patiently await the browser to settle down and let them get on with things.

There are numerous way to get around this issue, the first being to design programs so that AJAX requests are only issued when the user has clicked on something or when they start typing

The for loop in JavaScript can be used to iterate through all items in an array or properties of an object. This makes looping through any object or array very easy. As in the following example that printing out all items in an array.

var count = '';
var numbers = new Array(3);
numbers[0] = 42;
numbers[1] = 13;
numbers[2] = 73;
for(i in numbers){
  count += numbers[i]+' ';
}
alert(count);

The three main objects to do with a JavaScript are navigator, window and document. Although window is part of navigator and document is part of window. So to print off all information to do with a browser you can do the following. Note that some items in window and document can cause JavaScript to crash in some browsers so some error detection is included here.

Creating a new Draggable object with the script.aculo.us framework is easy. You just create a new instance of the Draggable object with the element id to be made draggable as the first parameter and a set of options as the second.

<div id="dragMe"></div>
<script type="text/javascript">
new Draggable('dragMe',{revert:true});
</script>

The revert option will make the draggable element move back to the position it started from. More options can be added by separating them by commas, so to enable ghosting on the element as well as revert use the following.

new Draggable('dragMe',{revert:true,ghosting:true});

Ghosting means that when the element is dragged a ghost copy of the element moves with the mouse, where the original stays where it is until the mouse is released.