Ajax Updates

Posted by education training on Monday, August 24, 2009

Ajax Updates

Change Opacity using Scriptaculous

Posted: 24 Aug 2009 10:21 AM PDT

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.

opacity Change Opacity using Scriptaculous

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

 Javascript |  copy code |? 
1
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> 
2
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script> 
3
 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:

 HTML |  copy code |? 
1
<div id="el1"> 
2
<img src="pic-user/u1.jpg" align="left" style="margin-right:10px;"/> 
3
<span class="check"><input type="checkbox" id="status1" value="0" onClick="javascript:changeOpacity(1)"/></span> 
4
<span class="title">Database: design Entity-Relationship model</span> 
5
<span class="desc">Complete the document with functional analysis</span> 
6
</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" "head" tag of your page to enable change opacity effect:

 Javascript |  copy code |? 
01
<script type="text/javascript"> 
02
function changeOpacity(id){ 
03
$opacityStatus = $('status'+id); 
04
if($opacityStatus.value==0){ 
05
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3}); 
06
$opacityStatus.value = 1; 
07
} else { 
08
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1}); 
09
$opacityStatus.value= 0; 
10
} 
11
} 
12
</script>
 It's all! Download this tutorial and try it!

Download: http://www.box.net/shared/0ep0j35c8s
Source: http://woork.blogspot.com/2008/02/opacity-change-using-scriptaculous.html
 
   
tafbutton blue16 Change Opacity using Scriptaculous
  
Related Listings:
  1. E24TabMenu – Drop Tabs for Scriptaculous e24TabMenu is a plugin written for scriptaculous. It is a...
  2. Scriptaculous Effect Script Script.aculo.us is a set of JavaScript libraries to enhance the...
  3. Horizontal and Vertical Accordion with scriptaculous This is a lightweight Horizontal and Vertical accordion that is...
 		 
 
  
 Drag n Drop to order list Elements 
 
 Posted: 24 Aug 2009 10:10 AM PDT
 
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.

orderlist Drag n Drop to order list Elements

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:

 Javascript |  copy code |? 
1
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script> 
2
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
 

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

 HTML |  copy code |? 
01
<ul id="myList" class="listClass"> 
02
<li id="item_1">Adobe</li> 
03
<li id="item_2">Apple</li> 
04
<li id="item_3">Microsoft</li> 
05
<li id="item_4">Macromedia</li> 
06
<li id="item_5">Symantec</li> 
07
<li id="item_6">Mozilla Foundation</li> 
08
<li id="item_7">Skype</li> 
09
</ul> 
10
<!-- Display a string with the new order after drag and drop here --> 
11
<p id="listNewOrder"></p> 
12
 
Add this javascript code below the previous code:
 Javascript |  copy code |? 
01
<script type="text/javascript" language="javascript" charset="utf-8"> 
02
Sortable.create('myList',{ghosting:false, constraint:true, hoverclass:'over', 
03
onChange:function(element){ 
04
// Total elements in the list (in this case 7 <li> element) 
05
var totElement = 7; 
06
var newOrder = Sortable.serialize(element.parentNode); 
07
for(i=1; i< =totElement; i++){ 
08
newOrder = newOrder.replace("myList[]=",""); 
09
newOrder = newOrder.replace("&",","); 
10
} 
11
// display the string with the new order in the &ltPgt; with id listNewOrder 
12
$('listNewOrder').innerHTML = 'New Order: ' + newOrder; 
13
} 
14
}); 
15
</script></li></script>
 
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:

 HTML |  copy code |? 
1
li element 1 --> position 1 
2
li element 2 --> position 2 
3
li element 3 --> position 4 (changed from position 3 to position 4) 
4
li element 4 --> position 3 (changed from position 4 to position 3) 
5
li element 5 --> position 5 
6
li element 6 --> position 6 
7
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:

 Javascript |  copy code |? 
1
$('newOrderInput').value = newOrder;
 

... and adding an hidden input field with id newOrderInput in your HTML code after
 
   
tafbutton blue16 Drag n Drop to order list Elements
  
Related Listings:
  1. Simple Drag n Drop When the ‘#’ link in the example boxes is activated...
  2. Drag Drop Tree – EXTJs This script shows basic drag and drop node moving in...
  3. Dynamic Drag n Drop With jQuery And PHP Drag'n drop generally looks hard-to-apply but it is definitely not...
 		 
 
  
 Prototype Textbox List 
 
 Posted: 24 Aug 2009 09:54 AM PDT
 
auto Prototype Textbox List
This is the Prototype version of the extended script by Guillermo Rauch. As with the previous script, this script has been converted and operates like the original. An extended and upgraded version will be posted later on this week, if you have any comments or requests, please post them and I will try to include all the requested features in the upcoming Proto release.

Here is the original post by Guillermo that describes the script:

In my previous blogpost I explained how to extend TextboxList to add closing functionality via a link added to each box. But it was missing an important ingredient: autocompletion!

Again, all we have to do is extend the TextboxList class, override some methods, some events, and create some new ones (all prefixed by auto)

It works by caching all the results from a JSON Request and feeding them to the autocompleter object. When a item is added as a box, it' removed from the feed array, and when the box is disposed it's added back, so that it becomes available in the list when the user types.

Another new feature is that you'll be able to let it add boxes from the HTML directly:
 HTML |  copy code |? 
1
<label>FacebookList input</label> 
2
<input id="facebook-demo" type="text" /> 
3
<p id="facebook-auto"> </p> 
4
<p class="default">Type the name of an argentine writer you like</p> 
5
<ul class="feed"> 
6
	<li>Jorge Luis Borges</li> 
7
	<li>Julio Cortazar</li> 
8
</ul>
 
The constructor now takes new parameters to configure the autocompletion, like the minimum number of characters to trigger the dropdown, and more

Demo: http://www.interiders.com/wp-content/demos/ProtoAutocompleteList/test.html
Download: http://www.interiders.com/wp-content/uploads/2008/02/protoautocompletelist.rar
Source: http://www.interiders.com/2008/02/11/prototextboxlist-meets-autocompletion/
 
   
tafbutton blue16 Prototype Textbox List
  
Related Listings:
  1. Autocomplete TextboxList Script Extend TextboxList to add closing functionality via a link added...
  2. TextboxList Script TextboxList to add closing functionality via a link added to...
  3. Ajax Post Editor 2.0 Script Using postEditor you can tabulate without losing your focus and...
 		 
 
  
 






































0
comments:
        












Post a Comment






Note: Only a member of this blog may post a comment.