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

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

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

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

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.

Download this tutorial

Monday, February 11, 2008

Opacity change using Scriptaculous

Scriptaculous is a great framework to implement superb animated effects for your website. It's simple to use and in general final result is awesome.

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

Download this tutorial (include Scriptaculous 1.8.1)

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
This is an example about how to use opacity change effect. You have a container layer with ID el1, a chechkbox and some content like the following:

<div id="el1">
<img src="pic-user/u1.jpg" align="left" style="margin-right:10px;"/>
<span class="check"><input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)"></span>
<span class="title">Database: design Entity-Relationship model</span>
<span class="desc">Complete the document with functional analysis</span>
</div>

When you click on the checkbox, if the checkbox was "not checked" you call a function (changeOpacity()) to set the layer opacity to 30%. If the chechbox was "checked", the function set the layer opacity from 30% to 100%. You can add new similar layers using a progressive numeration for ID (el2, el3, el4...). In this case remember to change the parameter in input in changeOpacity() function for each layer (changeOpacity(2), changeOpacity(3), changeOpacity(4)...).

Step 3: JavaScript function changeOpacity
Now, add this simple function into the <head&gt tag of your page to enable change opacity effect:

It's all! Download this tutorial and try it!

Download this tutorial (include Scriptaculous 1.8.1)

Friday, February 8, 2008

Drag and drop to order list elements with Scriptaculous

Drag and drop feature is a popular effect in modern website interfaces and a simple way to implement it is using Scriptaculous.

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

Download this tutorial

Step 1: Add scriptaculous framework
To enable drag and drop effect you have to download Scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

Step 2: HTML Code
Add a <ul>list with ID "myList" and some <li> elements with a progressive ID like in the following example:

<ul id="myList" class="listClass">
<li id="item_1">Adobe</li>
<li id="item_2">Apple</li>
<li id="item_3">Microsoft</li>
<li id="item_4">Macromedia</li>
<li id="item_5">Symantec</li>
<li id="item_6">Mozilla Foundation</li>
<li id="item_7">Skype</li>
</ul>

<p id="listNewOrder">&lt/p>

Add this javascript code below the previous code:

newOrder is a string variable which returns the new order of all elements of "myList" for example:

1,2,4,3,5,6,7

... where list element 4 has moved before list element 3. The new order is:

li element 1 --> position 1
li element 2 --> position 2
li element 3 --> position 4 (changed from position 3 to position 4)
li element 4 --> position 3 (changed from position 4 to position 3)
li element 5 --> position 5
li element 6 --> position 6
li element 7 --> position 7

If you use PHP or another server side language like ASP or Coldfusion you can save the new list order assigning the value of newOrder to an hidden <input> HTML element in this way:

$('newOrderInput').value = newOrder;

... and adding an hidden input field with id newOrderInput in your HTML code after <ul> list with ID "myList":

In this way every time you drag and drop a list item the value will be updated with the text string with the new order. Then you can use this string (for example "1,2,4,3,5,6,7") and PHP to save the new order into a database table.

Download this tutorial

Related Content
Effect appear (fade-in) using Scriptaculous
Toggle effect using Scriptaculous
Horizontal animated menu using Mootools
Mootools animated sidebar menu

Thursday, February 7, 2008

Effect appear (fade-in) using Scriptaculous

Scriptaculous Fade effect is one of my favorite effects of this framework and in this post I want to use it to implement a Digg-line sign-in bar.

My friend Ivan asked to me how to implement the same Digg-like fade-in effect which you can see when you click on the Login link on the Digg topbar. This is very simple using Scriptaculous and toggle effect with only few lines of HTML code.

Download this tutorial

Step 1: Download Scriptaculous Framework
Before to start, you have to download scriptaculous framework here and add a link to prototype.js and scriptaculous.js in the <head> tag of your page:

Step 2: HTML code
HTML code is very simple

<div id="login" style="display:none;">
Email <input name="email" type="text" /> Password <input name="password" type="text" /></div>
<a href="#" onclick="Effect.toggle('login','appear'); return false;">Login</a>

Effect.toggle() function takes as input two parameters: layer ID (in this case "login") and type of effect (in this case "appear" to simulate fade-in effect).

Download this tutorial

Saturday, January 26, 2008

Toggle effect using Scriptaculous

