Preventing Users Entering Certain Characters

Finding an Element's X and Y Position

The following JavaScript function will return an array containing the X position of an element's left edge, the Y position of the element's top edge (these two are the element's top left corner), the element's right edge's X value and its bottom edge's Y value (and these two are the element's bottom right corner). To demonstrate it, the following mouse handler has been attached to the page. Click on any item to see a pop-up window with the clicked-on element's co-ordinates. Thanks to quirksmode for the basics of the above getCoords() function.

Preloading Images

Many web sites load images dynamically in response to user actions, e.g. changing an image when the user hovers over an element. Usually the image that you're changing to will need to be fetched from the server, and this will result in a delay between the user action and the image actually being changed.

In some cases, you can circumvent this whole issue by using a single background image that is moved by changing background-position through CSS hover selectors. In other cases the best way to enhance your user experience is to preload images.

To do this, we can create a JS Image object for each image we want to preload. We set each Image object's src attribute to a different image URL, and then, crucially, we wait for each of them to complete loading.

Here's the code:

Trimming Whitespace with Javascript

Here is a quick Javascript trim() function. Pass text to the function and it returns the text with leading and trailing whitespace removed. Spaces, tabs, and line-breaks before and after the text are stripped out. Click the HTML View button in the top-right corner of the code view below to try it out: The key elements of the function are two 'empty' for loops. The two loops contain no code and their purpose is simply to locate the first non-whitespace character and the last, respectively. The first loop loops while the character pointed at by first_nonwhite is one of the whitespace characters. It starts at the beginning, and advances one character at a time up to the end or the first non-white character.

The second loop does a very similar thing, but this time looking for the last character of text which is non-white. To do this it starts at the end, and moves one character at a time towards the beginning, stopping at the first non-white. If no non-white characters were found by the first loop, this second loop won't do anything.

The text we want to return is everything that falls between the first non-whitespace character and the last. We get this using the substring(i, j) method, which returns the string between the ith and the jth character. (There's a similar method called substr(i, j), which returns the string which starts at the ith character and is j characters in length.)