Articles Tagged 'prototype.js'


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 effects, even 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 ...

Simple Accordion with the class USimpleTabStrip

The class USimpleTabStrip , presented Unobtrusive Simple TabStrip , can also be used to create a simple menu Accordion .
offerti da Scriptaculous : Using the effects of BlindUp() and BlindDown() offered by Scriptaculous :

1
2
3
4
5
6
7
8
9
10
function init () {
USimpleTabStrip ( ) ; UTS USimpleTabStrip = new ();
; UTS. Init ();
function ( e ) { UTS. OnShow = function (e) {
( e ) ; new Effect. BlindDown (s);
}
function ( e ) { UTS. onHide = function (e) {
( e ) ; new Effect. BlindUp (s);
}
}

And relocating the HTML elements ( HTML source ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
"accordion" > < div class = "accordion">
"#acc1" > Accordion 1 < / a > < a href = "# ACC1"> Accordion 1 </ a >
"acc1" >< / a > < a name = "ACC1"> </ a >
< div >
h1 > < h1 > # 1 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc2" > Accordion 2 < / a > < a href = "# ACC2"> Accordion 2 </ a >
"acc2" >< / a > < a name = "ACC2"> </ a >
< div >
h1 > < h1 > # 2 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"#acc3" > Accordion 3 < / a > < a href = "# ACC3"> Accordion 3 </ a >
"acc3" >< / a > < a name = "ACC3"> </ a >
< div >
h1 > < h1 > # 3 Content </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

</ div >

You get a simple menu Accordion which can be used very quickly.

Continued ...

Unobtrusive Simple TabStrip

USimpleTabStrip Unobtrusive JavaScript is to improve the classic anchor links (yet) within an HTML page. This source is an improvement of the function presented in Unobtrusive Tabstrip . In this version as well as align the Code with Release 1.6 of prototype.js has created a real class to manage the TabStrip. The release presented here is very simple and straightforward. His main work lies in adding a click event to the normal link anchor. CSS styles are also not presented, just to leave the maximum freedom of action, but you can get an effective TabStrip with a few extra lines of CSS code, see Adding CSS styles below.

HTML

The class USimpleTabStrip working on a simple HTML, the anchor sftuttando ( &lt;a name&gt;&lt;/a&gt; ):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<! - Simple list of links on the page ->
< ul >
= "#tbs1" > Link 1 < / a >< / li > < will > < a href = "# tbs1"> Link 1 </ a > </ them >
= "#tbs2" > Link 2 < / a >< / li > < will > < a href = "# tbs2"> Link 2 </ a > </ them >
= "#tbs3" > Link 3 < / a >< / li > < will > < a href = "# tbs3"> Link 3 </ a > </ them >
</ ul >

<! - Blocks / tabs ->

"tbs1" >< / a > < a name = "tbs1"> </ a >
< div >
h1 > < h1 > Listing # 1 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs2" >< / a > < a name = "tbs2"> </ a >
< div >
h1 > < h1 > Listing # 2 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

"tbs3" >< / a > < a name = "tbs3"> </ a >
< div >
h1 > < h1 > Data # 3 </ h1 >
p > < p > Blah blah blah .... </ p >
</ div >

funziona da contenitore. The tag div just below the anchor a work as a container.

Continued ...

Flash Text Replacement Techniques

The Text Replacement technique that I present today is in some respects, very interesting. Unlike the classical image using CSS to replace operation , this technique uses a Flash movie to overwrite the titles of our site. Despite being a little more complex, requiring the creation of a Flash movie and the use of JavaScript, produces a number of considerable advantages:

  • Keeps the 'accessibility to the site using a True-Unobtrusive Javascript- so that crawlers and spiders continue to see the page as simple and correct HTML
  • It does not require the creation of n by n image titles. Only one movie to replace all the titles of our site, with a considerable saving in terms of the Download
  • Also allows you to create simple titles but not normally used fonts on the Web
  • Text can be rendered in HTML, thanks to the features of Flash
  • The text is selectable
  • As you can insert a Flash movie and interactive animations of any kind

You will note, also, that in this procedure are practically no CSS considered!

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 ...

Google AJAX Language API and prototype.js

After seeing the operation of the Google AJAX APIs I came up with an alternative way to translate Web pages leveraging our real-time prototype.js , you can mark the HTML tags we want to translate, instead of subjecting the entire document to translation. : To mark the HTML tags I used to translate the attribute rel , setting it to translate :

1
"translate" > Questo testo deve essere tradotto < / p > < p rel = "translate"> This text should be translated </ p >

With a simple function, then we can use prototype.js to process all HTML tags with rel='translate' :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/ **
* @ Name: translate ()
* @ Description: translate
* /
function translate () {
) . each ( $ $ ('[Rel = "translate"]'). Each (
e ) { function (s) {
( e. innerHTML , 'it' , 'en' , google. language. translate (e. innerHTML, 'en', 'en',
result ) { function (result) {
result. translation ) { if (result. translation) {
result. translation ; e. innerHTML = result. translation;
{ Else {}
'Translate Error! \n \n ' + result. error . message ) ; alert ('Error Translate \ n \ n' + result. error. message);
}
}
);
}
);
}

You can see this in action on e-lementi.com

Of course the script can (and / or must) be completed as appropriate. . It is interesting to note, however, that it is possible to specialize in order to replace the images (in the case of graphical buttons that contain text), or develop him as a special TAG INPUT or TEXTAREA .

One of the limitations that I encountered, and I would like to deepen, the number of characters that can be translated. In case of important texts, in fact, it is not difficult to get an error: that in fact I run the script with an alert() .

Continued ...

Dynamic HTML with Prototype: styles and scripts

Over a year ago I wrote a post ( Dynamic HTML with JavaScript ) which illustrated some techniques to dynamically add stylesheets and scripts in an HTML page loaded. Who uses prototype.js can greatly simplify your life by using, for example:

1
2
3
4
5
6
"dom:loaded" , document. observe ("Sun: loaded",
function () {
new Element ( "script" , { type : "text/javascript" , src : "/js/altro.js" } ) ; var script = new Element ("script", {type: "text / javascript" src "/ js / altro.js"});
) [ 0 ] . insert ( script ) ; $ $ ("Head") [0]. Insert (script);
}
);

After the page is loaded ( document.observe ) adds a new script JavaScript! For styles that is exactly the same thing!

Continued ...



Stop SOPA