Another post dedicated to Scriptaculous and to a nice way to implement Toggle effect.

This tutorial explains how to implement a simple Toggle effect using Scriptaculous framework. I prepared a simple tutorial you can download to see it in action:

Download this tutorial

To use scriptaculous effect on your pages you have to add this lines of code in the <head> tag:

Then, you can apply Scriptaculous Toggle effect using this simple code, for example calling this function inside "onClick" attribute:

Effect.toggle('ID','type-of-effect'); return false

...where "ID" is the element you want to apply the toggle effect and "type-of-effect" is a toggle "sub-effect" (blind, appear, slide). I chose as toggle sub-effect "blink":

<h1 onclick="Effect.toggle('about-me','blind'); return false">About me</h1>
<div id="about-me">...some content...</div>

In this way you can apply this effect to every element using HTML "id" attribute.

Download this tutorial

Tuesday, December 18, 2007

Edit in place with Scriptaculous and Coldfusion

After my previous post about this topic (but with PHP instead of Coldfusion) I received some requests about how to implement "Edit in place" Scriptaculous effect using Coldfusion. The structure of this tutorial is the same seen in the previous post with PHP.

Step 1: index.cfm
Create a new blank page, index.cfm. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.cfmand add this code into tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
In the Step 2 of the PHP tutorial change this code's line into the function saveText():

http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);

... with:

http.open('get', 'save_text.cfm?newText='+textId_n+'&nocache = '+nocache);

Step 3: save_text.cfm
Create a new file called save_text.cfm and copy and paste this code inside itself:

<cfif isDefined('URL.newText')>
<cfquery datasource="mydatasource">
INSERT INTO MYTABLE (newText)
VALUES(#URL.newText#)
</cfquery>
<cfoutput>#URL.newText#</cfoutput>
<cfelse>
Error, please fills all fields!
<cfif>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.

Monday, December 10, 2007

Edit in place with Scriptaculous and PHP

Today's lesson explains how to implement a simple Edit in Place effect (Flickr-like) using Scriptaculous and PHP (you have to download Scriptaculous framework here).

Step 1: index.php
Create a new blank page, index.php. The file's structure is the following:

It contains a link to prototype.js and to scriptaculous framework. The <body> will contains just some lines of code with a layer which contains the text you want to modify with "Edit in Place". So, open index.php and add this code into <head> tag:

...and add the following code into the <body> tag:

<div id="myText">This is my text to modify with edit in place</div>
<script>
new Ajax.InPlaceEditor($('myText'), 'javascript:saveText("myText")', {
ajaxOptions: {method: 'get'}
});
</script>

DIV layer (with ID myText) contains text you want to modify using edit in place effect using Scriptaculous. You can also use other tags like <span>, <h1>, to contain the text to modify with edit in place. The code into <script> tag enables Edit in Place function for the content of the layer with ID myText. You can apply the same code to other HTML elements just changing the ID reference "myText" (in bold).

Step 2: ajax_framework.js
ajax_framework.js contains XMLHTTPRequest to use Ajax functionalities and saveText(): function, to save the new value into the database.

/* XMLHTTPRequest Enable */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
} else {
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();

/* -------------------------- */
/* SAVE TEXT */

var nocache = 0;
var text = '';
function saveText(textId){
textId_n = encodeURI(document.getElementById('textId').value);
textIDGlobal = textId_n;
nocache = Math.random();
http.open('get', 'save_text.php?newText='+textId_n+'&nocache = '+nocache);
http.onreadystatechange = saveTextReply;
http.send(null);
}
function saveTextReply(){
if(http.readyState == 4){
var response = http.responseText;
document.getElementById(textIDGlobal).innerHTML = response;
}

Step 3: save_text.php
save_text.php contains PHP code to save the new value into our database's table (MYTABLE). Copy and paste the following code into the page save_text.php:

<?php include('config.php'); ?>
<?php
if(isset($_GET['newText'])){
$newText= $_GET['newText'];
$insertText_sql = 'INSERT INTO MYTABLE (newText) VALUES('. $newText .')';
$insertText= mysql_query($insertText_sql) or die(mysql_error());
echo $newText;
} else {
echo 'Error! Please fill all fileds!';
}
?>

If new value is blank, you have a message error, otherwise the new value will be saved into our database.