JavaScript

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.

I quite often find myself needing to know how long a string is, especially when testing form validation or when trying to write a page description. I therefore like to have this little tool to help me by simply counting the number of characters in a given string.

Use the JavaScript text length tool here.

The tool uses a single form with a textarea and a text box. The textarea has onkeyup and onkeydown events which causes it to call a function that counts the number of characters and enters this into the text box.

If you want to create a link that performs an action that can't be rolled back then you might want to stop the user from clicking that link unless they really want to. The best way to do this is to intercept the link with a confirm() command.

The first way to do this (and especially useful if you want to ad other functionality) is to use the following function.

function confirmDelete(delUrl) {
 if (confirm("Are you sure you want to delete")) {
  document.location = delUrl;
 }
}

For each link that you want to use this function on just replace the href with a simple bookmarklet like the following, pass the URL you want to use within this function call.

After running coding sites for a couple years there is one little problem that really annoys me, so when I set up #! code I resolved to fix it. The issue arises when you use some JavaScript based analytics software that allows multiple domains to be used, like Google Analytics. There is nothing wrong with analytics software that allows this, and it is potentially useful for tracking all manner of things. However, some web masters might not be that good at running sites and will lift code from your site (analytics and all) in order to implement a single widget on their site. What this means is that when a user lands on one of their pages it will register as a hit on your site.

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');

I had the need to create a time selecting component for a form, but I didn't want to have lots of extra components. After a little bit of searching about I found the following JQuery UI plugin called timepicker.

This plugin will take a input box as the argument and will add three selection boxes for hours, minutes and seconds. It will then hide the original input box.

However, there were two things that I needed that this plugin didn't do. The first is that it was in a 12 hour format and the second is that the plugin didn't have a second selection. So I decided to adapt that plugin in order to incorporate these things.

Here is the modified plugin.

I have already talked about a JavaScript function that rounds To the nearest number, but this was only useful if the number needed to be to the nearest 10 (or factor of). The following function is similar, but will round the number to the nearest 5 or 10, depending which is closer.

function round5(x)
{
    return (x % 5) >= 2.5 ? parseInt(x / 5) * 5 + 5 : parseInt(x / 5) * 5;
}

Use the function like this:

alert(round5(12)); // returns 10
alert(round5(14)); // returns 15

The JavaScript Math.round() function will round a decimal to the nearest whole number, but I found that I needed was to round a number to the nearest 10. So after a bit of thinking I realised that I could divide the value by 10, round it using the round() function and then multiply the result by 10.

So taking it a step further I decided to create a function that would round a number to the nearest 10, 100, 1000 or whatever value is entered. If this value is less than 0 then do the reverse by multiplying and dividing the number by the given value of accuracy. Here is the function.

function roundNearest(num, acc){
    if ( acc < 0 ) {
        num *= acc;
        num = Math.round(num);
        num /= acc;
        return num;
    } else {
        num /= acc;
        num = Math.round(num);
        num *= acc;
        return num;
    }
}

Here are some tests of the function.

If you are familiar with PHP you will have come across the for loop at some point. When learning JavaScript it is important to remember that it also has the ability to do the equivalent of the PHP forloop.

The following snippet shows the creation of an array of things that can't be referenced by a normal for loop due to the odd numbering of the keys.

var arrThings= new Array();
 
arrThings[3] = 'thing 1';
arrThings[42] = 'thing 2';
arrThings[47] = 'thing 3';
arrThings[32] = 'thing 4';
 
var output = '';
 
for ( var thing in arrThings ) {
 output += arrThings[thing];
}

alert(output);

The variable thing is now the iterator and will iterate through each element of the array. By using this code you no longer have to include code that thinks about the length of the array.

If you are running a JavaScript example page you can use the following function that will take the last script element on the page and print it out in a code tag. It uses JQuery to do the work, so you will need to include that library before using this function.