Archive | Script.aculo.us RSS for this section

Web Design Tip #4: Using ToolTips Helps a LOT!!!!

ToolTips are really useful. If you are considering of making a web start-up. This tip would surely come in handy.

According to wikiperdia:

” The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with supplementary information regarding the item being hovered over “

Where can we use ToolTips?

Most of the time, designers are not sure when we should use ToolTips. Lets us imagine a scenario where in user has to fill details. It would be really nice to put down a form tooltip to guide user on do’s-n-dont’s.

UserName <input type=”text”>

Now, if we apply a form tooltip, at the right-hand side a tip would appear when the user clicks on the text box.

“Choose username as smart as ur”

This not only helps in guiding the user about the details but also helps in creating humor ūüôā

Which are the free ToolTips we can use?

Im using YUI{Yahoo UI library} and it has some really powerful features for tooltips. Alternatively one can also use the below mentioned libraries which can surely help in grooving the UI.

1. ProtoTIP : Simple, sleak, beautiful, can add effects and AJAX support. Good for Prototype+ Scriptaculous libraries {Im using it as well}

2. Ask The CSS Guy : ONLY useful for forms

3. Nifty Corners Cube: Awesome library perfect for all rounded-corner needs

4. Last but not least, Google it ūüôā

If you know of any other library, drop in comments, I shall update the post.

Related Posts:

Web Design Tip#1: Yellow Fade Technique

Web Design Tip#2: Alternative Row colors for Rowset

Web Design Tip#3: Epicentric Designing

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book {My Book} at Packt official site
http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Advertisements

Tutorial: How to make Script.aculo.us Based Slideshow

Before you go on to read this article. If your a newbie to using Script.Aculo.us AJAX library, I would recommend my previous post on getting started with Script.Aculo.us.

Read the article here

Okay, so I presume that you have gone through the previous tutorial. In this tutorial we will see how to make a simple slideshow for our website. You can also download the script along with HTML file at the bottom of the tutorial.

Slideshow’s are pretty common among webstites today. But, most of them being in Flash. Since we can add the same beauty using AJAX I thought of giving it a shot.

So lets get started!!! Start Javascript functionality here!!!

<script type=”text/javascript”>

var slides = array(‘slide1′,’slide2′,’slide3’);¬†¬†¬†¬†¬† // we define a array with all the div-Id’s of the slides.

we have to define a variable “wait” so lets declare and assign some value to it.

var wait = 500;    // interval and time in milliseconds

1. We need the slideshow to start as soon as the site is launched.

For that we have to define a javascript function.

function start_slideshow() {

setInterval(SlideShow(), wait);  // This is a javascript function which acts as a timer.

}

Now, we need to define the actual functionality for the slideshow.

function SlideShow() {

Effect.Fade(Slides[i], { duration:1, from:1.0, to:0.0 });
i++;
if (i == 3) i = 0;
Effect.Appear(Slides[i], { duration:1, from:0.0, to:1.0 });

}

2. We have to add this to our html code.

<body onload=”start_slideshow()”>

3. Lets add some slides to the page.

<div id=”slideshow-content”>
<div class=”slide1″ id=”slide1″>
<h2>My First Slide</h2>
<p> Add some content for your first slide.
</p>
</div>                   // First slide div ends here
<div class=”slide2″ id=”slide2″ style=”display: none;”>
<h2>My Second Slide</h2>
<p> Add some content for your second slide.
</p>
</div>              // Second slide div ends here
</div>

Imp Note: Note how we must use an outer DIV tag to use this. Its a must to have an outer DIV tag.

Now, just put all the code in one place and you can see your slideshow working!!!!

If you have tried/ have any suggestions to improve it pls drop in comments.

Cheerz
Shri

PS:
1] Planning to write a tutorial on slideshows based on images with various control effects.
2] You can also download the code in attachments.

Download the tutorial and see it working

Download: slideshow.txt

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

PHP and Script.aculo.us Book


http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Tutorial: How to use Script.aculo.us effects?

Okay, so its been a long time since I have posted any How-To’s. So, I decided to write down one for How to use Script.aculo.us effects?

Script.aculo.us is an javascript library to enhance the UI and the user experience. We are also using the same in our OpenIndx projects as well. I have mentioned it here in my previous post also.

Before, you get to hack this library, grab it from here.

Now, presuming that you have the library with you, lets rock!!!

A simple HTML file : index.html

<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>

<body>
<h2>Hello AJAX Effects</h2>

<div id=”test_this”>¬† {Div which we will be adding effects to}

<table>  {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>

</tr>
</table>
</div> {DIV ends}
</body> {Close body}
</html> {Close HTML}

Now, this was just a simple html code to insert a table which will be having fields username, password and submit button.

Lets add some Script.aculo.us effects to this code.

<html>
<head>
<link rel=”stylesheet” href=”../scriptaculous.js> {Here mention the path of the library}
</head>

<body>
<h2>Hello AJAX Effects</h2>

<div id=”test_this”>¬† {Div which we will be adding effects to}
<table>  {a simple table with three rows }
<tr>
<td>Username: <input type=”text” name=”first”></td>
<td>Password: <input type=”password” name=”password”></td>
<td>Submit: <input type=”button” name=”submit”></td>
</tr>
</table>
</div>

<a href=”#” mce_href=”#” onclick=”Effect.Fade(‘test_this’);”> {here ‘test_this’ mention the “div” you need to add effect to} Fade Me</a>

</body>
</html>

Similarly, you can also add other effects, in this flow.

<a href=”#” mce_href=”#” onclick=”Effect.Shake(‘test_this’);”>¬†Shake Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Appear(‘test_this’);”>Appear Back</a>
<a href=”#” mce_href=”#” onclick=”visualeffects(‘test_this’,’slide’);”>Slide Me</a>
<a href=”#” mce_href=”#” onclick=”Effect.Grow(‘test_this’);”>See Me Grow</a>

For further reference on effects, please refer here

Do let me know if this helps you, in giving a overview of how-to use Script.aculo.us Effects. Drop in the comments, if you have any suggestions too.

Cheerz
Sridhar

If you are reading article, you might also be interested in the PHP and Scriptaculous Book I have authored.

The book gives you insights about effects, drag-n-drop, slideshows, applications, auto-completion, in-place editing and more. Complete code snippets and explanations.

CHECK out and BUY the PHP and Script.aculo.us book at Packt official site

PHP and Script.aculo.us Book

PHP and Script.aculo.us Book

http://www.packtpub.com/php-and-script-aculo-us-web-2-0-application-interface/book

Now, after CamStudio. its Script.aculo.us + OpenIndx

I was like busy for now 2 weeks, deciding which AJAX library to use with OpenIndx.

I have tried enough of them now, which includes Dojo, OpenRico, YUI, Script.aculo.us.

What features am I looking for in a Javascript AJAX library?

These features are a must for OpenIndx:

Drag-n-Drop
Fade-In/Fade-out
Flexible with PHP
Inline Editors/Multi-Line editor/ Full-Fledge editor integration(TinyMCE/FCkeditor)
Sliders

After all these screening I have decided to go with script.aculo.us.

After All its about UI, Honey!!!

So if you are one who likes the AJAX-powered functionality in WordPress. I must tell you even wordpress is using Script.aculo.us

Who else using Script.aculo.us?

To name some of the key projects WordPress, Apple etc.

So what does it mean anyway?

Expect beautiful UI and powerful functionality.

When will we see it?

Did I tell you the release date is June 07. Yes, it would just be a alpha version with all basic features first. Based on your feedback we will be modifying and adding new features on requests.

okay, so keep hanging around. Be good, Take care

Cheerz
Shri