Retrieving optgroup label for selected option in a drop down list with Mootools
Just a quick tip for getting the selected option optgroup label using Mootools:
The HTML:
<select id="transport">
<optgroup label="Cars">
<option>Ford</option>
<option>BMW</option>
<option>Mercedes</option>
</optgroup>
<optgroup label="Motorbikes">
<option>Honda</option>
<option>Yamaha</option>
<option>BMW</option>
</optgroup>
</select>
Mootools JavaScript:
// get optgroup label of selected option on change
document.id("transport").addEvent("change",function(){
var optGroup=this.getSelected().getParent("optgroup").get("label");
// do something with the label
alert(optGroup);
})
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.
Mootools highlight() driving me mad
Just spent the best part of my Sunday afternoon trying to get what, on the face of it, was a simple task.
Using mootools, I wanted to have a simple highlight effect using highlight() as the mouse rolled over the elements and, when clicked, an ajax call would, asides from making various database checks and modifications, return a new class for the clicked element.
This new (css) class basically defined either a background image or/and a background color.
I had the highlight() call like this:
// highlight elements function
var highlight_it = function(){
this.highlight(highlight_color);
}
// mouseover effect
clickable.addEvent('mouseover', highlight_it);
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 »