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);
})
Mac Snow Leopard random freezing and Spotlight
Since upgrading to Snow Leopard (10.6.6) from Leopard (10.5.8) last week I have been experiencing random system freezes which have left me waiting for 30 second bursts every 20 minutes or so.
This has finally become too annoying so I took some time out from work to find out what was causing it and, more importantly, sort it out.
Basically it turns out that Spotlight has been causing this problem (or so it appears).
Thanks to a user on the apple forum from a couple of years ago, I have been able to resolve the issue.
The user (svener888) suggested that it was being caused by Spotlight. Here is what they suggested:
1. Disable Spotlight “sudo mdutil -a -i off”
2. Change the preferences of Spotlight to only index (Applications, Folders and Documents)
3. Enable Spotlight again “sudo mdutil -a -i on”
That was amazingly simple and, so far, touch wood, etc. it appears to have worked. My system hasn’t frozen again and all is well.
On top of that, I also have regained a further 10GB+ of space!!!!!! (on top of the 60GB that I regained on upgrading to Snow Leopard itself) It is amazing how much Spotlight uses! I am actually considering turning it off all together as to be honest I never use it.
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 »
New demo for dynamic form fields
A few days ago I wrote a post to demonstrate how I was adding form fields dynamically with the use of AJAX and Mootools.
I have now created a new demo that further demonstrates the flexibility of this system.
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.