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:
<script src="scriptaculous/lib/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
<script src="scriptaculous/src/scriptaculous.js" type="text/javascript"></script>
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> tag of your page to enable change opacity effect:
<script type="text/javascript">
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>
function changeOpacity(id){
$opacityStatus = $('status'+id);
if($opacityStatus.value==0){
new Effect.Opacity('el'+id, {duration:0.5, from:1.0, to:0.3});
$opacityStatus.value = 1;
} else {
new Effect.Opacity('el'+id, {duration:0.5, from:0.3, to:0.1});
$opacityStatus.value= 0;
}
}
</script>
It's all! Download this tutorial and try it!
Download this tutorial (include Scriptaculous 1.8.1)
No comments:
Post a Comment