I’ve created a short video to help explain what the issues are when writing JavaScript functions inside loops and how to use function scope to solve those issues. Enjoy.

Full screen it in order to read the code.

I’ve blogged before about giving users of a web application feedback on the page whilst they wait for something to load and also about slowing down the responses from AJAX requests in order to give those users time to fully read and understand that feedback. I’ve recently built some more code to help achieve this. This is a jQuery extension.

If you’re going to use AJAX to load some content into the page as the user requests it then it’s a good idea to tell the user what is happening. This is often done with some sort of message on the page saying something like “stuff is loading here, won’t be long”. Also it’s a good idea for the round trip to the server and back to be quick because you don’t want your users to be waiting all day long. However, if the round trip is less than half a second then the user probably didn’t get time to read that message and, depending on the scenario, this could lead to an un-happy web experience.

So I have some code that extends the jQuery AJAX ‘post’ and ‘get’ functions so that we can invoke them but ensure that our success callback function isn’t invoked until at east the N number of milliseconds that we have set have passed.

So the process is as follows:

• User clicks a button to request some information.
• JavaScript is called and immediately puts some sort of loading message on to the page.
• A post or get request is made using my extension and is asked to wait at least 500 milliseconds before the success callback function is invoked.
• If the request takes less than 500 milliseconds then the remainder is set to pass before invoking the success function. If the request takes longer than 500 milliseconds then the success function is invoked as soon as the request returns.
• The success function removes the loading message from the page and replaces it with the content the user asked for.

This ensures that the user had time to understand the feedback on the page but also ensures the data they requested get’s displayed to them as soon as possible after.

Check out the demo page to see this working.
Download the source to start using it yourself.

I have just updated my SimpleModal JavaScript component and released it as version 2. You can read about the script and download it from it’s page here.

I’ve just improved it a little to better support newer browsers and tested in the latest jQuery version.

I’d like to mention that I’ve been using this script in all of my web projects for years now. It’s simplicity makes it so flexible which I think is why it’s stood the test of time for me.

I built this whilst watching Britain’s Got Talent yesterday. I wasn’t enjoying the show to much. It’s a simple jQuery plugin that you can attach to textarea or input elements which will limit the amount of characters that are allowed for the input and also show a counter in the top right corner to indicate the character count.

All you need is the CSS and JavaScript on your page then attach it to something like this;

$(textarea).charCount(100);

Visit the demo page to have a go or download the source.

We have recently moved towards the use of HTML 5 at my work. For those who have done the same you will already know of the extra work you need to do before HTML 5 will work in Internet Explorer browsers. The way we did it, which is probably the way most people do it, was to add the html5shiv script onto the web page if IE browsers are being used. This script will get you up and running unless you need to AJAX HTML 5 content into the page. That content will not get parsed and so will not behave properly. The answer to that is another script called innershiv which provides a function to pass HTML 5 content to and receive that content back parsed ready for IE browsers.

Both of these scripts are really useful and for most people they are pretty much the difference between making use of HTML 5 or not. The one problem that remains is all the extra work needed to run HTML content through the innershiv function at the end of every single AJAX request in IE browsers. It’s a lot of work! So for those of you who use jQuery I can show you how to tell jQuery to run all content from AJAX requests through innershiv automatically for IE so that you don’t have to do any more coding than you normally would.

<!–>
<script type=”text/javascript”>
jQuery.ajaxSetup({
dataFilter: function(data, dataType) {
if (typeof innerShiv === ‘function’ && dataType === ‘html’) {
return innerShiv(data);
}
else {
return data;
}
}
});
</script>
<!–>

This script will work if the browser version is IE8 or lower and relies on jQuery, html5shiv and innershiv all being on the page.

I haven’t tested this code a great deal so far, it’s something I built today. It appears to work very well on the web site I’m currently building. All comments welcome as always!

I have updated my previous auto suggest box plugin for jQuery. It has been a long time coming, the improvements are a combination of feedback received by others and things I have wanted to do for a while myself.

The main points of improvement are;

• Updated for jQuery v1.4.x
• Support for jQuery themes. Takes on the same styling from themes for jQuery’s own autocomplete ui component.
• Better support for being able to use data requested from a URL.
• Improvements in the UI for navigating the results set.

