Scripty2 in Action

Exclusive offer: get 50% off this eBook here
PHP and script.aculo.us Web 2.0 Application Interfaces

PHP and script.aculo.us Web 2.0 Application Interfaces — Save 50%

Build powerful interactive AJAX applications with script.aculo.us and PHP

$20.99    $10.50
by Jose Argudo Blanco | April 2010 | Open Source

In this article by Jose Argudo, we will explore scripty2 library. We will discuss the core aspects of scripty2 right from how to get started to Scripty2 UI and Scripty2 FX. We will learn about some of the interesting UI controls like accordion, tabs and autocompleter. We will also cover various effects like the fading effect, appear effect, morphing effect and finally complex morphing from Scripty2 FX.

(For more resources on Scripty2, see here.)

Introduction to Scripty2

Some years ago the web started to see, with great amazement, the born of many JavaScript libraries. Most of them really helped us developers in working with JavasScript code, making life easier, and coding more fun and efective.

Some names that usually come to our minds are jQuery, MooTools, dojo, prototype, and surely many, many others. Among these, surely we can remember one called script.aculo.us.

It's not only about the cool name, but the great features it brings along with it. Now Thomas Fuchs, the developer behind script.aculo.us, is announcing a newer version. This time called Scripty2, and most interesting of all, this is a full rewrite, every line of code is new, with a big emphasis on making things better, faster and yet easy to use.

The three parts in which Scripty2 is divided is:

  • Core
  • Fx
  • Ui

We are going to take a quick glance to Fx and Ui, so you can see some of their impressive features.

First steps, downloading and placing the necessary code.

In order to download the library we need to go to http://scripty2.com/ here we will see an image just like the next one:

Clicking on it will result in the file being downloaded, and when the download finishes, we will be able to unzip it. Inside there are three more folders, and the necessary license documents. These folders are:

  • dist → we can find inside this folder the files we will need for the article.
  • doc → the documentation for the library, equal to the online one, but we can check it while offline. However, it's advisable to check the online documentation when possible, as it will be more up to date.
  • src → here we can find the source files for the library, each part of the library being on a separate file.

For the Scripty2 library to work, we will also need to included the prototype library, which is also included in the package. But we have another option, that's to include a file called prototype.s2.min.js. This file includes both libraries in it.

Summarizing it, if we want to use the Scripty2 libray we have 2 options, to include both libraries separately or simply include prototype.s2.min.js:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.js"></script>	
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/s2.js"></script>

Note that we are including the prototype-one first, as Scripty2 needs it. The second option, and the one we are going to follow in this article is:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js"></script>

Now, let's take a look at what will be our base structure, first we will have a index.html file, with this code in it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Scripty2</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js"></script>
</body>
</html>

Note that we have our JavaScript file placed at the end of the code, this is usually better for performance. This JavaScript file is located in a folder called js.

We have also included two css files, one styles.css, which is empty for now. And the other one is reset.css . I like to use Eric Meyer's css reset which you can find it here:http://meyerweb.com/eric/tools/css/reset/.

And that's all we need for now. We are ready to go, we will start with the UI part.

Scripty2 UI

The Scripty2 includes some very interesting UI controls, like accordion, tabs, autocompleter and many others. I think we could start with the accordion one, as it will make a nice example.

Accordion

For this we will need to add some code to our index.html file, a good start would be something like this:

<body>	
<div id="tabs_panel">
<ul>
<li><a href="#tab1">Sample tab</a></li>
<li><a href="#tab2">Another tab</a></li>
<li><a href="#tab3">And another one</a></li>
</ul>
<div id="tab1">1.- This will be the content for the first tab.</div>
<div id="tab2">2.- And here we can find the content for
the second one.</div>
<div id="tab3">3.- Of course we are adding some content to
the third one.</div>
</div>

What have we done here? Just three things:

  • First we have created a tabs_panel div, inside which we will place the necessary code for tabs. It will be our container.
  • Next we have placed three div elements, with a link element inside each one, targeting a div. Inside each link, we find the title for the tab.
  • Finally we have placed the final divs, with the ids corresponding to these ones that where being targeted by the previous links. It will be in these divs that we will place the content for each tab.

