Chris Bolson – I digress

Mootools Splash Screen

Feb 2

Posted by Chris in Code, Mootools, Scripts | 6 Comments

Every now and then you get a client that absolutely insists on having a “splash screen“. However hard you try to convince them that it is not good for SEO (search engines like content and links) or for visitors (after all, you are wasting their time), they refuse to see it your way and insist on having it.

I had one of them this week and, rather than spending the time and energy on trying to persuade the client, I decided to have a go at making one with my favorite javascript Library – Mootools

To this end, I came up with the following class. It is really quite simple and could no doubt be improved and features be added but I thought that I would share it anyway.

See Demo

Read the rest of this entry »

Tags: class, Mootools & Web Dev

Expanding Multiple Select List with Search Filter

Jan 7

Posted by Chris in Code, General, Mootools, Scripts | 3 Comments

A short while ago I wrote a elasticMultipleSelect class that allowed you to set a fixed width on a multiple select list via css to maintain the general design of the page and then, when the select list receives the focus, it expands out horizontally to the width of the widest (longest) option.

I did this initially to a clients specific requests however the final brief was rather more complicated. They also needed be able to search through the options as the user typed to filter out the non-matching options.

Of course I suggested that this would be best done with a simple ajax list that retrieved the matches as the user typed but for varios reasons this was not viable, mainly due to the fact that they also wanted to be able to use the default multiple select list functions. To make matters worse, it *had* to work on ie6!
Read the rest of this entry »

Elastic Multiple Select List

Nov 20

Posted by Chris in Code, Mootools, Scripts | 1 Comment

Following on from my previous post demonstrating my mooSelect class, today I needed to create something different, again with a multiple select list.

mooElastic

This time the brief was to make a standard multiple select list “expand” when it gets focus so as to prevent it from messing up the rest of the page whilst it is not being used.
By default, if a select list does not have a width defined via css, it will simply expand to fit the width of the longest option text.
This can cause problems when the items are excessively long.

My solution was to set a fixed width for the list via css and then use Mootools to detect the length of the longest option.
Then, when the user clicks on the list, it expands out to this width.

See Demo
Read the rest of this entry »

mooSelect – convert a select list into a sliding checkbox list

Nov 3

Posted by Chris in Code, General, Mootools, Scripts | 5 Comments

EDITED: [2009-11-12]
Well, I have taken the plunge…. I have finally my first mootools class
Despite all the tutorials claiming that it is easy, I must admit to have found it rather complicated. I am the first to admit that I have problems with classes so this is not a reflection on mootools, rather on my limited abilities.

The final result is probably not very good as far as classes go but it works and I’m happy with it

See Demo
mooSelect
The background:
For a client site I needed to convert a multiple select list into a dropdown list of checkboxes. As usual I scanned google and all the usual places where mootools scripts are posted but to no avail. The only one that came close to what I needed was Custom Form Elements. Whilst this certainly looks good, for my needs it was far too complicated and I must admit (yet again) that I couldn’t even get it working as a test. I finally gave up on my search and resolved to have a go myself.
Read the rest of this entry »