jQuery have their own autocomplete ui widget which I used for a few projects to see if it suited me better than my own. I do really like jQuery’s autocomplete widget as it pretty much does everything that mine does! The only thing extra with mine are a few added options, images that can more easily be displayed in each result and separated markup for extra, non searched, text in each result. For me that was enough to do a few upgrades to my own plugin to bring it more up to date.

So to get the best of both worlds I have updated my plugin to an all new version 2. There are some differences in the setup of the plugin so go check out the demo page to see examples. Most often it will come down to these two choices;

$(‘input#suggestBox’).jsonSuggest({data: jsonData});

or

$(‘input#suggestBox’).jsonSuggest({url: ‘http://mysite.com/get_some_data.json’});

Here are all the options when setting up the plugin;

Name
Default
Description

url
”
A URL that will return a JSON response. Called via $.getJSON, it is passed a data dictionary containing the user typed search phrase. It must return a JSON string that represents the array of results to display.

data
[]
An array or JSON string representation of an array of data to search through. See Examples.

minCharacters
1
Number of characters that the input should accept before running a search.

maxResults
undefined
If set then no more results than this number will be found.

wildCard
”
A character to be used as a match all wildcard when searching. Leaving empty will mean results are matched inside strings but if a wildCard is present then results are matched from the beginning of strings.

caseSensitive
false
True if the filter search’s are to be case sensitive.

notCharacter
!
The character to use at the start of any search text to specify that the results should NOT contain the following text.

maxHeight
350
This is the maximum height that the results box can reach before scroll bars are shown instead of getting taller.

width
undefined
If set this will become the width of the results box else the box will be the same width as the input.

highlightMatches
true
This will add strong tags around the text that matches the search text in each result.

onSelect
undefined
Function that gets called once a result has been selected, gets passed in the object version of the result as specified in the JSON data.

Download the source
Visit plugin page at jQuery
Demo page

Tested to work in the following browsers;

• IE8, IE 7 & 6
• FireFox
• Opera
• Chrome
• Safari
Continue Reading »

Have you used Goggles? If not then go try it, have a lot of fun, then come back to read this blog post when you’re finished.

Goggles is great fun but good intentions aside the thing attracts a lot of abuse. For example, visit some of the popular sites on the internet then switch on Goggles and you’ll soon see the hatred that people express while safely masked away.

Here is a script that you can happily place on your web sites to block Goggles if you happen to manage a web site that might attract such abuse.

(function() {
window.setInterval(function() {
if (typeof activateGoggles === ‘function’) {
activateGoggles = undefined;
location.reload();
}
}, 500);
}());

I’ve been reading about HTML 5 and the new JavaScript API’s for it just recently. I liked the new video stuff so thought I’d have a go at doing something with it. So as a bit of an experiment I have created a pretty simple video tagging app.

It allows you to click in the video to tag an area of the screen at a particular playback time. You can then click the list of tags to go see where they are in the video.

As I said, it’s just an experiment and at the moment only works in chrome, firefox and opera. It would probably also work in safari apart from I didn’t have that video encoded in H.264. Go have a play!

Since I posted last about the SVG Sketch page I have added some new features to it. I added the ability to post your sketch and then view it along with other peoples sketches in the gallery. I just thought it would be fun to be able to see sketches that others have drawn. So far it’s just been a few of us at work posting sketches when we’re procrastinating!

Take a look: svgsketch.tomcoote.co.uk

We have been playing (eh hem… working) with SVG in the office just recently for a client. I can’t really talk about the client work we are doing apart from saying it’s pretty damn cool. Besides that, we have been dreaming up some other playful idea’s using SVG and I’m going to show one of them here. Steve initially came up with this idea along with the phrase “get it done” followed by “is it done yet?” a few seconds later.

It’s an SVG sketch game. I built it using the wonderful Raphael JavaScript library which enables you to dynamically build SVG elements in a document using JavaScript.

It has some really cool touches like having to shake it to clean away your current drawing. You can use your keyboard arrow keys or click the buttons with your mouse to work it. There isn’t really much more to say other than to go and have a look at it. Check out the JavaScript if you’re interested in knowing how it’s working.