Once we have this code in place we need something more to do the work, as this alone won't do anything. We need to make the necessary Scripty2 function call:

...		
<div id="tab3">3.- Of course we are adding some content to the third one.</div>
</div>
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./js/prototype.s2.min.js"></script>
<script type="text/javascript">
new S2.UI.Tabs('tabs_panel');
</script>

Easy, isn't it? We just need to add this call new S2.UI.Tabs('tabs_panel'); which targets our previously created div. Would this be enough? Let's take a look:

It seems nothing has happened, but that's far from true; if we check our page using Firebug, we will see something like the next image:

Want to learn more about Firebug? Check this Packt article: http://www.packtpub.com/article/installation-and-getting-started-with-firebug.

As we can see in the image, a whole bunch of css classes have been added to our quite simple html code. These classes are responsible for the tabs to work, does that mean that we have to create all of them? Well, not really.

Luckily for us, we can use jQuery UI themes for this. Yes, that's it, just go to this url:

http://jqueryui.com/themeroller/

And download your favourite one, from the gallery panel:

For example, I'm going to download the Hot sneaks one:

Once downloaded, we will be able to find the styles we need, inside the packaged file. If we unzip the file we will see these folders:

  • css
  • development-bundle
  • js
  • index.html

Opening the css folder we will see a folder called hot-sneaks, or the name of the theme you have downloaded. We will copy the entire folder into our own css folder. Thus we will have this structure:

  • css
  1. hot-sneaks
  2. reset.css
  • styles.css

Inside the hot-sneaks folder there's a file called jquery-ui-1.8.custom.css , we need to link this file in our index.html one, we will add these modifications:


<title>Scripty2</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/hot-sneaks/jquery-ui-1.8.custom.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
...

But before taking a look at the result of these changes, we still need to do some modifications, this time in our own styles.css file:

body{
padding: 10px;
}
#tabs_panel{
width:350px;
font-size: 12px;
}

And we are done! Our site will look mostly like this:

In the image, we can see the three possible states of the tabs:

  • Normal tab
  • Active tab
  • Hover tab

It was easy to achieve, isn't it? Next example will be a text autocompleter, stay with us!

Text Autocompleter

In this example, we are going to use another of the Scripty2 nice feature, this time to build a text autocompleter.

This can be used to enhance site search, and it's pretty easy to achieve, thanks to Scripty2. First we need to add the necessary markup in our index.html file:


<div id="tab3">3.- Of course we are adding some content to the third one.</div>
</div>
<br/><br/>
<div id="text_autocompleter">
<input type="text" name="demo" />
</div>
...

Not much added here, just another container div, and an input, so we can write in it. We now need our JavasCript code to make this work:

new S2.UI.Tabs('tabs_panel');
var favourite = [
'PHP',
'Ruby',
'Python',
'.NET',
'JavaScript',
'CSS',
'HTML',
'Java'
];
new S2.UI.Autocompleter('text_autocompleter', {
choices: favourite
});
</script>


First what we need to do is to create an array of possible values, and then we call the Autocompleter method, with two parameters, first the div we are targetting, and then the array of values.

Also we are going to modify our styles.css file, just to add some styling to our text_autocompleter div:

...
#tabs_panel, #text_autocompleter{
width:350px;
...

If we check our page after these changes, it will be looking this:

If we try to enter some text, like a p in the example, we will see how options appear in the box under the input. If we do click on the option, the input box will be filled:

Just after we select our desired option the suggestions panel will disappear, as it will do if we click outside the input box.

Note that if the theme we are using lacks the ui-helper-hidden class, the suggestions panel won't dissapear. But don't worry, solving this is as easy as adding this class to our styles.css file:

.ui-helper-hidden{
    visibility: hidden;    
}

And we are done, now lets see an example about the accordion control.

Accordion

This is quite similar to the tabs example, quite easy too, first, as always, we are going to add some html markup to our index.html file:

<div id="accordion"> 
<h3><a href="#">Sample tab</a></h3>
<div>
1.- This will be the content for the first tab.
</div>
<h3><a href="#">Another tab</a></h3>
<div>
2.- And here we can find the content for the second one.
</div>
<h3><a href="#">And another one</a></h3>
<div>
3.- Of course we are adding some content to the third one.
</div>
</div>

