Articles Tagged 'Unobtrusive'


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

jQuery: how to build an extension Plugins

Like all the libraries of this type also jQuery allows you to extend its basic functionality using real plugins. Respecting the rules of its operation, that is, return it is always a pointer to the selected item or jQuery itself, you can write a plugin with a few lines of code. Take for example the proposed code in jQuery against everyone: a benchmark with 5 browser , which was (after the correction reported by Luca ):

1
2
3
4
5
) . css ( 'cursor' , 'pointer' ) . click ( $ ('H2.dropdown'). 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 ();
}
);

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

Unobtrusive Javascript: a little 'eye for clarity and to impostors

Some scripts, and some Web marketing them use some Javascript functions for non-intrusive (Unobtrusive), even when they are not at all. What makes a script (usually JavaScript) is not intrusive? In principle, a JavaScript script is non-intrusive when you can do without it! Put very simply! When developing a Web site usability of the same should not depend on any kind of script. Only in this case we have a genuine Unobtrusive script.

Continued ...

Shadowbox assetURL: set the image path

When Shadowbox opens his window to show content (images, iframes, Movie, etc ...), displays, waiting for an animated gif that comes in the package. If the page is using Shadowbox is at the same level of the images folder, everything works fine. By default, in fact, look for the animated gif below Shadowbox images / loading.gif - or images / loading-light.gif if you chose the styles light (shadowbox-light.css). Otherwise, there is a risk and often not even accorgesene, if we are in a different tree, it generates a nice code 404 - page not girder, in our case file not found!

To resolve this problem sufficient to initialize Shadowbox with an appropriate parameter which indicates the absolute path of your images folder: undolog.com of, for example, I placed the animated gif of loading directly into the images folder present in root (like a billion others sites :) . To make this folder accessible to Shadowbox, regardless of the path, I put semplicemenete:

1
2
/ / Init assetURL shadowbox with parameter
assetURL : 'http://www.undolog.com/' } ) ; Shadowbox. Init ({assetURL: 'http://www.undolog.com/'});

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

Unobtrusive SWFObject 2.0

SWFObject SWFObject is a JavaScript script is used to insert Flash content in Web pages Its main function is to eliminate the request to activate the control by the Microsoft Internet Explorer (which, by the way, is being discontinued - see here ) and, more interestingly, the ability to automatically check and install Flash Player if required. SWFObject can be considered a good alternative to the kit to install / detect supplied by the same Adobe Flash is generated inside the IDE (in all its versions). With version 2.0 , SWFObject improves its performance and its use. As stated on official documentation , moved to Google Code, new in this release are so many as to make it NOT compatible with previous versions. This results in virtually a complete overhaul of the code for those who decide to upgrade a previous version of SWFObject 2.0.

The script is now aligned to the latest standards, both from the syntactic point of view that "non-intrusive." It supports all previous features such as quick installation of the Flash Player, with a code more clear and easy to use. The change of parameters, for example, JavaScript to Flash Player (and therefore to our movie) is now much lighter and versatile. Also introduced were two main modes: static and dynamic, depending on the type and page design process that we are doing.

Bon and really liked it because it is the online tool that generates code for SWFObject us.

LINK:

Continued ...

Scriptaculous Effect.Tween: how it works

Of all the libraries 'Web 2.0' available, scriptaculous is certainly the most poorly documented! On the official website, often slow, the documentation is incomplete, poorly made ​​and difficult to use. With the latest releases, then, some new features are completely missing, just as the new core effect Tween (Effect.Tween). The latter, similarly to Tween in Flash, allows you to manipulate custom transitions. SYNOPSIS Its basis is the following:

Continued ...



Stop SOPA