New jQuery plugin: Pulse

Posted on Wednesday, November 5th, 2008

This is a brand new plugin which applies a continual pulse to any element specified. ‘Pulseable’ properties include "background-color’, ‘color” ‘border-color’ and ‘opacity’. Specifying more than one property to pulse on a single element can have a pretty cool effect.

Visit the plugin page »

A quick example of what it can do:

Even though the demonstations are quite playful this plugin could potentially be used for some very practical causes.

11 Responses to “New jQuery plugin: Pulse”

#1 :: Dave Says:
November 5th, 2008 at 7:04 pm

Is it possible to have the element pulse for a set interval rather than requiring manual intervention to turn it off ?
#2 :: James Says:
November 5th, 2008 at 7:14 pm
Hi dave, great idea. A new option has been added, “duration”, an example:
```
$('#elem').pulse({
    textColors: ['red','blue'],
    duration: 5000 // i.e. 5 seconds
});
```
Thanks Dave!
#3 :: Dave Says:
November 5th, 2008 at 7:33 pm

James,

excellent, thanks for the fast response I can see this being really useful for me
#4 :: James Says:
November 5th, 2008 at 10:55 pm

Just FYI to anyone else reading this, I’ve also added a runLength option which basically allows you to specify how many pulses you want the element to go through before stopping.

It’s similar to duration in that it provides another way of terminating the pulsing automatically, but instead of specifying a length of time in milliseconds you specify the amount of times a pulse array should run before stopping. There’s more info about it on the plugin page: http://enhance.qd-creative.co.uk/demos/pulse/
#5 :: Matt Williams Says:
November 12th, 2008 at 3:49 am

I can see it in Firefox but not in IE6
#6 :: Dave Says:
November 24th, 2008 at 1:26 pm

James,

I have another question, how can I make the element (in this case a div) fade out completely after pulse has run ?

My current code looks like this:
$(’div.success’).pulse({
speed: 1000,
opacityRange: [0.2,0.9],
runLength: 3
});

Thanks
#7 :: me Says:
November 29th, 2008 at 8:28 am

hello,

can someone pls tell me how i can implement this?

i have uploaded the scripts and added the following to the head of the document:

and then in the body i added:

$(’#elem’).pulse({
backgroundColors: ['red','#00FF00','black','rgb(210,0,100)']
});

and all i get is that code displaying.

any help appreciated!

thaks!
#8 :: James Says:
November 29th, 2008 at 4:02 pm
@Dave, sorry for this late reply. I’m afraid there is no built in way to do this but you can cheat a bit. Speed is set to 1000 and will run 3 times meaning that the entire effect will last for 3 seconds. You could use setTimeout to make the div fade out after that time:
```
setTimeout(function(){
    $('div.success').fadeOut();
},3000)
$('div.success').pulse({
    speed: 1000,
    opacityRange: [0.2,0.9],
    runLength: 3
});
```
@Me (?), Did you put the code in a script tag? Insert this code into the HEAD of your document:
```
<script type="text/javascript">
$(function(){
    $('#elem').pulse({
        backgroundColors: ['red','#00FF00','black','rgb(210,0,100)']
    });
});
</script>
```
#9 :: Shane Says:
November 30th, 2008 at 4:33 pm

James, great plug-in!

I’m going to use this for error messages.
#10 :: Dave Says:
December 7th, 2008 at 10:27 am

Thanks James, good idea
#11 :: whereismarvin Says:
December 18th, 2008 at 9:40 pm

Hello :-

Works fine on a Mac using Firefox 3, but the demos on this site will not work AT ALL on Firefox/2.0.0.19 ( Mac ). Have you had similar responses from anyone else ?

Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8.1.19) Gecko/20081203 Firefox/2.0.0.19