JQuery

I was working on a user dashboard recently and decided to add some more signposting to values being updated.  Users were able to select different parameters in order to produce different values, but I thought that the values being updated weren't clear enough.

I had the idea to add some animation to the number as it was updated. This would show the user what items changed as they updated the dashboard. As the dashboard project had jQuery installed this gave me a nice animation system to use.

The HTML of the dashboard was quite simple and contained a number of div elements that contained numbers. Each of the different numbers had a id so that it could be updated independently.

Adding events to HTML elements with jQuery is pretty simple, but I found that extending those events wasn't an easy task. I was faced with an issue where I had some third party code that performed an action on an element, and I needed to add an event and call the same handler from that event. As this was within a CMS I had limited scope to just add my new event to the existing code, so I needed a way of pulling out the current jQuery events and then calling that event handler separately. This post looks at how I accomplished this.

Let's start with a couple of simple form input elements.

<input type="text" class="field-text" />
<input type="text" class="field-next" />

As an example that can be useful here I'm going to set up a 'change' event that will copy the text entered into field-text into the field-next. This is a simple enough example and doesn't require that much code.

To verify that an element exists in the DOM you just need to use the .length property of a jQuery lookup. If the element is there then the number of elements found will be greater than 0.

if ($('.myelement').length > 0) {
}

This can be shorted by implicitly checking for a positive value of length.

if ($('.myelement').length) {
}

This is useful if you want to check that an element doesn't exist before trying to add it to the DOM. This helps to stop duplicate elements being added, which can create issues.

if ($('.myelement').length == 0) {
}

When I found about the ability to create QR codes using the Google Charts API I decided to sit down and create a little tool that would generate QR codes for me. I've had this tool for a while and I recently noticed that the QR code mechanism has become deprecated. The API will still work for a couple of years so I thought it was worth posting this. Creating a static QR code using Google Charts is quite easy, all you need to do is create an image. For instance, to create a QR code for the #! code address I would do the following.

<img src="https://chart.googleapis.com/chart?chs=177x177&cht=qr&chl=http://www.hashbangcode.com/&choe=UTF-8" />

Which creates the following image.

A common practice that some users have is to press the enter key when they are filling in forms on the web. This might be when they are just moving to the next field, but the trouble is that this will submit the form.

To prevent this from happening you can simply stop the form being submitted if the enter key had been pressed. This is done by binding a JQuery event to the input elements of the form and returning false if the key pressed is enter, which has the keyCode value of 13. We also include a call to the JQuery method preventDefault() to stop the event propagating.

iFrames can be a convinent way of loading content from one domain onto another, but they do have their limitations. For example, it usually isn't possible to style the contents of the iFrame and you are therefore left at the mercy of a third party site. They also look pretty shonky if the third party site does down for whatever reason. Displaying large "page not found" statements on your page is quite unsightly.

There is a function in jQuery called load() that will use an AJAX request to load content from page onto another, and can even extract specific areas of the page and return only those parts. I thought I would run through some examples and then show how it is possible to display content from another domain on a page. Lets say we have a PHP file on the server that generates a random number, this would be the following very simple code.

The other day I was trying to convert a HTML template into a CMS system and I found a stumbling block with the use of the jQuery function delay() in the template's JavaScript. During part of the templating process I found the following error occurring on the page.

Opening external links in a new window can be useful, but adding target="_blank" can be a real chore. Not only that, but if you are trying to validate the page to XHTML strict then the target attribute will cause errors to appear as it is not defined in XHTML.

An easy solution to this issue is to add the following JQuery to your site. It will look for any links that start with http and do not contain the current domain and add a new click event to them that causes a new window to be opened. This will exclude most links straight away as they will most likely be relative.

If you have a large page or form that uses validation on it then you will probably want to tell the user that something is going on. One way to do this is by telling the user at the top of the page that something has gone wrong and then letting them figure out where.

A more elegant solution is to scroll the page down the just above the first error message so that the user is aware of what they need to fill in. This can easily be done through a combination of jQuery and the ScrollTo plugin.

The first thing you need on the form is add some tags as the error output elements. Make sure that these tags don't get printed if there are no errors. I have chosen to use p tags with the class of error. Download this plugin and include it within your page.

Using something like CrossSlide is fine if you want fancy effects in your image translations, but for more simple effects you can use a single function to simply swap one image for another. First, lets create some simple markup that will allow us to display some images.