Preview the effects library Scriptaculous , waiting for the 1.8 2.0:
For the complete list of improvements saw the CHANGELOG
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 new features is its ability to "engage" the Accordion inside each other, both horizontally and vertically modlità.
Moving away from the original, then operation of the classical Accrodion was added the behavior of opening / closing. On the site you can download the script (indicated with the words still 1.0!?) and gain access to the code examples.
An interesting and useful Javascript library based sull'accoppiata Prototype and Scriptaculous allows you to add the function of DatePicker (component in ActionScript / Flash) in normal HTML TEXT INPUT.
Its characteristic Unobtrusive (not intrusive) makes it an ideal tool to expand the functionality of a site which has been previously established. To activate the DatePicker just add the class "date" in our INPUT TAG. In Javascript you can set different parameters including the overwhelming support for the Italian language.
Here is a piece of code example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | "text/javascript" src = "/prototype.js" >< / script > < script type = "text / javascript" src = "/ prototype.js"> </ script > "text/javascript" src = "/scriptaculous.js" >< / script > < script type = "text / javascript" src = "/ scriptaculous.js"> </ script > "text/javascript" src = "/datepicker.js" >< / script > < script type = "text / javascript" src = "/ datepicker.js"> </ script > "text/css" > < style type = "text / css"> @ Import ("/ css / datepicker.css"); </ style > < form > "text" id = "date-from" name = "date-from" / > < input type = "text" id = "date-from" name = "date-from" /> </ form > "text/javascript" > < script type = "text / javascript"> dpck var = new DatePicker ({ relative: 'date-from', language: 'en' }); </ script > |
Finally a nice 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 . Actually lacked this object, useful in many occasions. This version is extremely simple and allows to create Accordion orizzonali that is vertical. The script is free , but you can make a small donation to the author to help you acquire a nice MacPro 
To use it, put this simple 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 = new accordion ('# 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 = new accordion ('# bottom_container'); |
After fixing the graphics Undolog and you make the finishing touches on some titles (see sidebar), I enjoyed using the coupled prototype.js and Scriptaculous , in a non-intrusive (Unobtrusive)! Here's a video (but you can try it for yourself right here ) With the nice feature that I added to the sidebar Undolog, which not only make it more enjoyable I hope makes it even more functional!
The code I used is very simple:
1 2 3 4 5 6 7 8 9 | window , 'load' , function ( ) { Event. Observe (window, 'load', function () { ) . each ( function ( element ) { element. style . cursor = "pointer" ; $ $ ('H2.dropdown'). Each (function (element) {element. Style. Cursor = "pointer"; 'click' , function ( event ) { element. observe ('click', 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); ( element ) ) }. BindAsEventListener (element)) }) }) |
Also note that the first time you load the home page is automatically closed Undolog panel of Categories - identified by ID tit_category :
1 | window , 'load' , function ( ) { new Effect. BlindUp ( $ ( "tit_category" ) . next ( ) , { duration : .5 } ) } ) Event. Observe (window, 'load', function () {new Effect. BlindUp ($ ("tit_category"). Next (), {duration: .5})}) |
The titles on the sidebar are defined, then, in this way:
1 2 3 4 |
da rendere dinamici, grazie alla funzione doppio-dollaro ($$) di Prototype.js – di cui abbiamo già parlato… Through the class dropdown identifies the titles H2 to make dynamic, thanks to the double-dollar ($ $) of prototype.js - we already talked about ...
The insertion of objects (especially Flash Objects) in web pages has become an often stressful lately. In other posts we have already addressed the topic of how to detect Flash and insert pages appropriately. As we discussed techniques Unobtrusive, we mark two well-known script can detect (and eventually install) and insert Flash objects on a page, in a very unobtrusive and afficiente: SWFObject and UFO .
Both scripts have essentially the same features and identical operation. The approach is to replace it by a certain need JavaScript tag with the Flash content. As we know, this procedure eliminates the problem of activation of the Flash object imposed by Internet Explorer, however, implies that Javascript is enabled on the target browser.
Both scripts do not use any external libraries such as prototype.js for example. The most important difference between the two is that SWFObject is called when the TAG to be replaced is already loaded on the page, not exactly how Unobtrusive. Here is an excerpt of code that displays the calling sequence:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | "flashcontent" > < div id = "flashcontent"> strong > < strong > You need to upgrade your Flash Player </ strong > This is Replaced by the Flash content. Place your alternate content here and users without the Flash plugin or with Javascript turned off will see this. > noscript < / code > Content here allows you to leave out < code inline = "true"> noscript </ code > tags. "swfobject.html?detectflash=false" > bypass the detection < / a > if you wish. Include a link to < a href = "swfobject.html? detectflash = false"> bypass the detection </ a > if you wish. </ div > "text/javascript" > < script type = "text / javascript"> / / <! [CDATA [ , "sotester" , "300" , "300" , "9" , "#FF6600" ) ; var so = new SWFObject ("so_tester.swf", "sotester", "300", "300", "9", "# FF6600"); ) ; // this line is optional, but this example uses the variable and displays this text inside the flash movie so.addVariable ("flashVarText", "this is passed in via FlashVars for example only") / / this line is optional, but this example uses the variable and displays this text inside the flash movie ; so.write ("flashcontent"); / /]]> </ script > |
UFO , however, allows un'approccio much more in line with the classic Unobtrusive script. The replacement of the TAG is in transparent mode, without abbligare loading sequences, as shown in the example below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | < head > title > < title > Unobtrusive Flash Objects (UFO) | Sample Page </ title > "Content-Type" content = "text/html; charset=iso-8859-1" / > < meta http-equiv = "Content-Type" content = "text / html; charset = iso-8859-1" /> "text/javascript" src = "ufo.js" >< / script > < script type = "text / javascript" src = "ufo.js"> </ script > "text/javascript" > < script type = "text / javascript"> var FO = {movie: "test8.swf", width: "300", height: "120", MajorVersion: "12", build: "0", xi: "true"}; UFO.create (FO, "ufoDemo"); </ script > </ head > < body > "ufoDemo" > < div id = "ufoDemo"> p > < p > Replacement content </ p > "border: none;" / >< / a >< / p > Macromedia Flash Player "style =" border: none; "/> </ a > </ p > </ div > </ body > |
In the source code of the script of UFOs , in fact, you can immediately use - more appropriate - an event that attentive to fully load the page before the replacement is, therefore much more appropriate approach to non intrusive script.
Among the various libraries - or set of libraries (real framework), dedicated to Ajax, HTML, and Web 2.0 interface extension that I've seen, Ext is definitely worthy of note. The website and documentation are well done and organized, also the demo is not to be missed. The graphical user interface, compatibility with Prototype and Scriptaculous and impletazione of Yahoo Utils, make it an interesting system, at least! Beware though the license! Despite presenting himself as open source and free for personal use, requires a fee to enhance the use and care. The latter, in fact, is never to be underestimated in the framework of a certain complexity.
For documentation and demo click here .
In particular I mention this system, I'm still analyzing in detail, as it has been used to create Fresh Feed Reader , one of the sample applications provided with the release of Adobe Apollo Alpha (see Adobe Apollo Alpha Release ). Fresh, therefore, is an example of two of Apollo, which demonstrates its ability to use HTML and Javascript at the most. Fresh, in fact, is not a pure Apollo, but uses the framework Ext - and then JavaScript and HTML - Apollo in the engine! Great!
In this Post I would like to analyze the use of scripts unobtrusive from the point of view of the Web designer. Normally, in fact, a script that is not intrusive towards the end of the navigator!
But it can also be good for the Web Designer?
Putting ourselves in the shoes of a web designer could identify two categories of unobtrusive JavaScript: Unobtrusive Javascript true and pseudo unobtrusive JavaScript.
Both categories, however, are not completely non-intrusive (always from the point of view of the Web Designer). A real and complete unobtrusive JavaScript should not take any action on the Web page, but this is - for now - basically impossible. The minimal operation required during the installation of a script, however the inclusion of the inclusion of the script itself! So this is permitted operation that - actually - it does not force the web designer to make regular adjustments to the structure of the page. The simple positioning of the inclusion of the script tag inside the head can then be considered non-intrusive.
The scripts of this type are those that require only the inclusion of the script unobtrusive and not; claim no other operation! Script of this type are, for example (the usual and-cited), Snap . Once you entered the code include the web designer must not carry out any further operation, because the script snap operates on standard tags.
These differ from the previous ones in that they require a tagging further to function properly. Examples of this type are Control.Tabs of Ryan Johnson or library for slideshow Lightbox JS . per identificare i link che devono essere modificati. Lightbox JS , in particolare, richiede addirittura la presenza esplicita sia di Prototype che di Scriptaculous . The latter solution, for example, requires the inclusion in the Tag A attribute rel to identify links that need to be modified. Lightbox JS , in particular, requires even the presence of both explicit Prototype that of Scriptaculous . As indicated on the website Lightbox JS , the inclusion of the script should look like this:
1 2 3 | "text/javascript" src = "js/prototype.js" >< / script > < script type = "text / javascript" src = "js / prototype.js"> </ script > "text/javascript" src = "js/scriptaculous.js?load=effects" >< / script > < script type = "text / javascript" src = "js / scriptaculous.js? load = effects"> </ script > "text/javascript" src = "js/lightbox.js" >< / script > < script type = "text / javascript" src = "js / lightbox.js"> </ script > |
The links pointing to un'immmagine you want to view the system with Lightbox JS should be written like this:
1 |
In addition to identifying a group of images, to add the ability to scroll forward and backward images, the Tag A must be set as follows:
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 > |
The need for these constrictions is evident; there is no easy way to distinguish a link element (Tag A ) from another. In particular it is not clear which element the Web designer wants to display in one way or another. Necessarily be the Web designer to indicate somehow the Tag and their behaviors. Are therefore required - intrusive - totally understandable, not at all diminish the usefulness and potential of these scripts. Only lead to greater detail and a few lines of code in over the Web Designer.
It is interesting, however, the double aspect of 'unobtrusive JavaScript, analyzed both from the point of view of the end user from the point of view Web Designer.
As promised here are some concrete example of unobtrusive JavaScript, versatile and powerful tool if used properly. On Site / Blog Ryan Johnson you can download two very good example of unobtrusive JavaScript:
Ryan Johnson, in his script, the library uses Prototype , like many of the rest. He has also written some extensions to the relatively Prototype , then introduced - in a different form - in the latest version of the library.
Use Prototype to illustrate the operation of unobtrusive JavaScript code is generally more convenient - as we shall see later, however, here is a first example crude which requires no external libraries. We begin by recalling that the concept behind the unobtrusive JavaScript is to start from any HTML page (standard and not necessarily written by us - more important strong point) and use Javascript to make some changes.
Schematimamente the concept is to perform a function that parses the HTML, then traverses the DOM and in particular points to add or change functionality. Normally utilize two methods to execute Javascript code to load a page: the first is what you do not enclose the code in any function, and then let the browser execute code immediately uploaded to the point where the call appears:
The same result is obtained by including the code:
1 |
However, when it must operate on the DOM of a page that it assumes a fully loaded, that all the TAG of the page is present and available to be tracked. So the best solution becomes the one to be sure that the page is complete. This is possible by engaging the onload event of body tag, for example, which is released when the page load is complete.
1 2 3 | miafunzione ; window. onload = myfunction; / / Or, which is the same function ( ) { alert ( "Hello" ) ; } window. onload = function () {alert ("Hello");} |
Be avoided, of course, the canonical solution that would be an understatement to call it intrusive:
1 | "miafunzione()" > < body onload = "myfunction ()"> |
Another technique, more coarsely and equally intrusive (as it would force the end user to place the code in a particular spot), is to insert our script at the end of the document before the closing body tag, now obsolete technique and used in rare cases (see Google Analytics!).
Even better is to use the method below:
1 2 3 4 5 6 7 | window. addEventListener ) { if (window. addEventListener) { "load" , miafunzione , false ) ; window. addEventListener ("load", myfunction, false) ¾ Í ( window. attachEvent ) { } Else if (window. attachEvent) { "onload" , miafunzione ) ; window. attachEvent ("onload", myfunction) ¾ Í { Else {} createSubMenus; window. onload = createSubMenusÍ ¾ } |
Even this piece of code is enclosed in a function. It will add an event listener for the load event of the window, calling our function miafunzione() . . Modern browsers such as FireFox for example, will use the function addEventListener() defined in DOM Level 2, while Internet Explorer will use its proprietary function attachEvent() . However we are not at perfection in this way, in fact, it will replace all - if any - onload events created by other scripts, which is not really "non-intrusive."
To resolve this issue quickly, that because of the different behavior of the browser would be least complicated to explain here, you should use as libreirie Prototype providing un'elengantissimo method to overcome the problem:
1 | window , 'load' , function ( ) { alert ( "Hello" ) ; } ) ; Event. Observe (window, 'load', function () {alert ("Hello");}); |
The syntax is very obvious and spectacular! The advantage for those who had not understood, is that you can write:
1 2 | window , 'load' , function ( ) { alert ( "Hello 1" ) ; } ) ; Event. Observe (window, 'load', function () {alert ("Hello 1");}); window , 'load' , function ( ) { alert ( "Hello 2" ) ; } ) ; Event. Observe (window, 'load', function () {alert ("Hello 2");}); |
On loading the page will be shown before the alert "Hello 2" and then the alert "Hello 1". Basically you load in a FILO (First Last Input Output) a stack, while ensuring the execution of all events hooked to load the document exactly what was desired. In this way a page can load - virtually - endless unobtrusive JavaScript that hook to load the document.
But what can you do with this technique? Many interesting things. An example that we can comment (see also Prototype: the use of the double dollar sign ($ $) ) comes from Tobie Langel . With few lines of code and downloading libraries Prototype and Scriptaculous you can give a nice effect to the classic anchor of our pages. First create an HTML page with the following code:
1 2 3 4 5 6 7 8 |
Include the page:
1 2 3 4 5 6 7 8 9 10 11 12 | "prototype.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "prototype.js" type = "text / javascript" charset = "utf-8"> </ script > "scriptaculous-js-1.7.0/src/effects.js" type = "text/javascript" charset = "utf-8" >< / script > < script src = "scriptaculous-js-1.7.0/src/effects.js" type = "text / javascript" charset = "utf-8"> </ script > "text/javascript" language = "javascript1.2" > < script type = "text / javascript" language = "JavaScript1.2"> Event.observe (window, 'load', function () { $ $ ('A [href ^ = #]: not ([href = #])'). Each (function (element) { element.observe ('click', function (event) {new Effect.ScrollTo (this.hash.substr (1)); Event.stop (event); bindAsEventListener (element)) }) }) </ script > |
Thanks to "use Event.observe() function and two-dollar ($ $) you can easily modify the behavior of the classic anchor. In this case a new function is hooked to the HTML page loads. When taking the load event is traced all the links in the DOM (Tag <A>) with href that begins with a pound (#, excluding the one with only hash!). To these elements is a function attached to the click event, similar to what was done with the load of the document. At this point comes into play Scriptaculous which produces an effect of the scroll towards the element punatato from our link - modified!
Latest Comments
Subject : very helpful indeed! I tried it and it is just what I needed. Now I wonder how do I get ...
vik : With strategic help!
Pepper : Hi there, I do not know if you're one of the creators of the WP plugin Bannerize. I have spotted a ...
Rosanna : Can anyone tell me how do I delete the Snap Shots window that opens automatically when I ...
blessed Maresca : I can not download any skypemote me spiegaaa