JavaScript

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.

I have seen a lot of this sort of thing, so though I would put together a quick lesson in JavaScript variable scope. There are some important differences between local and global variables in JavaScript that will cause grey hairs if you don't know what's going on.

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.

One new feature of Drupal 7 is that any title you give a node will be copied to the menu title field when you create a menu item. I wanted to replicate this functionality in Drupal 6 and so I created a function that did just that. I have used this function a few times in different projects so I'm posting it here.

Changing the text of a submit button when clicked can be useful if you are writing an AJAX application or you know that there will be some sort of delay. Providing the user with some form of feedback is a useful way of letting them know they they have done something.

First, we need a form to work with, so I built a quick one here. Notice that the submit button has an onclick action associated with it, this will be used later to enable us to alter the text of the button.

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.

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.