PDA

View Full Version : opacity using prototype



dfend
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.

Thanks.

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

Works fine here in Safari and Chrome:

http://madrobby.github.com/scriptaculous/effect-opacity/

Working demo code:


<!DOCTYPE html>
<html>
<head>
<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/1.7.0.0/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
</head>
<body>
<div id="opacity_demo" style="width:100px; height:100px; background:#ccc;"></div>
<ul>
<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>
</ul>
</body>
</html>