JavaScript

Posts Tagged JavaScript

Styling select box – SelectoMoo

Tuesday, January 19th, 2010 in Mootools | 6 comments

Styling select box - SelectoMoo Developed using MooTools 1.2, SelectoMoo is a plugin that replaces the default select box element from a form with a stylish, CSS/ 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…)

Tags: ,

MooTools 1.2 JavaScript image zoom

Thursday, October 30th, 2008 in Mootools | 16 comments

image_zoom1 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 is structured as a class and all CSS styles are mainly external and can be maintained from the stylesheet. (more…)

Tags: , , , ,

JavaScript Flash text using MooTools 1.2 and SiFR.fla

Wednesday, August 27th, 2008 in Mootools | 22 comments

mootools sifr antialiased titles 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…)

Tags: , , , ,

JavaScript drop down menu using Mootools 1.2

Thursday, July 31st, 2008 in Mootools | 69 comments

I’ve been using for some time by now but this is my first article on it. For those of you that don’t know what is, I’ll tell you only this: It’s my life saver when it comes to . 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 core build and the Fx.Slide component found in the More Builder. (more…)

Tags: , ,