Good, this will be enough for now. We have a container div, where we are placing the necessary elements, each h3 element, with links inside, will be the headings, and the divs will be the contents for each tab.

Let's add some styles in our styles.css file:

#tabs_panel, #text_autocompleter, #accordion{
width:350px;
font-size: 12px;
}
#accordion h3 a{
padding-left: 30px;
}

I've placed the necessary changes in bold. Now to the JavaScript code, we will add this in our index.html file:


new S2.UI.Accordion('accordion');
</script>
...

The first parameter will be the id of our container div, for now, we don't need anything more. How does all this look like? Just take a look:

Good, clicking on each one of the headings will result in closing the current tab and opening the clicked one. But, what if we want to be able to open each clicked tab, but without closing the others? Well, thanks to Scripty2 we can also achieve that. We only need to make some small modifications to the JavaScript call:


new S2.UI.Accordion('accordion', { multiple: true });
</script>


As we see, the second parameter for our accordion function can receive some options, this time we are selecting multiple to true. This way our accordion tabs won't close:

In the previous image we can see all our tabs open, but we have some more options, let's see them. The first one will help us define our prefered header selector. As our code is now we are using h3 elements:

<h3><a href="#">Sample tab</a></h3> 
<div>
1.- This will be the content for the first tab.
</div>

 

But what if we wanted to use h1 elements? Well, it won't be very hard, just a tiny add to our JavaScript code:

new S2.UI.Accordion('accordion', { multiple: true, headerSelector: 'h1' });

The last option we are going to see is the icons one, by default, this option will use these values:

icons: {

header:
'ui-icon-triangle-1-e',

headerSelected:
'ui-icon-triangle-1-s'

}

Where do these icons come from? Well, these little icons are from the theme we downloaded, and we have plenty of them to use. If you open the theme package, the one we downloaded at the start of the article, and we click on the index.html file, we will be able to see a demo of all styles included in the package.

More or less at the bottom we will see a group of tiny icons:

 

If we hover over these little icons, its name will appear, and that's what we can use to change our options. So in our index.html file, we could change our JavaScript code just like this:

new S2.UI.Accordion('accordion', { multiple: true, headerSelector:
'h1', icons: { header: 'ui-icon-circle-plus', headerSelected:
'ui-icon-circle-minus' } });

We define one option for the headers, and other for the selected one, how will this look like:

 

And with this option we have seen all the three available. With them we can customize our accordion as we wish.

Summarizing, we have found that the Scripty2 library includes some very useful UI controllers. We have seen some of them, but there are many others, such as:

  • Buttons → Scripty2 helps us in creating good looking buttons. Not only normal buttons, but also buttons that behave as checkboxes, or even radio buttons.
  • Dialog → There are also some functions in the Scripty2 library that will help us in creating modal dialog boxes, with the contents we want.
  • Slider → If at anytime we are in need of creating a slider, be it for moving the contents of a div, for creating an image gallery or for creating an interesting price filter, it is pretty easy with Scripty2.
  • Progress bar → This one is pretty interesting, as will help us in the task of developing an animated progress bar, very nice!

Now we will be taking a look at another interesting part of the library, the FX one.

PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

Scripty2 FX

Now that we have taken a look to the UI part of the library, I want to show you some tiny bits of the FX part of the library.

Scripty2, as the previous script.aculo.us library, has a good range of effects we can use in our sites. I think we can start with the fade effect.

Fade

For this we are going to add some markup to our index.html file, only a few lines:

<b>Fade effect</b><br/><br/>	
<div id="box">
</div>

Followed by some css in our styles.css file:

#box{
width: 100px;
height: 100px;
background-color: red;
}

This will create a small red box. Now, if we want to apply the fade effect to this element, we need to add this JavaScript code to our index.html:

$('box').fade();

This will make the box disappear, by changing its opacity. Maybe it does it quite fast, so why not make it disappear more slowly. For this, we need to modify our previous code:

$('box').fade({duration: 4});

The fade function accepts one parameter, and we can pass an array of options in it. The duration parameter will define exactly what we need. Passing it a value of four, will made the effect to last for four seconds. In the next image we can see the transition taking effect:

 

To the left we can see our box at the start of the effect, and to the right at the middle of the same. Finally the box will end up disappearing completely. Give it a try!

