Posted by: Ignition on: December 12, 2010
The Mottos Say It All
If you go to the jQuery site, here’s what it says at the top of the page:
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
…and if you go to MooTools, this is what you’ll find:
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
I think this really sums it up. If you ask me (and you’re reading this, so I’ll assume you just have), the question isn’t about which framework is better or worse. It’s which one of these things above do you want to do? These two frameworks just aren’t trying to do the same things. They overlap in the functionality they provide, but they are not trying to do the same things.
jQuery’s description of itself talks about HTML, events, animations, Ajax, and web development. MooTools talks about object oriented-ness and writing powerful and flexible code. jQuery aspires to “change the way you write JavaScript” while MooTools is designed for the intermediate to advanced JavaScript developer.
Part of this consideration is the notion of a framework vs a toolkit. MooTools is a framework that attempts to implement JavaScript as it should be (according to MooTools’ authors). The aim is to implement an API that feels like JavaScript and enhances everything; not just the DOM. jQuery is a toolkit that gives you an easy to use collection of methods in a self-contained system designed to make the DOM itself more pleasant. It just so happens that the DOM is where most people focus their effort when writing JavaScript, so in many cases, jQuery is all you need.
Most of the code you write when you write MooTools still feels like JavaScript. If you aren’t interested in JavaScript as a language, then learning MooTools is going to feel like a chore. If you are interested in JavaScript and what makes it interesting, powerful, and expressive, then, personally, I think MooTools is the better choice.
The Learning Curve and The Community
First, jQuery is, by and large, easier to learn. It has an almost colloquial style that almost doesn’t feel like programming. If all you want is to get something working quickly without learning JavaScript, jQuery is probably a better choice for you. It’s not that MooTools can’t help you accomplish the same things, but I’ll admit that MooTools can be a little harder to get the hang of if you’re new to JavaScript and also that there are just a lot of resources out there to help you learn jQuery – more than there are for MooTools at least.
If you compare the jQuery community (see the “Discussion” page on jQuery) and the MooTools community (irc, mailing list, and unofficial forum) you’ll quickly discover two things: 1) the jQuery community is far larger (I attribute this mostly to the point I made above about how easy it is to learn, but also because…) and 2) they are more active in promoting the library. If you measure jQuery and MooTools on metrics like the number of people using it, the number of search queries run on Google, the number of books sold, etc, you’ll see jQuery is ahead by a wide margin.
To tell you why you might consider MooTools I’ll first need to talk a little bit about what both the frameworks do. Ultimately which framework you choose is going to come down to what you want to accomplish and how you like to program (and maybe even if you like to program, at least in JavaScript).
What JavaScript Is Good For
Part of making this choice is asking what you want to do with JavaScript. Let’s consider vanilla JavaScript. No framework; just plain old JS. JavaScript gives you native objects like Strings, Numbers, Functions, Arrays, Dates, Regular Expressions, and more. JavaScript also gives you an inheritance model – a somewhat esoteric model called prototypal inheritance (which I’ll talk about more later). These building blocks and the concept of inheritance are the bread and butter of any programming language and they have absolutely nothing to do with browsers or the web or CSS or HTML. You could write anything you wanted to in JavaScript. Tic-tac-toe, chess, photoediting, a web server, whatever. It just so happens that 99% of all the JavaScript out there is run in browsers and that’s what we think of it as. The programming language for browsers.
Understanding that the browser, the DOM, is just where we happen to use JS most of the time but that it’s actually a very robust and expressive programming language will help you understand the difference between MooTools and jQuery.
More Than Just The DOM
If you think of the tasks that we want to accomplish in JavaScript strictly in terms of “get stuff on the page and do stuff to it” then jQuery is probably the best choice. It excels at offering a very expressive system for describing behavior on the page in a way that doesn’t feel like programming sometimes. You can still use the rest of JavaScript to do what you want to do, but if you’re focused on the DOM – changing CSS properties, animating things, fetching content via AJAX, etc – most of what you’ll end up writing will be covered by jQuery, and what isn’t will likely be plain-old JavaScript. jQuery does provide some methods that aren’t about the DOM; for example, it provides a mechanism for iterating over arrays – $.each(array, fn) – or, for example, it offers a trim method for strings – $.trim(str). But there aren’t a ton of these types of utility methods, which is fine because, for the most part, if you’re just getting stuff out of the DOM, iterating over them, and altering them in some way (adding html, changing styles, adding event listeners for click and mouseover, etc) you don’t need much else.
But if you think of JavaScript’s scope in its full breadth, you can see that jQuery doesn’t focus on things outside of the DOM. This is one of the reasons it is so easy to learn, but it also limits the ways it can help you write JavaScript. It’s just not trying to be anything other than a solid programming system for the DOM. It doesn’t address inheritance nor does it address the basic utilities of all the native types in the JavaScript language, but it doesn’t need to. If you want to mess around with strings, dates, regular expressions, arrays and functions, you can. It’s just not jQuery’s job to help you do it. JavaScript as a language is there at your feet. jQuery makes the DOM your playground, but the rest of JavaScript is just not in its scope.
This is where MooTools is vastly different. Rather than focusing exclusively on the DOM (though, as I’ll get into in a bit, it offers all the functionality that jQuery does but accomplishes this in a very different manner), MooTools takes into its scope the entire language. If jQuery makes the DOM your playground, MooTools aims to make JavaScript your playground, and this is one of the reasons why it’s harder to learn.
Inheritance with JavaScript
The JavaScript programming language has some really awesome things about it. For starters, it’s a functional language, which means that it treats functions as high-order objects that can be passed around as variables just like any other object – strings or numbers for example. It’s designed with this concept in mind and many of the methods and patterns in it work best when you write code this way. It’s the difference between:
for (var i = 0; i < myArray.length; i++) { /* do stuff */ }
for (var i = 0; i < myArray.length; i++) { /* do stuff */ }
and
myArray.forEach(function(item, index) { /* do stuff */ });
myArray.forEach(function(item, index) { /* do stuff */ });
JavaScript has an inheritance model that is not quite unique but at least rather rare in programming languages. Instead of classes that are defined that can be subclassed it passes along traits through prototypal inheritance. This means that objects inherit directly from other objects. If you reference a property on an object that inherits from another object, the language inspects the child object for that property and, if it doesn’t find it, looks for it on the parent. This is how a method on, say, an array works. When you type:
[1,2,3].forEach(function(item) { alert(item) }); //this alerts 1 then 2 then 3
[1,2,3].forEach(function(item) { alert(item) }); //this alerts 1 then 2 then 3
the method “forEach” is not a property of the array you declare ([1,2,3]), it is a property of the prototype for all Arrays. When you reference this method the language looks for a method called forEach on your array, and, not finding it, then looks at the prototype for all arrays. This means that the forEach method is not in memory once for every array in memory; it is only in memory for the prototype of arrays. This is incredibly efficient and ultimately quite powerful. (Side note: MooTools aliases the forEach method as each)
Self Reference
Javascript has a special word: “this”. It’s hard for me to succinctly define what “this” is all about but, by default, “this” is the object to which the current method belongs. It allows objects to refer to themselves within their methods as they would otherwise have no means to do so. This becomes important when you create children objects and have numerous instances of that object; how else could the method of an object refer to itself? When the actual copy of the method exists on the parent, not the child, the “this” keyword allows these instances to refer to their own state. (here’s a much more complete description of the “this” keyword, and another from Mozilla.)
The “this” keyword allows objects that inherit from other objects to refer to themselves, but there are times when you may want to reference something else through “this”. This is called binding, wherein you specify a different “this” for a method. The “each” method on Array allows you to specify the bound object with a second argument. Here’s an example of where you might want to pass in a different “this”:
var ninja = {
weapons: ['katana', 'throwing stars', 'exploding palm technique'],
log: function(message) {
console.log(message);
},
logInventory: function() {
this.weapons.each(function(weapon) {
//we want “this” to point to ninja…
this.log(‘this ninja can kill with its ‘ + weapon);
}, this); //so we pass “this” (which is ninja) to Array.each
}
};
ninja.logInventory();
//this ninja can kill with its katana
//this ninja can kill with its throwing stars
//this ninja can kill with its exploding palm technique
var ninja = {
weapons: ['katana', 'throwing stars', 'exploding palm technique'],
log: function(message) {
console.log(message);
},
logInventory: function() {
this.weapons.each(function(weapon) {
//we want “this” to point to ninja…
this.log(‘this ninja can kill with its ‘ + weapon);
}, this); //so we pass “this” (which is ninja) to Array.each
}
};
ninja.logInventory();
//this ninja can kill with its katana
//this ninja can kill with its throwing stars
//this ninja can kill with its exploding palm technique
In the example above, we bind ninja (which is “this” inside the logInventory method) to the method we pass to the array so that we can refer to the log property of ninja. If we didn’t do this, “this” would be window.
These are just some examples of the power and expressiveness that JavaScript has to offer – inheritance, self reference and binding, and efficient prototype properties. The bad news is that vanilla JavaScript doesn’t make these powerful things very useful or accessible, and this is where MooTools starts. It makes these types of patterns easy and rather pleasant to use. You end up writing more abstract code, and in the long run, this is a good thing – a powerful thing. Learning how these patterns are valuable and how to use them properly takes effort, but the up side is that the code you author is both highly reusable and much easier to maintain. I’ll talk about these two things a bit more in a minute.
MooTools Makes JavaScript Itself More Fun
Because MooTools focuses on making the JavaScript API itself more stable and coherent, it is focused less on giving you an interface that “changes the way you write JavaScript” and more on making JavaScript as a whole less frustrating; MooTools is an extension to the JavaScript language. MooTools tries to make JavaScript the way it is meant to be. A significant portion of the core library is spent on augmenting Function, String, Array, Number, Element and other prototypes. The other big thing it offers is a function called Class.
Now, Class looks to many people like it’s trying to recreate a more classical inheritance model that one might find in Java or C++, but that’s not the case. What Class does is make the prototypal inheritance model of JavaScript easier for you and me to access and take advantage of. I’ll note that these concepts are not unique to MooTools (other frameworks offer similar functionality), but both of these concepts are not present in jQuery. jQuery does not offer an inheritance system nor does it offer any enhancements to native objects (Function, String, etc). This is not a deficiency of jQuery as the authors of jQuery could easily offer these things. Rather, they have designed a toolkit with a different goal in mind. Where MooTools aims to make JavaScript more fun, jQuery aims to make the DOM more fun and its designers have chosen to limit their scope to that task.
jQuery Makes the DOM More Fun
And this is why jQuery is more accessible. It doesn’t ask that you learn JavaScript inside and out. It doesn’t throw you into the deep end with prototypal inheritance, binding, “this”, and native prototypes. When you get started with jQuery in its official tutorial, this is the first jQuery code example you find:
window.onload = function() {
alert(“welcome”);
}
window.onload = function() {
alert(“welcome”);
}
and here’s the third:
$(document).ready(function() {
$(“a”).click(function(event) {
alert(“Thanks for visiting!”);
});
});
$(document).ready(function() {
$(“a”).click(function(event) {
alert(“Thanks for visiting!”);
});
});
If you read the MooTools book or the MooTools tutorial (both of which I authored) they start in a much different place. While you can skip ahead and quickly learn about effects and the DOM, if you want to learn MooTools, you have to start with things like Class, and, I’ll admit: if you’re new to programming, or you just want to get something working on your site without having to learn everything about JavaScript, chances are jQuery is going to look a lot more friendly to you.
On the other hand, if you want to learn JavaScript itself, MooTools is a great way to do it. It implements a lot of things that JavaScript is going to have (many of the methods on Natives are just the JavaScript 1.8 spec and beyond). If you’re used to programming, especially both object oriented and functional programming, MooTools has a lot of design patterns that are very exciting and expressive.
Decision Time
jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability. If you put those two things on opposite sides of a scale, the jQuery side translates into something with which it’s easy to get started and see quick results but (in my experience) can turn into code that’s harder to reuse and maintain (but really that’s up to you; it’s not jQuery’s problem, per se), while the MooTools side takes longer to learn and requires you to write more code upfront before you see results, but afterwards is more reusable and more maintainable.
Further, the MooTools core does not contain every feature you can imagine and neither does the jQuery core. Both frameworks keep their cores rather lean, leaving it to you and others to write plug-ins and extensions. Their job is not to give you every feature you could want but to give you the tools so that you can implement anything you can imagine. This is the power of JavaScript, and of JavaScript frameworks in general, and both frameworks excel at it. MooTools takes a more holistic approach and gives you tools to write anything you can imagine beyond the scope of the DOM, but pays the price by having a steeper learning curve. MooTools’ extensible and holistic approach gives you a superset of jQuery’s features, but jQuery’s focus on a slick DOM API doesn’t preclude you from using the native inheritance methods of JavaScript or from using a class system like MooTools if you want it.
This is why I say that both frameworks are excellent choices. My effort here has been to highlight the differences in philosophies between the two codebases and highlight their advantages and disadvantages. I doubt I’ve been successful in keeping my preference for MooTools completely in check, but hopefully this has been helpful. Regardless of which framework you choose to work with, you now know a lot more about both, hopefully. If you have the luxury of time, I strongly recommend implementing a site with each. Then write your own review of them both and maybe your perspective will highlight some things I missed.
Posted by: Ignition on: December 12, 2010
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)
In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.
Oh, and Roundabout is released under the BSD license. If you’re not sure what that is, you can find the entire license in the source code. Go nuts, I encourage it.
Posted by: Ignition on: December 12, 2010
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
Posted by: Ignition on: December 12, 2010
JQuery has overpowered Flash in a lot of web uses becoming a very powerful tool for web designers. One of these uses that I’m referring to is the image slider. Implementing this feature in your site will definitely count as a big plus so don’t waste your time and download the available jQuery plugins in this article.
SlideDeck jQuery plugin
SlideDeck Lite is a limited version of the feature-rich SlideDeck Pro. It’s a great way to give SlideDeck a try and immediately improve the performance of your website.
Automatic Image Slider w/ CSS & jQuery
With the release of the iPad and its lack of support for flash, it has stirred up a lot of debates regarding the future of flash. With this in mind, I believe it is wise to build simple widgets like the image slider using HTML/CSS/Javascript, and leave more interactive applications for flash if needed. The html based image slider will have its benefits with SEO and will also degrade gracefully for those w/out js.
Quicksand
Quicksand JQuery plugin
At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items.
Move Elements with Style
Roundabout JQuery slider
Roundabout is a jQuery plugin that converts a structure of static HTML elements into a highly customizable turntable-like interactive area. (And now, not just turntables, but many shapes!)
In its simplest configuration, Roundabout works with ordered- and unordered-lists, however after some quick configuration, Roundabout can work with an set of nested elements.
Nivo – A new jQuery image slider
This is a new launched image slider what use jQuery. Is cross browser and have 9 unique transition effects, navigation controls, is simple, clean, valid markup and free.
Making a Google Wave History Slider
We’ve all seen the videos (and some even got access to a developer’s preview) of Google’s latest product – Wave. Although not “ground-braking” and “revolutionary” as we’ve imagined (wonder why “over-hyped” comes to mind) it still features some great UI that will surely inspire at least a few developers to implement some of it in their works.
I, being one of those inspired people, am going to show you how to create a Google Wave-like history slider. Using it, we will enable our visitors to go back and forth in time to view the changes that take place on a comment thread.
JQuery Clock Slider
Animate Panning Slideshow with jQuery
Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
jDigiClock jQuery plugin
Moving Boxes jQuery slider
I’m not going to throw a lot of source code at you this time. The big difference here is that there are buttons to change panels and the panels zoom in and out.
The iPhone unlock screen in xHTML, CSS and jQuery
The iPhone: Everybody knows what it is, many people “played around” with the gadget and most people love it. I also own one of these amazing smartphones, and the looks of the software is really, really sleek and innovative (Just like we’re used from Apple).
I wanted to transfer (some) of these amazing designs to a webpage to re-create the same look and feel for webbrowsers. Today, I’m going to show you how to create The iPhone unlock screen in xHTML, CSS and jQuery.
Create Beautiful jQuery slider tutorial
This tutorial explains how to develop Create Beautiful jQuery sliders tutorial with image description and name.
jQuery Infinite Carousel
jQuery pageSlide
jQuery pageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or “throwing”) content aside to reveal a secondary content pane.
Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator
You can very easily change the look and feel of the range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.
Building a jQuery Image Scroller
In this tutorial, we’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. Image scrollers are of course nothing new; versions of them come out all the time. Many of them however are user-initiated; meaning that in order for the currently displayed content to change, the visitor must click a button or perform some other action. This scroller will be different in that it will be completely autonomous and will begin scrolling once the page loads.
Sliding Boxes and Captions with jQuery
All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through.
Creating a Slick Auto-Playing Featured Content Slider
Easy Slider 1.7 – Numeric Navigation jQuery Slider
What I am presenting you today is an easySlider update with 2 new features. When going through your feedback I noticed 2 feature suggestions appearing very often:
- numeric navigation (as an alternative to next/previous buttons)
- continuous scroll instead of jumping to the first (or last) slide
So, that’s what I implemented in this new version. Now you have the option to choose between classic previous/next navigation or to use a numeric “pagination” style navigation.
Simple Controls Gallery v1.3 jQuery Slider
Want to display images as an automatic slideshow that can also be explicitly played or paused by the user? Simple Controls Gallery rotates and displays an image by fading it into view over the previous one, with navigation controls that pop up when the mouse rolls over the Gallery
Supersized – Full Screen Background/Slideshow jQuery Plugin
Agile Carousel – JQuery Plugin
Jquery plugin that allows you to easily create a custom carousel. Call Jquery UI to enable many different additional transition types and easing methods. Uses PHP to draw images from the folder you specify. Configure many different options including controls, slide timer length, easing type, transition type and more!
Animated JavaScript Slideshow
This dynamic JavaScript slideshow is feature packed and under 5KB. It is the long awaited update to my previous script here. A few new features include description support, link support, no naming restrictions, portrait image support, graceful degradation and active thumbnail status. This script was built ground-up and will soon be included at scriptiny where all my scripts will be added as they are updated, debugged and incorporated in the new TINY namespace
jCarousel Lite
jCarousel Lite is a jQuery plugin that carries you on a carousel ride filled with images and HTML content. Put simply, you can navigate images and/or HTML in a carousel-style widget. It is super light weight, at about 2 KB in size, yet very flexible and customizable to fit most of our needs.
Ultra versatile slider
So, in this tutorial I’ll explain a simple step-by-step way to implement an ultra versatile slider with horizontal scrolling and animated effects using MooTools. This is a basic proposal you can improve how you prefer. I included a link to the source code you can customize and reuse quickly in your web projects
Galleriffic JQuery Plugin
Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth
Space Gallery JQuery Plugin
jQuery Cycle Plugin
The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more
Posted by: Ignition on: December 12, 2010
Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.
The collection is dual licensed with the MIT license and the GPL, which basically means you can use it for free for both non-commercial and commercial usage as long as you keep the copyright notice in each of Interface’s JavaScript source file.
Posted by: Ignition on: December 12, 2010
Web2.0 came with AJAX and AJAX came with its own requirements and standards for web application developers. Now web applications are more like desktop applications with a lot of options, dialogs and more. If you have developed AJAX application with different user controls you surely loaded resources such images, other javascript files on demand. This helps you keep your application lightweight and makes its load time faster.
jQuery makes creation and loading DOM elements (in our case images) very easy. If you need to preload an image you can use this jQuery script here:
// Create an image element
var image1 = $('<img />').attr('src', 'imageURL.jpg');
First jQuery creates a image DOM element and setting the src attribute of the image element would tell the user browser to load that image. Thus preloading the image.
Next you should insert your DOM element into the DOM tree using one of the many jQuery DOM manipulation methods.
Here are some examples of how you could insert preloaded image into your website:
var image1 = $('<img />').attr('src', 'imageURL.jpg');
// Insert preloaded image into the DOM tree
$('.profile').append(image1);
// OR
image1.appendTo('.profile');
But the best way is to use a callback function, so it inserts the preloaded image into the application when it has completed loading. To achieve this simply use .load() jQuery event.
// Insert preloaded image after it finishes loading
$('<img />')
.attr('src', 'imageURL.jpg')
.load(function(){
$('.profile').append( $(this) );
// Your other custom code
});
Similar how to’s:
Posted by: Ignition on: December 12, 2010
After a lot of jQuery posts it’s time for an almost forgotten framework, Mootools. jQuery is more popular at this moment because it’s easier to use than Mootools, but Mootools is still a very powerfull javascript framework. Mootools is a good and useful framework but more for the javascript developer.
This collection of Mootools plugins contains some pretty cool and very useful stuff. A collection of Mootools menu plugins can be found here .
19
May
20
A collection of cool Mootools plugins
FancyForm
FancyForm is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.
Milkbox
Mootools lightbox clone.
AutoGrow Textarea MooTools Plug-In
AutoGrow Textarea is a mooTools plugin that expands a textarea as the user types in text.
Rabid Ratings
RabidRatings is a simple but eye-caching ratings system which allows users to your website to rate virtually anything. Installation is easy—simply tell the PHP script how to connect to your database and include the PHP tag where you want to have a ratable item, and everything else is done for you.
SlideItMoo
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.
RokSlideshow
RokSlideshow is a mootools powered JavaScript slideshow that allows you to quickly and easily display a selection of images and transition between them. The slideshow itself is very flexible and easily customizable and offers a great alternative to flash-based solutions.
FormCheck
FormCheck is a class that allows you to perform different tests on form to validate them before submission.
Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator.
MooTools Auto Captioning Images.
TableGear
TableGear is a software package for working with data on the web. It is designed get your data into a web page, and let you work with it quickly and easily, the way you would in powerful desktop applications like Excel.
iPhone Checkboxes
One of the sweet user interface enhancements provided by Apple’s iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here’s how to implement that functionality using the beloved MooTools JavaScript framework.
Rounded Corners
Creates rounded corners on divs.
Moousture
A mouse gesture library written soley in javascript with power and flexiblity to mould itself for you. Implemented on Mootools following the Object Oriented standards. Library is aimed to set out a future framework for mouse guesters for any browser including modern mobile devices.
mediaboxAdvanced
Based on Lightbox, Slimbox, and the Mootools javascript library, mediaboxAdvanced is a modal overlay that can handle images, videos, animations, social video sites, twitter media links, inline elements, and external pages with ease.
Queued Photo Uploader
Don’t think that the uploader can handle only images! But since this showcase is called “Queued Photo Uploader”, the selectable file-types are limited to images. Check the showcase JavaScript shown under this paragraph for more options.
Knoppr
An online image cropping tool for your website.
mooSocialize
Based on ajax, this small widget allows to integrate many many bookmarks for every post on your blog, website etc. By clicking the mooSocialize button, a window will appear, which lets you choose your favorite network. Having a thumbnail of each service beside the link, it’s easy to see and find the one of your liking.
Posted by: Ignition on: December 12, 2010
Multipopup is a User Javascript that lets you customize the way you view title or any other attribute you wish in a stylish way for every site you visit, while letting you decide the delay for the popup. By default, it also lets you view the alt, href, and src of elements, if you press CTRL while hovering the object. It has a no-delay mode which allows you to instantly view title contents once a popup is activated. Multipopup puts you in total control of your tooltips, while giving you the ability to customize to every detail, tho without having you worry about its default settings. It can make both the geek and the casual surfer happy.
Up until version 2.62, I was developing it alone with requests from users (thanks to all the guys at my.opera.com), but lately I had no time to improve Multipopup, so the development has been picked up by two brave men, Rafał ‘D.I.Z.’ Chłodnicki and Sarfraz ‘Stoen’ Moujoodh at my.opera.com. I can’t thank them enough for their work for Multipopup. Stoen almost recoded Multipopup entirely with DIZ providing imagery and additional programming, and he also gave us the Multipopup configurator widget. I touched the code here and there admiring their work! After all the hard work, we are proud to announce the availability of Multipopup 3.0 User Javascript for Opera.
Posted by: Ignition on: December 9, 2010
The Horizontal Way is the showcase for those particular sites that display its content in horizontal either vertical direction.
Turn to Horizontal is an original, but still rare, solution to display in one (or sometimes more) page a low quantity of text and big images like does, for example, portfolios or design publications. Every short review is focused to enlight layout and communication aspects [including some ideas from obsolete don't try this at home! nested tables ones ] I found interesting for the creation of an ‘ideal’ horizontal website. In March 2007 this site won the South By Southwest Web Award as “Best CSS”.
