Mootools Multiple Select List Modal Window Filter
Let’s face it, Multiple Select Lists are not the best of HTML form fields, not least because you have no means of finding the option that you want quickly. OK, you can type the first letter of the option you want but that is it, it will help you get to the start of all the options starting with the letter “T” but not much else. This is why I needed to create a Multiple Select List Filter that would allow the user to type in the text and the non-matching options will be filtered out, reducing the list to just the possible matches. This is really handy when you have lists of 100’s of options!
Ajax Availability Calendar v3 released
In January 2008 I released for public downloading the first version of my Ajax Availability Calendar.
Over the first few months I continually developed it, fixing bugs and taking into account the suggestions and requests made by the many people who gave feedback on the forum. It finally settled down to a “version 2” state and, due to work commitments, I had to let it lie for a while.
When I initially started on the script the idea was that it was to simply be a calendar to show availability with an AJAX interface to be able to update the calendar date states simply by clicking on them (ie no need to reload the page each time you need to set the availability of the dates). I imagined that it would be implemented on websites by web developers like myself so this script would just become “part” of the integration.
Continue reading »
Mootools Splash Screen
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.
Expanding Multiple Select List with Search Filter
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.
Continue reading »
Elastic Multiple Select List
Following on from my previous post demonstrating my mooSelect class, today I needed to create something different, again with a multiple select list.
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.
Continue reading »
mooSelect – convert a select list into a sliding checkbox list
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 🙂
Continue reading »
Adding form fields via ajax with Mootools
I am currently working on a project where the administrator needs to be able to upload any number of items within one master project.
Clearly I didn’t want to present them with a long page of repetative form fields and anyway, there was no way of knowing whether they would need 1, 2 or 20 items.
The solution?
Use some simple mootools ajax magic to fetch the form fields dynamically from an external file.
CSS unordered list calendar
I a currently (finally) working on a new version of my ajax availability calendar. I created this calender about a year and half ago and, whilst it has been very successful and is being used in many websites around the world, for a long time now I have been promising to create a new version.
see demo
This new version is going to have two primary differences, it will use mootools for the javascript requirements and it will use mostly css for the dates (the current version relies on images which was always going to be a problem) Continue reading »
Mootools Expandable Columns
For a current project I am working on I needed an admin tool that consited of 3 columns with dynamic adjustable widths.
Suprisingly, I couldn’t find anything in google (using the mootools library) similar to what I needed so, always up for the challenge, I decided to code one myself.
In the hope that it might be useful to someone else, here is the code that I finally came up with.
Mootools Drag & Drop & Download
Over recent months I have moved over to using the mootools javscript library for all my javscript needs.
However, this has not stopped me from helping out when I can on the dhtmlGoodies forum with the scripts there and general javascript questions that users ask there.
A couple of days ago somebody post a request about using drag&drop scripts to activate a download. As an example, they posted a link to Ryan Scherf’s drag & drop download script using the prototype library.
I liked the look of this and, always up for the challenge, wanted to have a go at doing the same using Mootools.