Appear

This works in the opposite direction as our previous one, this time we will be making something to appear. In fact, we are going to make our previous box appear, just after it has fully disappeared.

Let's try it:

$('box').fade({duration: 4});
$('box').appear({duration: 4});

In bold, we can see our appear function call, but, though it's correct, when we try this code it seems not to work correctly.

The problem is that the appear one starts when the fade effect has not even finished. As both effects work in opposite directions, one trying to make the box appear, and the other to disappear, the result is quite strange.

One solution would be to make the appear effect to wait until the fade one has finished. We can do this by passing another option in the parameter:

$('box').appear({duration: 4, delay: 4.2});

Adding the delay option, with value 4.2, will make the appear effect to wait for 4.2 second until it starts. So our code for the fade and appear effects is now looking this way:

$('box').fade({duration: 4});
$('box').appear({duration: 4, delay: 4.2});

We could concatenate these two lines into just one:

$('box').fade({duration: 4}).appear({duration: 4, delay: 4.2});

This will exactly the same result as our previous code, but maybe is a bit more organized, though that's a question of tastes.

Morph

This function it's quite powerful, as it will let us modify any css style with the values we pass to the function. We will now see some examples. Lets prepare the necessary markup for our example. In our index.html file we are going to create another box:

<b>morph effect</b><br/><br/>	
<div id="bluebox">
</div>

And in our styles.css file, we will place this code:

#bluebox{
width: 100px;
height: 100px;
background-color: blue;
}

Now to the morph function:

$('bluebox').morph('margin-left:500px');

The result will be the box moving from left to right 500px. This function also accepts some options, like the duration one.

$('bluebox').morph('margin-left:500px', {duration: 5});

Now, our blue box will move from left to right very, very slowly. Of course, we could define a different duration if we would like to.

Could we mix this effect with our previous appear one? Sure, just add an opacity property to the bluebox div:

#bluebox{
width: 100px;
height: 100px;
background-color: blue;
opacity: 0;
}

And also add this opacity value to the morph effect:

$('bluebox').morph('opacity: 100; margin-left: 500px', {duration: 5 });

This will result in our blue box moving from left to right while appearing, more or less like this:

This morph function produces very interesting effects, that can be used in many situations, like image galleries, move contents and many others. But we can make it look even better, by adding some Scripty2 transitions.

First remove the opacity from our blue box, so we can see the full animation, edit our styles.css file:

#bluebox{
width: 100px;
height: 100px;
background-color: blue;
}

And now our morph code is going to look something like:

$('bluebox').morph('margin-left: 500px', {duration: 5, transition: 'bounce' });

With that code our little box will make a nice bounce effect when it reaches the end of its movement. But never moving further than 500px, which is the movement we have placed in the first parameter of the morph function. The bounce effect, this time, goes backwards. If we want our little box to bounce forward, we could do this:

$('bluebox').morph('margin-left: 500px', {duration: 5, transition: 'bouncePast' });

This time our blue box will bounce further than the 500px specified. Apart from this, there are many, many other, things we can do. To understand the power of Scripty2, you can take a look at the transitions page of Scripty2. This will give you an idea of what we are talking about.

http://scripty2.com/doc/scripty2%20fx/s2/fx/transitions.html

A more complex morph effect

All these effects and transitions are very nice, but moving boxes is not that interesting. Now, we are going to try something which is a bit different, just to give you some idea about how to use all those things in the real world. First we will prepare our markup in the index.html file:

<b>Another morph effect</b><br/><br/>				

<div id="slide">
<div id="slide_text">
<p id="paragraph_1" style="padding: 5px;">This would be some interesting content.<br/>
With a link also: <br/><br/><a href="#" id="next">Next</a></p>
</div>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="img/image_2.png" id="image_1"/>
</div>

Here we have a container div, with id equal to slide, with another div inside it along with an image. The slide_text div also has a paragraph inside. Now we need some css to style all this code. Open our styles.css file and add this code to it:

#slide{
width: 587px;
height: 257px;
position: relative;
overflow: hidden;
background-color: #BDC6C6;
}

