Posts about the client side scripting language JavaScript.

JavaScript Logo

Highlight The Contents Of A Textarea With JavaScript

27th August 2008 - 2 minutes read time

If you want to give your users a little snippet of code it is nice to give them the option of selecting the entire block of code without having to highlight the text manually. This can be done with a simple JavaScript button.

Take the following form:

<form name="aForm">
<textarea name="aTextarea" cols="50" rows="20">
Copy this text onto your own website.

To enable the selection functionality you just need to add in an input button. The click event of this button will be to run a JavaScript bookmarklet that focuses on the textarea in question (in this case it is called aTextarea) and selects the text.

Read the full article

JavaScript Logo

JavaScript Crazy Window Zoomer

26th August 2008 - 3 minutes read time

I really don't know how this would be useful, but it might teach you a couple of things about how to use the browser window functions and properties.

The following function resizes the browser window to nothing and then gradually increases this to full screen in a series of steps, at each step the window is moved so that it is in the middle of the screen. This in effect makes it look like the browser window is zooming in.

function warpSpeedWindow(){
 for(i = 0;i < 50;i++){
  window.moveTo(screen.availWidth * -(i - 50) / 100, screen.availHeight * -(i - 50) / 100);
  window.resizeTo(screen.availWidth * i / 50, screen.availHeight * i / 50);
 window.resizeTo(screen.availWidth, screen.availHeight);

You can call this function on the page load by using the following:

Read the full article

JavaScript Logo

Format Numbers With Commas In JavaScript

31st July 2008 - 5 minutes read time

I found a good function that details how to format numbers with commas in JavaScript and thought I would reproduce it here. It basically takes any number and turns it into formatted string with the thousands separated by commas. The number_format() function is available in PHP and I have been relying on PHP to sort out the formatting before returning it via an AJAX call. I can now include this function into my JavaScript library and do this on the client side.

The function works by using regular expressions to first split the string into whole number and decimal, before splitting the number by groups of three digits.

The regular expression used is (\d+)(\d{3}), which looks for a sequence of three numbers preceded by any numbers. This is a little trick that causes the regular expression engine to work from right to left, instead of left to right.

Read the full article

JavaScript Logo

Adding Numbers In JavaScript

28th July 2008 - 3 minutes read time

You think I'm joking right? Well, due to a silly mistake (in my opinion) when creating the language the concatenation character is the same as the plus symbol. This means that sometimes JavaScript will add them together and sometimes it will concatenate them.

This occurs if JavaScript encounters any part of the calculation to be a string. If it is then it will concatenate the whole expression. For example.

alert("1"+2+3);// prints out "123" rather than 6

To stop this you need to add the parseInt() function to the part of the addition that might be mistaken as a string. Or the whole thing just to make sure. The following is a bit of an overkill but ensures that the values will be added, NOT concatenated.

Read the full article

JavaScript Logo

Randomise JavaScript Array

4th July 2008 - 3 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
//randomise array
//print random array

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.

Read the full article

JavaScript Logo

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.

Read the full article

JavaScript Logo

Loading Page Styles And JavaScript With JavaScript

2nd July 2008 - 4 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.

Read the full article

Using JavaScript To Select Textarea Text

1st July 2008 - 2 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.
<br />
<input type="button" value="Select text" onclick="selectText('textarea1')">

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.

Read the full article

JavaScript Logo

Enabling Tabbing In A Textarea

20th June 2008 - 4 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.

Read the full article

JavaScript Logo

Submitting A HTML Form Using JavaScript

19th June 2008 - 1 minute 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" />

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


That's it!

Read the full article