JavaScript

Randomise JavaScript Array

4th July 2008 - 4 minutes read time

Randomising a JavaScript array can be done in one or two ways. The easy way is to create a function that returns a random number and then use the sort() function of the Array object to sort the array by a random value.

// random number
function randNumber(){
 return (Math.round(Math.random())-0.5);
}
 
// create array
var numbers = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
// print array
alert(numbers);
//randomise array
numbers.sort(randNumber);
//print random array
alert(numbers);

The sort function works by taking the randNumber function as a parameter. For every item of the array it uses this function to compare one value to the next. If the function returns a random number then the array will be sorted randomly.

The second method is slightly more complex and involves using the Fisher Yates randomising algorithm. The following function takes in an array and returns a randomly sorted array.

JavaScript

Merge Two JavaScript Arrays

3rd July 2008 - 2 minutes read time

Here is a simple bit of code that you can use to merge one or more arrays. The function you need is called contact().

Take the following two arrays, both of which contain numbers.

var array1 = new Array(1,2,3,4);
var array2 = new Array(5,6,7,8);

To join these two arrays together we use the concat() function like this.

array1 = array1.concat(array2);

The variable array1 now contains the contents of both arrays.

JavaScript

Loading Page Styles And JavaScript With JavaScript

2nd July 2008 - 5 minutes read time

One good technique when using JavaScript is to load a single JavaScript file and get this file to load any other JavaScript or CSS documents that are needed. This means that you can simplify the instillation of a script on a page by including a single file, which then loads everything else it needs. Here is how to accomplish such a task.

The basic idea is that you add the references you need to the DOM structure of the document. Let's say that we want to load a CSS file called styles.css. To do this at run time we need to create a <link> element and give it some parameters before adding it onto the end of the <head> element of the page. Here is the code needed to do this.

JavaScript

Using JavaScript To Select Textarea Text

1st July 2008 - 3 minutes read time

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.

JavaScript

Enabling Tabbing In A Textarea

20th June 2008 - 5 minutes read time

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.

JavaScript

Submitting A HTML Form Using JavaScript

19th June 2008 - 2 minutes read time

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!

JavaScript

JavaScript To Stop Frames

27th May 2008 - 2 minutes read time

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.

JavaScript

Assign Or Get Class Name Attribute With JavaScript

24th May 2008 - 4 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.

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'.

JavaScript

Script.aculo.us - Web 2.0 Javascript

11th May 2008 - 3 minutes read time

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.

JavaScript

Linked HTML Drop Down Menus With JavaScript

8th May 2008 - 3 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.

JavaScript