Mootools

MooHover is a MooTools 1.2 JavaScript class that replaces regular links and form buttons with hover effect transition between two different images, giving a flash like aspect to links and/or button and submit form inputs. This plugin is intended to be a stylish replacement of the CSS hover declaration. If JavaScript is by some reason disabled or not working, the page will display the default instance of the elements replaced.

The effect is obtained by wrapping each element into a container div having as background image the default button instance and then playing with the element opacity that has the hover instance as background image.

All CSS styles are external and the HTML code on page is minimal, meaning that only links and buttons are present, without any additional containers for them.

The script is approximately 800 bytes in size compressed using Yahoo’s YUI Compressor. Also, it allows some parameters to be set when creating an instance, mainly for the purpose of letting the user use any CSS classes he/she might need, without changing the HTML source:

• container: the element containing the anchors or buttons replaced (default:document)
• className: the hover class (default:MooTrans)
• defaultClass: the default button class (default:default)
• duration: the hover effect duration in ms (default:400)
• transition: the hover effect transition (default:Fx.Transitions.Sine.easeOut)

(more…)

SlideItMoo is a MooTools 1.2 JavaScript plugin for sliding images, browser friendly and nicely degradable. All CSS styling is external. The plugin can slide the images from your photo gallery either by clicking the back – forward buttons or by mouse wheel.

It can be used to display any number of thumbnails in a photo gallery or as a banner rotator. To switch from one way to the other, you simply have to set the appropriate values when instantiating the class.

There are several options inside the plugin that you can set up in order to obtain the desired effect:

• visible: number of visible images ( default:5 )
• showControls: either to show the back-forward buttons ( default: 1 )
• autoSlide : automatically slide the images from your photo gallery ( in milliseconds to set the interval – default:0 )
• transition: the transition you want to use when sliding
• currentElement: the element currently selected. If you need to start the slider with a specific image, set this with the image number-1 ( default:0 )
• thumbsContainer: the id of the thumbnails/images container
• elementScrolled: the id of the container of thumbsContainer variable
• overallContainer: the id of the elementScrolled variable

(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…)

The other day I found myself in the positions of accepting the challenge of modifying the aspect of an input type=file”. What could I do? I work with a crazy designer (just kidding, he’s actually very skilled at what he does). I thought it wouldn’t be a big deal but the solution took me a little over two hours to develop (I was thinking when I started that it would take maybe at most half hour).

What I had to create was this:

The website was developed using MooTools 1.2, so I wanted to develop a solution based on this framework. After surfing the net to see what others have done to solve this, I got a couple of ideas about what problems I’d have to solve. (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…)