Food Recipes: scriptaculous

Showing posts with label scriptaculous. Show all posts

Tuesday, October 7, 2008

10 Useful tutorials to learn Scriptaculous

This is a list of ten useful articles about Script.aculo.us which includes practical, basic and advanced tips to help you to implement quickly modern solutions for your web projects.

What's news about Script.aculo.us? Take a look here.
If you have other interesting links to suggest, please leave a commment.

1. Creating an Ajax Application with Scriptaculous and NetBeans
This tutorial demonstrates the usage of the Java Persistence APIs to implement server side pagination (recommended for large sets of data) and to get and display the results in a text field featuring Ajax functionality.
Read more...

2. Unobtrusive and persistant Scriptaculous effects
A simple tutorial which explains how to implement a collapsable box using Scriptaculous .
Read more...

3. Create your own Ajax effects with Scriptaculous
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today.
Read more...

4. Calendar System - Easily using PHP & Script.aculo.us
This tutorial explains how to implement a calendar system using PHP and Script.aculo.us (it includes full code ready to use on your projects).
Read more...

5. Sortables with Scriptaculous, PHP, and MySQL
This tutorial illustrates how to implement sortables effect with Script.acuolo.us in 6 easy steps.
Read more...

6. 9 Slider examples with Scriptaculous
A list which includes 9 basic and advanced slider demos with Script.aculo.us.
Read more...

7. Reflector
Reflector is an useful script to reflect automatically images with a nice glass effect.
Read more...

8. Enhance your Web application with scriptaculous
In his previous Web Development Zone column, Tony Patton explained what scriptaculous is, described how to use it, and discussed why you should use it. Now he plays up some of the really cool features of this free JavaScript framework.
Read more...

9. 20 Top Scriptaculous Scripts you can�t live without
A nice collection of tutorials which include ModalBox, Sliding Menu, Sortable Lists, Collapsable elements, Cool Tips, Auto-Scrolling Page Navigation, DatePicker...
Read more...

10. SelectBox Class
This javascript class allows you to replace (X)HTML select control with a nice styled select boxes in your site.
Read more...

10 Useful tutorials to learn Scriptaculous

2. Unobtrusive and persistant Scriptaculous effects
A simple tutorial which explains how to implement a collapsable box using Scriptaculous .
Read more...

3. Create your own Ajax effects with Scriptaculous
Why let script.aculo.us have all the fun? Start building your own Ajax-driven visual effects today.
Read more...

5. Sortables with Scriptaculous, PHP, and MySQL
This tutorial illustrates how to implement sortables effect with Script.acuolo.us in 6 easy steps.
Read more...

6. 9 Slider examples with Scriptaculous
A list which includes 9 basic and advanced slider demos with Script.aculo.us.
Read more...

7. Reflector
Reflector is an useful script to reflect automatically images with a nice glass effect.
Read more...

10. SelectBox Class
This javascript class allows you to replace (X)HTML select control with a nice styled select boxes in your site.
Read more...

Sunday, April 13, 2008

Improve form usability with auto messages

Animated auto messages are useful to improve FORM usability and Scriptaculous is a great framework to use in this case.

This tutorial explains how to improve form usability adding an auto message which appears and disappears with a nice fade-in and fade-out effect when an user select a field.

I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.

Download this tutorial

Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

Step 2: HTML code
Add an input search field with an hidden input field with ID msgstatus to "save" the actual status of auto message (0=hidden; 1=visible):

<input type="text" name="name" id="name" onfocus="javascript:showMsg(1)"/>
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg1" style="display:none;">
...some html code here...
<a href="#" onClick="javascript:hideMsg(1)"> Close </a>
<div/>

<input type="text" name="email" id="email" onfocus="javascript:showMsg(2)"/>
<input id="msgstatus" type="hidden" value="0" />
<div class="msg" id="msg2" style="display:none;">
...some html code here...
<a href="#" onClick="javascript:hideMsg(2)"> Close </a>
<div/>

If you want to add other input fields remember to use a progressive numeration for each message ID (id="msg1", id="msg2", id="msg3", id="msg4"...) and change the value of the parameter in input to hideMsg() and showMsg() functions.

