Articles Tagged 'mootools'

Shadowbox 3.0 beta

It was released right now (thanks to alert the author Michael JI Jackson ) release 3.0 beta Shadowbox.js . In addition to the new site design here is the most important changes prior to this release:

Continued ...

Camelize, CamelCase

As seen in the post Variety of coding and coding approaches that a developer may have to solve a problem are multiple and diverse for the same programming language used. Here's how some of the most popular JavaScript frameworks have solved a simple function of CamelCase :

Prototype.js

Prototype.js , version 1.6.0.3, explicitly proposes a method camelize() to make the camelcase on a string. The author's approach is quite simple and the code is self-explanatory. In this case it was not made any use of Regular Expression!

1
2
3
4
5
6
7
8
9
10
11
12
13
( ) { camelize: function () {
this . split ( '-' ) , len = parts. length ; var parts = this. split ('-'), len = parts. length;
len == 1 ) return parts [ 0 ] ; if (len == 1) return parts [0];

this . charAt ( 0 ) == '-' camelized var = this. charAt (0) == '-'
0 ] . charAt ( 0 ) . toUpperCase ( ) + parts [ 0 ] . substring ( 1 ) ? Parts [0]. CharAt (0). ToUpperCase () + parts [0]. Substring (1)
0 ] ; : Parts [0];

var i = 1 ; i < len ; i ++ ) for (var i = 1, i <len; i + +)
i ] . charAt ( 0 ) . toUpperCase ( ) + parts [ i ] . substring ( 1 ) ; camelized + = parts [i]. charAt (0). toUpperCase () + parts [i]. substring (1);

camelized return;
}

Continued ...

jQuery against everyone: a benchmark with 5 browser

image A good developer has no problem to switch from one programming language to another. The choice to focus on a particular language, framework or development environment, is dictated more by the availability of time and the type of work that takes place. However, an important factor that may influence the choice of "frameworks" such is the sympathy and affection that can mature over time.
Specifically, I wanted to analyze some - certainly not all - JavaScript frameworks available today, because even "advised" to take a look especially at jQuery .
The creators of mootools (one of the most popular JavaScript frameworks) have made ​​available a tool to run a speed test and validity of five well-known JavaScript frameworks: Slickspeed . This test, the outcome is not discounted at all, it is important to operate as client-side Javascript frameworks, that are executed by your browser. It is precisely for this reason that some find Safari faster than Internet Explorer or Google Chrome faster than Firefox . However, this often depends on the type of page you are viewing. Indeed, it may well happen that a particular site is really more "fast" when viewed in Safari, but this does not mean that "all sites" will be faster with Safari! Obviously this is true for any other browser.

The benchmark

In the test I made ​​with Slickspeed I compared the browsers available on my machine (Windows Vista 64bit Utilmate - Intel Core 2 Quad 2.4GHz with 8Gb RAM).
Unfortunately, the tests are not able to run with Internet Explorer 7, as the car crashed, even going out of scale with the results! Once again, congratulations Microsoft.
I crercato to maintain the same status of the PC during the test run, opening the browser and not individually by sending no other processes running.

Note: If you feel like you also run one or more of these tests, you can comment this post in case of "curious" and several results.

image

Google Chrome is really fast results, with a value of 68 (average) in the test with jQuery . The slower, however, was Flock , despite coming from the same "mother" Mozilla. This poor performance of Flock is really curious as its cutting social networks, because it is precisely the Social Network Web 2.0 to take advantage of many JavaScript frameworks available, so as to provide an experience of truly innovative navigation and interaction.
Surprisingly beats FireFox and Opera also has a nice little ', achieving even a 74 in the performance of Dojo ! FireFox and Safari, on balance, are similar, with Safari faster in tests with Mootools and jQuery.

Which framework to choose?

If you do not mind you testing the speed of execution and do not worry about the normal size in Kbytes of the same framework, the answer might be "what you like" or, if you like, "what you know better or is more harmonious with your style of programming. "
Ultimately, these frameworks will look a bit 'all (see for example the use of $), despite some important and substantial differences that can jump in the eyes of an expert or really pushed the use of a particular library. In principle, in fact, everything that can be done with jQuery, for example, you can do very well with mootools or prototype! If jQuery has a very compact syntax, as all methods always return the jQuery object basis, thus creating endless rows of oggetto.metodo().metodo().metodo()... is said that this is all costs a strength, especially for those who will have to debug!
Libraries like prototype.js sin, perhaps in the absence of visual effects, although simple, forcing the developer to implement as a spinoff scriptaculous.js , heavy and far from the library first choice.

An example

This last reason, for example, led me to replace the coupled prototype / scriptaculous with jQuery to create interactive panels / Animated undolog.com here in the sidebar. In fact, even using Google API to import libraries, it is wasteful to load all the library and scriptaculous for a slideDown slideUp. For information and an example, here is the Javascript code as it was coupled with the prototype / scriptaculous:

1
2
3
4
5
6
7
8
9
10
11
12
13
/ / Prototype / scriptaculous
) . each ( $ $ ('H2.dropdown'). Each (
element ) { function (element) {
= "pointer" ; element. style. cursor = "pointer";
'click' , element. observe ('click',
event ) { function (event) {
this . next ( ) . style . display == "" ) new Effect. BlindUp ( this . next ( ) , { duration : .5 } ) ; if (this. next (). style. display == "") new Effect. BlindUp (this. next (), {duration: .5});
Effect. BlindDown ( this . next ( ) , { duration : .3 } ) ; Effect else new. BlindDown (this. next (), {duration: .3});
event ) ; Event. Stop (event);
}
)
}
);

and it is now with jQuery:

1
2
3
4
5
6
7
8
9
10
/ / JQuery
) . each ( $ ('H2.dropdown'). Each (
i ) { function (s) {
) . css ( 'cursor' , 'pointer' ) . click ( $ (This). Css ('cursor', 'pointer'). Click (
function () {
$ ( this ) . next ( ) . is ( ':hidden' ) ) $ ( this ) . next ( ) . slideDown ( ) ; else $ ( this ) . next ( ) . slideUp ( ) ; if ($ (this). next (). is (': hidden')) $ (this). next (). slideDown (); else $ (this). next (). slideUp ();
}
);
}
);

All in all, a closer look, I do not think there is a lot of difference! But as I said before ... the question is "also" of personal taste.

Continued ...

jQuery makeover

In these days (on the advice ...) I was browsing on jQuery , a great library in the style of prototype.js , scriptaculous.js , MooTools , so to speak ... and now here is the whole site has been completely redesigned:

image

Great start to broaden my horizons on this kind of libraries! Shortly publish some interesting article, especially about the differences between jQuery and other libraries "similar".

Continued ...

Google AJAX Library API: a turning point for developers

AJAX Libraries API Google , in the latter period, has released a multitude of tools for developers, constantly updating their releases. Now holds an agreement with popular AJAX framework, and not only to centralize the distribution of library jQuery , Prototype , script.aculo.us , MooTools and dojo !

In practice it is possible to access these libraries taking advantage of the infrastructure and the Google network, with significant advantages in terms of speed and safety.

The speed, loading, is guaranteed by the same network that Google, in addition to providing in itself a structure of distributed servers, allows (by default) to load compressed (gzip / minify) libraries. The hosting Google closest to the request will be used to send the code and, if not to achieve a temporary or down, however, the network will ensure the delivery of Google Javascript code!

Continued ...

All Lightbox clones in a dynamic array

Planetozh has created a beautiful scenery of the dynamic tool that can list all of the Javascript libraries like Lightbox.

image

image Using a panel (see picture on left) with a series of "ticks" (checkbox), which indicate the various features of the libraries, you can run a filter, obtaining the list of one or more libraries that do the job. We hope that the author maintains updated this great page, very useful in extricating one of the numerous and powerful libraries of this type.

Continued ...

Light gallery: 2.0.0_rc1 Lightview

Lightview Here is yet another newly released Unobtrusive JavaScript library for image galleries and more. Lightview in 2.0.0_rc1 release , also added the functions to "open" Window with the content that goes beyond simple image: Flash movies, QuickTime , Form and IFRAME! Compared to the previous version (1.1.0 - which handles only images), then, this release candidate is enhanced features are also present in other libraries . . The tools required by Lighview to work very well known are the Prototype 1.6.0.2 and Scriptaculous 1.8.1 . Gliattributi library are used to manage the class and rel .

Interesting one aspect of this library is the extreme care with which the graphic appears.

Score: 9 - Home Lightview

Continued ...

Light Library: Slimbox by a Shadowbox, galleries in Javascript

Some might say - and rightly so - enough! JavaScript libraries (Unobtrusive - not intrusive or in part) to manage images and galleries there are so many. Anyway here's the list, with pros and cons, the best I've tried.

Slimbox 1:41

Extremely minimal, 7K (version 1.41), requires mootools to work. As indicated on the home page is a real clone graph Lightbox , we will see below. Honestly, aside from the extreme compactness of the library does not own peculiar characteristics. On the same site, however, you can also find a script to generate run-time reflections ... you may want to limit this ;)

Rating: -6 - Slimbox Home, Home Reflection.js for MooTools

Lightbox2

Lightbox2 One of the most known and simple. Manages images in this release are (so it does not work with QuickTime, Flash, or other). To operate, requires Prototype and Scriptaculous . Use the attribute rel to identify the links of images to be processed:

