Javascript
PNG Fix for IE6 with Mootools - e24PNGFix
I use to lost about 2-3 hours a day fixing bugs at Internet Explorer 6. IE6 puts us in the disyuntiva of limit our creativity or lost the IE6 users quote.
One of the main problems of IE6 is its incompatibility with transparent PNGs. This is solved by one of its filters, so far I had [...]
Monitor the scroll with e24ScrollEvents for mootools
Introduction
David Walsh released his ScrollSpy plug-in some days ago. It have almost the same objectives as e24ScrollEvents. By then i had e24ScrollEvents almost finished for one of my projects. I didn’t stop working on it since it have some added values that makes it very easy to use. So, you are free to compare both [...]
Attract the user’s attention using e24SpotLight for mootools
Introduction
e24SpotLight is a plug-in for Mootools that lets attract the user’s attention over a region. The effect simulates a lights off letting only the desired region illuminated.
Demos
Demo1: Selecting an object
Demo2: Selecting a region
Demo3: e24Presenter + e24SpotLight
Usage
Include Mootools 1.2.2 Core inside the HTML header. Remember that you can generate an optimum version of the mootools library [...]
e24BubbleFx - Photo bubble transition effect
Introduction
e24BubbleFx is a plugin for Mootools that makes a transition between two photos. The transition comes in form of a bubble that move around the back picture discovering it.
But better we see it in action with the following demos.
Demos
Demo1: Basic
Demo2: Advanced
Usage
Include Mootools 1.2.2 Core inside the HTML header. Remember that you can generate an optimum [...]
AJAX History Manager, back button fix
One of the major issues on AJAX web applications is the accesibility and usability lacks. Many users have manies and don¡t undestands about AJAX, they only expects that if they click the back button then it must works as always and get them back to the previous screen.
Digitarald.de have developed a solution HistoryManager - The [...]
Validating the target attribute as XHTML Strict o HTML 4.0 Strict
For the standards lovers here we have a trick to simulate the “target” attribute behavior without break HTML 4.0 Strict o XHTML 1.0 Strict standards.
We will use the “rel”attribute with the ”external” value that validates correctly with the above standards. We will make an script that will look for all “<a>” elements with “rel” [...]
e24Squares - AJAX random squares image transition
Intro
e24Squares is an extension written for scriptaculous to make transitions between images with an original effect. This effect randomly generates squares that appear on different positions on the current image while the next image appears behind with a fade effect. The extension can be used as photo gallery, as slideshow, or as decorative animation [...]
Gracefully degrade with AJAX
With each new browser’s version we found new programming features that let us make more advanced AJAX effects. Even when most of these improvements are present at the major browsers that are more standard every day, there are always many reasons to found different users configurations:
Users that keep using old browser’s versions.
Users that use less [...]
e24TabMenu – Drop down AJAX menu
Introdution
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.
Demos
All tabs hidden
One tab expanded
Usage
Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24TabMenu after both:
?View Code HTML1
2
3
<script type=’text/javascript’ src=’js/prototype.js’></script>
<script type=’text/javascript’ src=’/js/scriptaculous.js?load=effects’></script>
<script type=’text/javascript’ src=’js/e24tabmenu.js’></script>
Next, write the necesary HTML code to define de menu. We will need [...]
e24Writer - Chained opacity transition
Intro
e24Writer is a plugin written for scriptaculous to gradually display a group of elements using a chained opacity transition. The elements can be either images, HTML or text.
Demos
Animating Images
Animating a Text
Usage
Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24Writer after both.
?View Code HTML1
2
3
<script type=’text/javascript’ src=’js/prototype.js’></script>
<script type=’text/javascript’ src=’/js/scriptaculous.js?load=effects’></script>
<script type=’text/javascript’ src=’js/e24writer.js’></script>
For [...]
