JavaScript

Posts about the client side scripting language JavaScript.

Assign Or Get Class Name Attribute With JavaScript

24th May 2008 - 2 minutes read time

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.

Linked HTML Drop Down Menus With JavaScript

8th May 2008 - 2 minutes read time

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.

Check Or Uncheck All Items In A Checklist With JavaScript

6th May 2008 - 2 minutes read time

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.

Using JavaScript To Run Form Events

13th March 2008 - 2 minutes read time

Creating a form as part of an AJAX control is a common practice, but when you include a submit button within the form the default behaviour of the form is to redirect to the destination supplied in action. To run a form using JavaScript you need to include two things.

<form action="javascript:return false;" method="post" id="analysisForm" >

In order to overwrite the normal operation of a form you will need to replace the action attribute with some JavaScript code that returns false. This is can be done in the form of come in-line JavaScript code (commonly called a bookmarklet) in the place of any URL in the action attribute of the form.

JavaScript Simple Loop Optimisation

18th February 2008 - 3 minutes read time

When writing JavaScript applications I normally write for loops like this.

  1. for (var i = 0; i < elements.length; ++i) {
  2. // loop...
  3. }

There isn't anything wrong with this, but it is not an efficient way of doing things. All it takes is a little knowledge of what the for loop does every time it runs. The loop can be split into three sections like this.

Generic User Agent Detection In JavaScript

8th February 2008 - 4 minutes read time

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

JavaScript Scrolling Box Marquee Replacement

29th January 2008 - 13 minutes read time

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.

Some Useful Maths Functions In JavaScript

14th January 2008 - 4 minutes read time

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.

Multiple Google Analytics On Same Page

10th January 2008 - 1 minute read time

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.

Postponing Code Running In JavaScript

4th January 2008 - 4 minutes read time

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