JavaScript custom controls

I spend a lot of time writing bespoke content management systems, a lot! I’m always trying to add some small, lightweight additions to make the user experience a little bit better. One means of doing this is by providing some better custom controls which give good user feedback and emulate similar offline controls.

Figure 1: Ordering Control

Figure 1: Ordering Control

One such control is a linear range control, catchy I know, which allows the user to select a value within a particular range with a given default value. An example of this may be selecting an ordering value for a blog post, Figure 1, ranging from say -100 to 100 with a default value of 0. Posts in our imaginary blog would be ordered by this ordering field ascending with 0 being the default value, resulting in posts being ordered automatically by date. Rather than using a plain text box to allow the user to enter the ordering value directly, subsequently giving us little or no control over the contents of the field until the form is submitted and no means to convey the nature of the field itself, we can create controls to manipulate the value ourselves.

Creating a custom control allows us to do a number of things that we just cannot do with a normal HTML form element:

Figure 2: Lower Bounds Figure 3: Non-Default Value Figure 4: Upper Bounds

Figures 2, 3 & 4: Showing lower bounds, non-default value and upper bounds

  • Display relevant information instead of certain values, such as showing Automatic at 0 in Figure 1
  • Show when the upper and lower bounds are reached, for example at -100 and 100 as per our example
  • Allow the user to reset the value to the default or previous setting
  • Give some inkling into how the control should be used

Read the rest of this entry »

New blog theme - Plainscape

PlainscapeI’ve not blogged in a while, although I have been playing with this site, testing various themes that’re out there on the web. I tried numerous dark and light varieties, some heavy on design others not so much, many of the image heavy themes looked nice initially but lacked that overall niceness. I had finally settled on iNove but I’ve since decided that it was too cluttered. Short of making my own theme up, which I never manage to get all the way through, I thought it best to find a nice clean one on the web.

After hours of painful searching this evening I managed to decided upon using the Plainscape theme. I may well configure it slightly for this blog, I may even go as far as to add a header image, but let’s not get too adventurous!

So for the foreseeable future this blog will look nice, plain and simple (it’ll probably change when I get bored but it gives me something to blog about!).
- Chris

Get multi-class elements in JavaScript

As any person who uses JavaScript for client side interaction knows, getting elements by their class is one essential thing we need to do over and over again. For the most part using a function equivalent to the one shown below will do.

Code Snippit 1: Simplistic getElementsByClass() JavaScript method

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        if (all[e].className == className)
            elements[elements.length] = all[e];
        }
    }
    return elements;
}

This function basically checks the string that is entered into the class attribute for each HTML element and returns all elements where there is an exact match.

This method will fail however if we’re trying to select elements that have multiple class associations. We need to use something more complex when, for example, creating a list of items that are filterable by class when arranged in overlapping groups. Splitting the class attribute on space characters will allow us to check for matches in these cases:

Code Snippit 2: More advanced getElementsByClass() function

function getElementsByClass( className ) {
    var all =
        document.all ? document.all : document.getElementsByTagName( '*' );
    var elements = new Array();
    for( var e = 0; e < all.length; e++ ) {
        var classes = all[e].className.split(/\s/g);
        for( var c = 0; c < classes.length' c++ ) {
            if( classes[c] == className ) {
                elements[elements.length] = all[e];
            }
        }
    }
    return elements;
}

The function above does pretty much the same as the first one, however splits the class attribute string on the spaces and loops through them, trying to match the parts individually. This should match on elements with singular and multiple class names associated with them and solve any problems with multiple classed elements.
- Chris

Suse Tips

I’ve been using Suse at work now for over a year. Once in a while I’ll find a shortcut or a handy little thing that I’ll find useful. This blog post outlines a few of the handy shortcuts and tips that I’ve picked up and never readily knew.

Read the rest of this entry »

Duckworthing

Well it’s finally happened, the pair of glasses I’ve had for going on four or five years now has finally given up.

This morning when I arrived at work and sat at my desk I did what I usually do. I took my glasses off and gave them a clean on my shirt. Usually I just put them back on and get to the nitty-gritty, usually sitting sifting through emails to find out if any of the spam is actually useful.

Today, however was a different story indeed, as soon as I placed the glasses on my face I felt a ping and then everything went blurry. I thought that the screw holding the lens into my frames had pinged out again, yes it’s happened before, but alas no! No, the actual frame had broken right at the point where the rim meets the legs, leaving a jagged edge and a confounded Chris.

Read the rest of this entry »

Adding non-Apple format movies to iTunes

I’ve been having a bit of trouble adding some movies to my iTunes library this evening - in that I’d have to convert a movie to a .mov file in order to import it at all.

A few google searches away and I’d found the answer to all my problems. If you have the Apple development tools installed (and are obviously on a Mac), you can simply change the file meta-data of the movies via the terminal in order to allow you to import them. It’s very simple to do:
SetFile -t "MooV" movie.avi

Via: AVI to iTunes on MacRumors Forums

I did, however, have to change the iTunes settings so that it didn’t take it’s own copy of the files when importing them. I have a separate Movies folder for a reason thank-you-very-much iTunes.
- Chris

R.I.P. PB

As per my previous post, I’m getting a new machine. This is due however, to some unfortunate news: my PowerBook is dead!

Read the rest of this entry »

Good Sauce

I’ve not much food in the house today and since it’s not long until payday I’m rather poor, so I decided to make whatever I could based on what I had lying around. It turned out to be a masterpiece if I do say so myself.

Read the rest of this entry »

Mac Pro

I’ve recently ordered a new Mac, a Mac Pro to be precise. It is currently en route to my gleeful embrace from Apple.
Read the rest of this entry »

You absolute beauty

The local football team in Dumfries, Queen of the South, has made club history by beating Aberdeen 4-3 in the semi-final of the Scottish Cup at Hampden today.

They’ll be in the final of the Scottish Cup on the 24th May playing either St Johnstone, Rangers or Partick Thistle.