Trendics Blog

Overview

Show a green highlight that fades away on a table row when a new record is added by a user. Add a pulsing yellow glow to a button you want the user to press next. With this open source YPulse library and YUI, both are easy to implement.

Example

View this example code here.

While both example above pulse the background color, YPulse can oscillate any attribute. So, you might use YPulse to oscilatte the opacity to make an object flash on and off the page.

Browser Support

The YPulse library should work with all the major browsers supported by YUI but has not been tested extensively.

Usage

You will need to upload ypulse.js to your webserver and you will need something like this on you page…

<div id=”my-div”>This is the element I want to pulse.</div>

<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js”></script>
<script type=”text/javascript” src=”http://yui.yahooapis.com/2.5.2/build/animation/animation-min.js”></script>
<script type=”text/javascript” src=”ypulse.js”></script>
<script>

var pulser = new YAHOO.squarebits.YPulse(
‘my-div’,
‘backgroundColor’,
‘#FFFFFF’,
‘#FFFF00′,
0.75,
0.10,
0.75,
0.75,
YAHOO.util.Easing.easeBoth,
YAHOO.util.Easing.easeBoth
);

Syntax

The YPulse constructor supports the following parameters…

• elem - The DOM element or element ID to pulse (like ‘my-div’)
• attributeName - The name of the attribute to change (like ‘backgroundColor’)
• startingValue - The starting value of the attribute (like ‘#FFFFFF’)
• endingValue - The name of the attribute to change (like ‘#FF0000′)
• s2eDuration - The number of seconds for the start-end transition
• s2eWait - The number of seconds to wait after completing the start-end transition
• e2sDuration - The number of seconds for the end-start transition
• e2sWait - The number of seconds to wait after completing the end-start transition
• s2eMthod - The YAHOO easing method to use for the start-end transition
• e2sMthod - The YAHOO easing method to use for the end-start transition

A YPulse instance object supports two methods…

• go(repeat) - Starts the pulse and executes the pulse for the specified repeat count. If repeat is omitted, the pulse never stops. If repeat is set to 1, only the start-end transition is done. If repeat is set to 2, the start-end transition and end-start transition are done
• stop() - Stops a running pulse

Download

You can download YPulse here: YPulse.

This entry was posted on Thursday, July 10th, 2008 at 4:04 pm and is filed under yui.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.