Mootools

As I enjoy using MooTools and since almost all my work here is centered around it, I was pleasantly surprised when Packt Publishing asked me to review “MooTools 1.2 Beginner’s Guide” by Jacob Gube and Garrick Cheung. Now, that I read the book, I must tell you that things would have been a lot easier for me when I started to learn MooTools if I had this book.

One of the main problems with MooTools in my opinion is that entry level is set a bit high and you need some programming knowledge to be able to start learning it. Docs on mootools.net are simply great but in some cases aren’t very helpful, especially if you’re trying to learn the framework. That happens because they assume you already know things that you probably don’t. This usually ends with searching for additional information on different blogs, talking to people, waiting for answers and mainly wasting a lot of time. (more…)

There are times when we need to display a bit too much content in a small space. One way to do it is by using tabs. Fancy tabs is a tabs navigation display that tries to cover most situations, from AJAX loaded tabs to auto navigation and multi purpose usage. To make things easier when designing the interface, all CSS is all external giving the possibility to change skins very easily without interacting with the JavaScript code.

Main features for this tab navigation system are:

- tabs can be rotated automatically but setting the number of milliseconds between them;
- ajax content in tabs;
- auto resizing according to tab content;
- tab highlight with smooth effect between classes in CSS;
- highly customizable from CSS;
- multiple entrance tab content effect ( fade, slide-fade ); (more…)

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

WP MyTube is the Wordpress plugin implementation for YouTube MooTools player embed with attached playlist. Simply put, this plugin will allow you to easily insert YouTube videos into your Wordpress blog posts based on username or video id only. The attached playlist will display the user videos giving you the possibility to add several videos and only one player in your blog posts. This is very useful, for example, if you are a publisher that wants to display his youtube videos into a blog post.

Videos are added to your posts when you either add them or on edit. No special other settings for it except the stylesheet if you want to change the looks. To add videos to you blog posts, when you add/edit a post you’ll notice a new “add media” icon in shape of a tv. Simply click it, fill in the necessary information and the plugin will add the custom code to your pages. Hit save and that’s it.

If you want to add more than one player into a single post, well, you can do that. The plugin allows any number of players to be displayed in a single post without problems.

Further more, you can style the player to have a default look and if you want a second player to have a different look, you can add custom CSS class to it by passing the class name when you insert a new player. (more…)

MyTube is a MooTools 1.2 plugin developed using the available player API and data API from YouTube. Basically, if you’re an YouTube publisher or simply someone who wants to display some videos pulled from YouTube on his website, this is for you.

For example, if you want to display some related (or not) videos into a post in your blog, instead of displaying 3-4 players for each video, you can have only one player and attached to it into a playlist, all 4 videos so your users can choose what to play.

The script is completely unobtrusive giving the possibility to display multiple playlists with attached video players retrieved from YouTube based on either an user name to pull videos from or simply by using the video ID you can get from any YouTube video link. All embedding and displaying is done by the script, no special knowledge needed except some CSS. (more…)

Featured articles gives the wordpress blog admin the possibility to display posts in a slick n cool way on the home page, just above the first post from the loop. It’s developed for Wordpress 2.7.1 with the help of MooTools 1.2, probably the best JavaScript framework around ( please don’t try to argue on this on the comments ).

From the available plugin options I’ll mention the possibility to display any number of posts you feel comfortable with, the order in which they will appear ( newest, oldest or random ) and thumbnail display. Since I remembered the thumbnail, some explaining on it. The thumbnail represents the first image encountered in each separate post. If none available, none displayed.

For further settings on display options, there’s the JavaScript class. The script itself resides inside the script folder of the plugin directory. For this you can set timings between slides, whether to show numbered paging or not, how the slides will slide ( left or top ) and other. (more…)

MooTooltips gives you the possibility to create bubble tooltips on HTML elements in an easy manner and with the possibility to set each tooltip’s behavior individually. It’s also possible to display as tooltip content the content of an HTML element from the page, some text you want to input or the result of AJAX calls.

Tooltips can be set directly on the rel parameter of any HTML element and simultaneously when you create a new class instance.

For example, if tooltips are set directly on the element (let’s say an anchor), the rel parameter will have a value like: <a … rel=”{content:’some_element_id’}” and that’s it. The tooltip displayed will have as content the ’some_element_id’ content. Or if you there’s only the need to display some text, it will look like this: <a … rel=”{text:’Some text I want to display in my tooltip’}”. AJAX calls are also simple. To display the tooltip with some remote AJAX retrieved content, simply use as rel the following: <a … rel=”{ajax:’some_page.html’}”.

To start the inline declared tooltips, a CSS selector is needed so basically all tooltips declared on page must have the same CSS class in order to get the script started. Optionally, there’s the possibility the pass a container for the tooltips; if none is provided, the script will scan the entire document. (more…)

SlideItMoo v1.1 comes with some new stuff implemented in it. Those of you familiar with version 1.0, skip to download read on. Updates have been made for more extensive usage of SlideItMoo. For the rest, some explaining. Also, the 1.0 version is available here and I’ll try to provide support for it if any needed.

SlideItMoo is a banner rotator, article spinner and image slider ( carousel ) developed with MooTools 1.2. Differences from the first version are the fact that the image slider now supports continuous sliding when navigating, offers the possibility to set how the slider will slide ( from left or from right ) when used with the auto slide feature on, offers the possibility to give it the item width ( width of the slider’s items ) and let it display the elements according to that width and the visible items parameter. (more…)

ChainedSelect is a MooTools 1.2 JavaScript plugin that enables the user to navigate through parent – children tree structure with indefinite number of nodes and make a selection when the desired option is encountered.

This approach offers a more powerful solution versus the classical drop down boxes chained together for a number of reasons: it takes significantly less space in the page; it can contain any number of nested levels, navigation would not be harmed; it can be styled according to the overall page design from CSS and most of all, it looks better.

The purpose of the plugin is to replace the classic chained dropdown lists that have 2 or more selects and get populated with options once you select an option from a previous one.

The whole idea behind this plugin evolves around the tree structure generated by a PHP file and sent to JavaScript as a JSON string. Giving the fact that the whole structure of the tree is loaded, the request to the PHP script is made only once and then the response is reused when navigating the nodes. Once a node is selected, the plugin allows the user to return on the path he used to get to the current node.

If an option is selected and the script that verifies the user’s entry returns an error (for example the e-mail address is invalid), the plugin offers the possibility to display the last selected option leaving it selected and accessible in POST / GET depending what method you used on the form. (more…)

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