1
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < a href = "images/image-1.jpg" rel = "lightbox" title = "my caption"> image # 1 </ a >

Like the other libraries that we shall see, supports the slideshow mode, enter any identifier in square brackets in a series of link / image:

1
2
3
"images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < a href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image # 1 </ a >
"images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < a href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image # 2 </ a >
"images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < a href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image # 3 </ a >

Score: 6 - Top Lightbox2

LIGHTWINDOW 2.0

LightWindow 2.0 This is also quite common! After all how can you tell which one is used? ;) . However it is extremely comprehensive and versatile. On the site stands the request for donations for the purchase of a Mac ... and pressing a little invasive ... However, as above, but for its operation, requires the presence of Prototype and Scriptaculous . Unlike its predecessor, however, this allows you to view moltisiimi types of files: from the images, QuickTime movies, Flash movies, external HTML pages and PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). By contrast, uses various attributes, some optional ( author, caption and title ) other mandatory ( class and params - to set the behavior of the library). For example, to view a gallery or slideshow using the attribute rel :

1
2
3
"gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < a href = "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown"> image # 1 </ a >
"gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < a href = "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves ..." caption = "I Should not Be doing this when i am hungry" author = "Unknown"> image # 2 </ a >
"gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < a href = "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown"> image # 3 </ a >

Score: 8 - Home LightWindow 2.0

ShadowBox 1.0B

Shadowbox Although the version 1.0 beta, this is perhaps the most complete library, both from the functional point of view is supported by the libraries. For its operation, in fact, you can choose from a variety of frameworks, with the file "adapter" specially manufactured and supplied by the author:

The visual effect (configurable via skin / css), then, unlike the others, is definitely more appealing. The attributes used are only rel where, in its internal space are all the other configuration parameters. For example, to create a gallery, just use:

1
2
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < a href = "beach.jpg" rel = "shadowbox [Vacation]"> The Beach </ a >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < a href = "pier.jpg" rel = "shadowbox [Vacation]"> The Pier </ a >

If you want to set some options ( see website for complete list ) simply use the following syntax:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < a href = "myimage.jpg" rel = "shadowbox; options = {overlayOpacity: 0.5, resize: false}"> My Image </ a >

On the Internet they can find other, such as JS Highslide . In fact, if you want to report some other library ... Anyway, personally, I prefer Shadowbox for simplicity, scalability and cross-framework.

Score: 9 - Top Shadowbox 1.0B

Continued ...

Accordion 2.0

image He had already spoken of this Unobtrusive Javascript library built by the same author LightWindow 2.0 . Is now released version 2.0, which always makes use of scriptaculous .
Among the most interesting is its ability to "engage" the Accordion inside each other, both horizontally and vertically in the MODL.
Then away from the original operation of the classics has been added Accrodion the behavior of opening / closing. On the site you can download the script (marked with the words still 1.0!?) and access code examples.

Continued ...

Accordion for Scriptaculous

Finally, a fine script in JavaScript (download Accordion 1.0 ), simple and lightweight, which allows you to add the Accordion component in the Flash and mootools library using scriptaculous . Indeed, this object was missing, which is useful on many occasions. This version is extremely simple and allows you to create Accordion orizzonali that is vertical. The script is free , but you can make a small donation to help the author to buy a nice MacPro ;)

To use simply insert these simple lines of code:

1
2
3
"text/javascript" src = "javascript/prototype.js" >< / script > < script type = "text / javascript" src = "javascript / prototype.js"> </ script >
"text/javascript" src = "javascript/effects.js" >< / script > < script type = "text / javascript" src = "javascript / effects.js"> </ script >
"text/javascript" src = "javascript/accordion.js" >< / script > < script type = "text / javascript" src = "javascript / accordion.js"> </ script >

The HTML markup is immediate:

1
2
3
4
5
6
7
8
9
10
11
"accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Title Bar </ h3 >
"accordion_content" > < div class = "accordion_content">
...
</ div >
...
...
...
"accordion_toggle" > Title Bar < / h3 > < h3 class = "accordion_toggle"> Title Bar </ h3 >
"accordion_content" > < div class = "accordion_content">
...
</ div >

A practical example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ / General Syntax
'container-selector' , options ) ; new accordion ('container-selector', options);


/ / Horizontal example
new accordion ( '#top_container' , { horizontalAccordion var accordion = new ('# top_container', {
classNames: {
, toggle: 'horizontal_accordion_toggle',
, toggleActive: 'horizontal_accordion_toggle_active',
content: 'horizontal_accordion_content'
},
defaultSize: {
width: 525
},
direction: 'horizontal'
});

/ / Vertical Accordion
new accordion ( '#bottom_container' ) ; verticalAccordion var accordion = new ('# bottom_container');

Continued ...


Stop SOPA