Step 3: JavaScript functions
Now, in order to enable Scriptaculous fade-in and fade-out effects, add this code into the page on your page for the function showMsg() which displays an auto message when an user click on input field:

...and this code for hideMsg() function to hide the menu when an user click on the link "close":

function hideMsg(idElement){
idEl= idElement;
statusMenu = document.getElementById('msgstatus');
if(statusMenu.value==1){
statusMenu.value=0;
Effect.toggle('msg'+idEl, 'appear'); return false;
}
}</script>

How you can see code and structure are very simple to understand and ready to reuse in your projects. Download the zip file with the full code, including CSS and Scriptaculous framework.

Download this tutorial

Improve form usability with auto messages

I used Scriptaculous toggle effect to implement it. For more info download the full code or take a look at how it works.

Download this tutorial

Step 1: include scriptaculous libraries
Create a new page index.html and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

Step 2: HTML code
Add an input search field with an hidden input field with ID msgstatus to "save" the actual status of auto message (0=hidden; 1=visible):

...and this code for hideMsg() function to hide the menu when an user click on the link "close":

How you can see code and structure are very simple to understand and ready to reuse in your projects. Download the zip file with the full code, including CSS and Scriptaculous framework.

Download this tutorial

Sunday, April 6, 2008

Scriptaculous effects compilation ready to use

This post is a compilation of five Scriptaculous tutorials ready to use in your projects (with source code to download) inspired to some Web 2.0 sites.

It includes: images slider Flickr-like, opacity change, drag and drop to reorder a list, fade-in effect and Edit in Place.

1. Simple images slider to create Flickr-like slideshows
A simple image slider ready to use to implement a Flickr-like slideshow.

2. Opacity change using Scriptaculous
This tutorial explains how to use Scriptaculous to implement a nice opacity change effect for a layer and its content.

3. Drag and drop to order list elements with Scriptaculous
This tutorial explains how to use Scriptaculous to implement an HTML list with drag and drop feature to reorder list elements.

4. Effect appear (fade-in) using Scriptaculous
Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar.

5. Edit in place with Scriptaculous and PHP
This tutorial explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP

Scriptaculous effects compilation ready to use

1. Simple images slider to create Flickr-like slideshows
A simple image slider ready to use to implement a Flickr-like slideshow.

2. Opacity change using Scriptaculous
This tutorial explains how to use Scriptaculous to implement a nice opacity change effect for a layer and its content.

3. Drag and drop to order list elements with Scriptaculous
This tutorial explains how to use Scriptaculous to implement an HTML list with drag and drop feature to reorder list elements.

4. Effect appear (fade-in) using Scriptaculous
Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar.

5. Edit in place with Scriptaculous and PHP
This tutorial explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP

Sunday, March 2, 2008

Simple images slider to create Flickr-like slideshows

If you like Flickr slideshow, this article explains how to implement it using Prototype-UI framework.

Since long time I was looking for a simple way to implement a Flickr-like slideshow ("image carousel") and finally I found a good compromise between complexity and result to implement it using Prototype-UI, an awesome JavaScript framework based on Prototype and Scriptaculous.

So, to help my readers ;) I implemented a slideshow ready to use and this step-by-step tutorial explains how to customize it and use it in your web projects. Not fear! It's really simple!

Last update: March 10, 2008 - IE6 issue fixed

Download this tutorial

Step 1: HTML code
The HTML code for this tutorial is very simple. You have to include in the <head> tag of the page you want to display your slideshow these files:

..and this CSS file to stylize your slideshow:

Now you can add the following code into the <body> tag:

<li>...some content here.. </li>
<li>...some content here.. </li>
....

</ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>

You have to put the content you want to display on your slideshow (for example an image) into a <li> element of the <ul> list:

If you use a server side language (PHP, Coldfusion, ASP...) you can populate dinamically the list. For example if you are a PHP developer you could use some code like this:

