JQuery

Creating A Reading Progress Bar In JavaScript

9th January 2022 - 5 minutes read time

Adding a progress bar to the top of the page is a simple way of showing the user how far down the page they have read. There is a scroll bar on the right hand side of the page on my current device, but that isn't always present on all devices. It is possible to hide the scroll bar on Macs and mobile devices so that they are only shown as the page is being scrolled.

Putting this piece of information at the top of the page can be a useful indicator that augments already existing technologies.

Animating Number Updates With jQuery

5th December 2021 - 6 minutes read time

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.

Inspecting And Reusing jQuery Events

19th July 2020 - 5 minutes read time

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.

Easy QR Code Generation With Google Charts API

26th April 2012 - 5 minutes read time

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.

Prevent Enter Key Submitting Forms With JQuery

15th July 2011 - 3 minutes read time

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.

Enabling The Use Of delay() In Pre jQuery 1.4

24th January 2011 - 3 minutes read time

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.

How To Check And Uncheck A Checkbox With jQuery

27th July 2009 - 2 minutes read time

To check and uncheck a checkbox using jQuery you first need to access the checkbox element using the $() function. Once you have done that you can retrieve or change the value of the checkbox quite easily.

To uncheck a checkbox use the following snippet, which makes nice use of the jQuery attribute filters:

$('input[name=mycheckbox]').attr('checked', false);

To check a checkbox use the following:

$('input[name=mycheckbox]').attr('checked', true);

To test if a checkbox is set or not use one of the following, both return true if checked and false is unchecked.

var checked = $('input[name=mycheckbox]').is(':checked');
var checked = $('input[name=mycheckbox]').attr('checked');