Archive of articles classified as' "Mootools"

Back home

Retrieving optgroup label for selected option in a drop down list with Mootools

11/08/2011

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);
})
No Comments

Mootools Multiple Select List Modal Window Filter

5/04/2010

capture
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!

Read the rest of this article »

1 Comment

Ajax Availability Calendar v3 released

12/03/2010

capture
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.
Read the rest of this article »

3 Comments

Mootools Splash Screen

2/02/2010

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.

Read the rest of this article »

29 Comments

Expanding Multiple Select List with Search Filter

7/01/2010

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.
Read the rest of this article »

5 Comments

Elastic Multiple Select List

20/11/2009

Picture 6Following 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.
Read the rest of this article »

3 Comments

mooSelect – convert a select list into a sliding checkbox list

3/11/2009

mooSelect
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 🙂
Read the rest of this article »

8 Comments

Adding form fields via ajax with Mootools

14/09/2009

Picture 6I 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.

See Demo

Read the rest of this article »

19 Comments

Mootools highlight() driving me mad

2/08/2009

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);

Read the rest of this article »

2 Comments

Mootools Expandable Columns

24/07/2009

For a current project I am working on I needed an admin tool that consited of 3 columns with dynamic adjustable widths.

Expandable ColumnsSuprisingly, 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.

See Demo
Read the rest of this article »

11 Comments