JavaScript

If you want to directly edit any page that you are looking at then copy and paste the following JavaScript into your address bar.

javascript:document.body.contentEditable='true' document.designMode='on' void 0

I have created a handy little bookmarklet that you can use to do the same thing.

Edit

This code has been tested in IE7, Firefox and Chrome and works well in all three.

Of course, it goes without saying that you don't actually edit the site, just the content that you see on the screen. Hitting refresh will remove any editing that you have done. This little tool is ideal if you want to see what different content would look like on the page without having to edit HTML. It can also be used to create spoof pages with false content.

Use the following function to pad a string with to a set length with a given string. The function takes three parameters. The string to be padded, the total number of characters that the string must be, and the string to be added. If the third parameter is not given then 0 is used as a default.

function pad(padMe, totalChars, padWith) {
  padMe = padMe + ""; // force num to be string
 padWith = (padWith) ? padWith :"0"; // set default pad
 if ( padMe.length < totalChars ) {
  while ( padMe.length < totalChars ) {
    padMe = padWith + padMe;
  }
 }
 return padMe;
}

Here are some examples of the function in action. If the string given is longer than the required pad length then the string is returned unchanged.

Counting the number of words in a block of text can be tricky. Users tend to create sections of white space that can throw out most scripts that don't take this into consideration.

I have created a tool for #! code that looks at a textarea of a form, and prints the number of words into an input box in the same form. The textarea calls a function called textCounter() every time a key is pressed. Here is the HTML of the form.

<form onsubmit="return false;" action="" id="wordCountCalc">
<textarea name="message1" rows="10" cols="68" onkeydown="textCounter()" onkeyup="textCounter()"></textarea>
<input readonly="readonly" size="15" type="text" name="len" maxlength="10" value="0" />
</form>

The function works by removing any white space from the start of the text. It then removes any tab characters from the text before splitting the text by one or more white space characters.

The MooTools slider is a good little application, and creates a reliable means of adding in a slider tool to a site. However, one thing that the MooTool slider is missing is a block that covers what is on the left hand side of the slider, before the handle.

Create a page with the following HTML.

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.
</textarea>
</form>

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.

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.moveTo(0,0);
 window.resizeTo(screen.availWidth, screen.availHeight);
}

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

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.

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.

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.

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.