JavaScript

Developed using MooTools 1.2, SelectoMoo is a plugin that replaces the default select box element from a form with a stylish, CSS/JavaScript based select box. It offers the possibility to completely change the appearance by only using CSS style sheets so changing design turns into a pretty simple task.

The behavior tries to mimic the one of a classic select element, meaning it supports keyboard navigation between form fields ( by pressing tab key ), it opens on label click, when opened navigation can be done by keyboard ( up, down, enter for selecting an option ) or mouse ( mouse wheel for navigation, click to select option ).

Once a selection is made, if the list is reopened by the user, the selected option gets highlighted to ease navigation and let the user know that a selection was made and what it was. Also for navigational purposes, there are different CSS classes for hovered entry and currently selected entry. (more…)

This image zoom script is developed having as inspiration the similar type of image zoom created in flash that usually displays a small thumbnail showing the region zoomed on it and a bigger image that displays the region showed on the thumbnail. I’ve seen this kind of approach used mainly on e-commerce shops that needed to present a more detailed image of a product.

This particular image zoom is developed using MooTools 1.2 and it’s just for demonstration purposes since I never needed such a script in any of my projects. Any help or suggestions on making it more robust would be very appreciated.

In order to work properly, the two images (the thumbnail and the corresponding large image) must be proportional in size. When moving the zoomed area on the thumbnail, the script calculates the position on the zoomed image that it should display so it’s very important that the dimensions are proportional. The two images are located in the pictures directory, into different folders: the thumbnail’s folder is pictures/thumb and the larger image is in pictures/big.

The JavaScript is structured as a class and all CSS styles are mainly external and can be maintained from the stylesheet. (more…)

I suck at flash. Well, maybe not quite suck ( I started learning FLEX ) but I’m not that proficient yet. Luckily this guy knows what he’s doing . I absolutely love what he’s done with SiFR. And, as I stated in previous posts on this blog, I also love MooTools. So I thought to give it a try and mix the two. Keep reading to see what I’ve achieved.

Please note that the script below works only with sIFR 2.0.7.

For those of you that may not know, SiFR is a very clever way to substitute HTML titles (h1, h2…) with pretty looking flash titles right after the page loads. Brilliant idea giving the fact that pure HTML titles look like crap no matter how much styling you put on them. What you do is basically take the SiFR.fla source file, embed in it your own font, generate the .swf file and start using it. (more…)

I’ve been using Mootools for some time by now but this is my first article on it. For those of you that don’t know what Mootools is, I’ll tell you only this: It’s my life saver when it comes to JavaScript. The moment I found out it exists, I started using it and enjoyed every moment. Go check the official page for more details.

In this example I will present you a very easy, unobtrusive way to create a drop down menu. We will need the Mootools core build and the Fx.Slide component found in the More Builder. (more…)