<?php
// Include connection to your database
include('dbconnection.php');
$getImages_sql = 'SELECT * FROM IMAGES';
$getImages mysql_query($getImages_sql);?>
<ul>
<?php while ($row = mysql_fetch_array($getImages {?>

<?php } ?>
</ul>

... and add this these lines of code before to close the <body> tag:

Step 2: CSS code to stylize your slideshow
You can modify the look of your simply modifying the related style sheet. For example to change the slideshow width (to display in this way more or less images on your slideshow) you can change the width attribute of the following CSS elements:

#horizontal_carousel {
width: 250px;
height: 100px;
padding:10px;
background:#f6f6f6;
border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
width: 260px;
overflow: hidden;
}

...or if you want to change the look of horizontal previous / next buttons you can change the following code:

#horizontal_carousel .previous_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_prev.png) no-repeat;
z-index: 100;
cursor: pointer;
}

#horizontal_carousel .next_button {
float: left;
width: 23px;
height: 7px;
background: url(img/but_next.png) no-repeat;
z-index: 100;
cursor: pointer;
}

Internet Explorer 6 Issue Solved
Some readers signaled me an issue with Internet Explorer 6. An anonymous friend suggested the solution to fix it:

#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}

Thanks!

Download this tutorial

Simple images slider to create Flickr-like slideshows

Download this tutorial

Step 1: HTML code
The HTML code for this tutorial is very simple. You have to include in the <head> tag of the page you want to display your slideshow these files:

..and this CSS file to stylize your slideshow:

Now you can add the following code into the <body> tag:

<li>...some content here.. </li>
<li>...some content here.. </li>
....

</ul>
</div>
<div class="buttons">
<div class="previous_button"></div>
<div class="next_button"></div>
<br />
</div>

You have to put the content you want to display on your slideshow (for example an image) into a <li> element of the <ul> list:

If you use a server side language (PHP, Coldfusion, ASP...) you can populate dinamically the list. For example if you are a PHP developer you could use some code like this:

<?php } ?>
</ul>

... and add this these lines of code before to close the <body> tag:

#horizontal_carousel {
width: 250px;
height: 100px;
padding:10px;
background:#f6f6f6;
border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
width: 260px;
overflow: hidden;
}

...or if you want to change the look of horizontal previous / next buttons you can change the following code:

Internet Explorer 6 Issue Solved
Some readers signaled me an issue with Internet Explorer 6. An anonymous friend suggested the solution to fix it:

#horizontal_carousel .container {
position:relative;
width: 555px;
overflow: hidden;
}

Thanks!

Download this tutorial

Monday, February 18, 2008

Gettyone-like search options menu with Scriptaculous

Another great menu which uses Scriptaculous Fade effect to appear and disappear.

My friend Thomas asked to me how to implement a Gettyone-like search options menu which display a layer with some search options below the input search field, when an user click on the input field to searching for something.

The code is very simple and I added a nice Scriptaculous toggle - appear effect to display/hide the search options menu.

Download this tutorial

Step 1: include scriptaculous libraries
Create a new page index.html and addadd a link to prototype.js and scriptaculous.js in the <head> tag of your page:

Step 2: HTML code
Add an input search field with an hidden input hiddenStatusMenu to "save" the actual status of the search options menu (0=hidden; 1=visible) with ID searchMenu initially hidden:

<input type="text" name="search" id="search" onclick="javascript:showMenu()"/>
<input id="hiddenStatusMenu" type="hidden" value="0" />
<div id="searchmenu" style="display:none;">
...some html code here...

<a href="#" onClick="javascript:hideMenu()"> Close </a>
<div/>

Step 3: JavaScript functions
Add this code into the <head> page on your page for the function showMenu() which display the menu when an user click on the input search field:

function showMenu(){
statusMenu = document.getElementById('hiddenStatusMenu');
if(statusMenu.value == 0){
statusMenu.value=1;
Effect.toggle('searchmenu','appear'); return false;
}
}

...and this code for hideMenu() function to hide the menu when an user click on the link "close":

function hideMenu(){
statusMenu = document.getElementById('hiddenStatusMenu');
if(statusMenu.value == 1){
statusMenu.value=0;
Effect.toggle('searchmenu','appear'); return false;
}
}

How you can see the code and the structure is very simple to understand. Download the zip file whit the full code, including CSS and Scriptaculous framework.