View Full Version : opacity using prototype

06-04-2012, 07:52 PM
I need to implement opacity using prototype. The code I written for opacity ( new Effect.Opacity(element.id, ..) is not working with safari and chrome. Any suggestion on how to use opacity using prototype that will work for all the browsers.


06-04-2012, 09:35 PM
What versions of Prototype/Scriptaculous are you using?

Works fine here in Safari and Chrome:


Working demo code:

<!DOCTYPE html>
<title>Opacity Demo - Prototype/Scriptaculous</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
<div id="opacity_demo" style="width:100px; height:100px; background:#ccc;"></div>
<li><a href="#" onclick="new Effect.Opacity('opacity_demo', { from: 1, to: 0 }); return false;">Hide this box</a></li>
<li><a href="#" onclick="new Effect.Opacity('opacity_demo', { from: 0, to: 1 }); return false;">Show this box</a></li>