#slide_text{
width: 200px;
height: 257px;
position: absolute;
background-color: #9B633F;
opacity: 0.8;
z-index: 100;
overflow: hidden;
color: #ffffff;
}

#paragraph_1 a{
color: #fff;
font-weight: bold;
}

With all this code in place, our example will be looking more or less like the next image:

Nice isn't it? Now we are going to add some Scripty2 magic to make things move! The first step will be to add some JavaScript to our index.html file:

$('paragraph_1').morph('margin-top: 500px', {duration: 2, transition: 'easeInOutBack' });
$('image_1').morph('margin-top: 500px', {duration: 2.5, transition: 'easeInOutBack' });

These two lines will make the text and the image to move out of the main div, the text a bit faster than the image, making for an interesting effect:

However, wouldn't it be nice to make things move just when we wanted to? Sure, and we even have a Next link in our text, why don't make use of it? Just modify a bit our code:

 $('next').observe('click', function(){
$('paragraph_1').morph('margin-top: 500px', {duration: 2, transition: 'easeInOutBack' });
$('image_1').morph('margin-top: 500px', {duration: 2.5, transition: 'easeInOutBack' });
});

In bold we can see the difference between our previous code and this one. We are using the observe function to register an event, targeting the link with id equal to next. We are registering the click event, so when someone clicks on the link, the image and the text will move. That's exactly what we want. The observe function is part of the prototype library, you can learn more about it here:

http://www.prototypejs.org/api/event

Though this works as expected, but we have a little problem here. When we click the link , whose href is equal to #; the link is executed and the page moves to the top but sadly, as our effect is further at the bottom of the page, we won't be able to see it.

Now we need to make the link not to work as a link, what do I mean with this? Just take a look at these modifications to the code:

$('next').observe('click', function(Event){
$('paragraph_1').morph('margin-top: 500px', {duration: 2, transition: 'easeInOutBack' });
$('image_1').morph('margin-top: 500px', {duration: 2.5, transition: 'easeInOutBack' });
Event.stop(event);
});

With the Event.stop(event); function, our link won't behave as expected. This means that when we click on the link, our morph code will be executed, but the usual link behavior, of loading another page, or going to an anchor, won't be executed.

This is very useful when we want our link to behave in a different manner.

Good, we have finished our effect completely. Of course you could enhance it a lot and build a full image gallery, or article slideshow. The possibilities are there, and Scripty2 offers us a lot of features to do as we want.

Summary

Though this is a small introduction to the great features that come with Scripty2, I think we have been able to see how powerful this library is. And it's only in it's alpha version! Surely we are going to see many things done with this library in the future.

Tabs, autocompleter, accordion, these features can be useful not only in any web page, but for any web app we want to build. That, mixed with the effects and transitions available can fill our developer toolbox with great features, and very powerful ones.

Just give the Scripty2 library a try! You won't be deceived.


Further resources on this subject:


PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: $20.99
Book Price: $34.99
See more
Select your format and quantity:

About the Author :


Jose Argudo Blanco

Jose Argudo Blanco is a web developer from Valencia, Spain. After finishing his studies he started working for a web design company. After working for six years for that company and some others, he decided to work as a freelance.

Now, after some years have passed, he thinks it's the best decision he has ever takena decision that let him work with the tools he likes, such as CodeIgniter, Joomla!, CakePHP, JQuery, and other well-known open source technologies.

For the past few months he has also reviewed some books for Packt Publishing, such as Magento 1.3 Theme Design, Magento: Beginner's Guide, Joomla! 1.5 SEO, Symfony 1.3 Web Application Development, and Joomla! with Flash. The one yet to be published is Magento Development with PHP.

Books From Packt

WordPress 2.7 Complete
WordPress 2.7 Complete

WordPress 2.7 Cookbook
WordPress 2.7 Cookbook

Plone 3 Theming
Plone 3 Theming

Building Websites with Joomla! 1.5
Building Websites with Joomla! 1.5

WordPress Plugin Development: Beginner's Guide
WordPress Plugin Development: Beginner's Guide

WordPress MU 2.8: Beginner's Guide
WordPress MU 2.8: Beginner's Guide

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

WordPress 2.8 Theme Design
WordPress 2.8 Theme Design

Your rating: None Average: 5 (2 votes)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
F
E
k
k
B
2
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software