<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Web 2.0 Example - Fade-in Box provided by Bravenet.com</title> <script type="text/javascript" src="scriptaculous-js-1.6.1/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous-js-1.6.1/src/scriptaculous.js"></script> <script type="text/javascript" src="scriptaculous-js-1.6.1/src/effects.js"></script> <style type="text/css"> .fadebox { border: 1px solid #ccc; padding: 10px; background: #efefef; } </style> <script type="text/javascript"> fadeBox = function(eleID) { new Effect.toggle(eleID,'appear'); } </script> </head> <body> <p>The following is an example what you can do using the web 2.0 javascript libraries available on the web.</p> <p>In the example, we are going to use Prototype and Scriptaculous to create your own custom growBox.</p> <p> - <a href="#" onclick="fadeBox('fadebox1');">Toggle Show and Hide of the fadeBox #1</a><br> - <a href="#" onclick="fadeBox('fadebox2');">Toggle Show and Hide of the fadeBox #2</a><br> </p> <div id="fadebox1" class="fadebox"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ultrices sollicitudin augue. Morbi eros. Cras fermentum felis sed erat. Maecenas ante nulla, facilisis non, lobortis at, auctor ut, turpis. Etiam sed leo. Vestibulum sed nisi in nibh consequat sagittis. Curabitur nec quam. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus varius euismod diam. Vivamus vitae arcu et quam mollis lacinia. Fusce aliquam ligula. <br><br> Nunc massa. Proin egestas euismod nibh. Cras in neque. Sed vel nunc ac orci laoreet venenatis. In convallis tortor ac urna. Nunc eget felis. Integer mattis tincidunt justo. Vestibulum nec enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis urna at mi tristique fermentum. Donec egestas, erat in scelerisque consectetuer, turpis tortor auctor orci, tempor blandit ante nulla vel nisl. Aliquam malesuada diam non felis. Aenean pede dui, interdum vel, rutrum at, rutrum ac, risus. Aliquam nonummy. Nulla facilisi. </div> <div id="fadebox2" class="fadebox" style="display:none;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus ultrices sollicitudin augue. Morbi eros. Cras fermentum felis sed erat. Maecenas ante nulla, facilisis non, lobortis at, auctor ut, turpis. Etiam sed leo. Vestibulum sed nisi in nibh consequat sagittis. Curabitur nec quam. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Vivamus varius euismod diam. Vivamus vitae arcu et quam mollis lacinia. Fusce aliquam ligula. <br><br> Nunc massa. Proin egestas euismod nibh. Cras in neque. Sed vel nunc ac orci laoreet venenatis. In convallis tortor ac urna. Nunc eget felis. Integer mattis tincidunt justo. Vestibulum nec enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis urna at mi tristique fermentum. Donec egestas, erat in scelerisque consectetuer, turpis tortor auctor orci, tempor blandit ante nulla vel nisl. Aliquam malesuada diam non felis. Aenean pede dui, interdum vel, rutrum at, rutrum ac, risus. Aliquam nonummy. Nulla facilisi. </div> </body> </html>
|
Fade-in Box Blog Post - Web 2.0
|
Blog Site Map
|
Site Home
|
Article Directory
|
|
Forum
|
Feeds - Free Content For Websites, Blogs & Ezines
|
