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.

26 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
#12 :: Code Monkey Says:
January 22nd, 2009 at 3:40 pm

Hi! I love the plugin and that’s a great effect you’ve used on the PNG for the demo

I wondered if you would consider a callback function option (I think someone mentioned it above also), to call a user’s function when the pulse has finished running.

$(’#item’).pulse({
backgroundColors: ['red','yellow'],
duration: 5000,
callback: function(){
alert(’finished pulsing!’);
}
});

Keep up the great work!
#13 :: Ryan Says:
February 5th, 2009 at 7:15 pm

Hey, great plugin.

Has anyone tried to pulse more than one item though? I find even if I start the items at the same time, and same speed, it doesn’t take very long for them to get right out of whack. Anybody know of a way to fix this?
#14 :: M1ke Says:
February 18th, 2009 at 7:46 pm

Hey, great plugin, I’m using it to attract attention to confirmation messages. I concur with Code Monkey that a callback would be fantastic. Also I’ve used it as part of an “each” function and get the current item colour as a var beforehand. Using this variable name in the pulse object works, but for some reason it creates an error in Firefox’s log:

“Error: Permission denied to call method Location.toString”

So maybe its having trouble getting the variable from outside and using it in the object?

Cheers for the plugin!
#15 :: BobaRobbet Says:
February 22nd, 2009 at 4:54 am

Um . . isn’t this kinda like that “marquee” thing that we couldn’t wait for folks to quit using? B^)
#16 :: Brandon Thomson Says:
February 24th, 2009 at 1:04 pm

Thanks James, way cool plugin.

Ryan, I don’t think it was meant to keep the pulses synchronized. jQuery in general is asynchronous.
#17 :: Mark L Says:
March 24th, 2009 at 6:32 pm

Hi James,

This is a very cool plugin, I’m having lots of fun with it!

Here is one strange scenario where it seems to break, however. BTW, I’m using jQuery 1.3.1…

In FF3, the following code works fine. In IE7, it breaks at the 4th call to pulse _only_ if the first color is set to darkgrey. If you use darkgrey in another position, or a different color in the first position, it works fine. Weird, huh??

Let me know if you need the style sheet.

— code —

$(document).ready(function() {
$(’div#loadmsg1′).pulse({textColors: ['darkblue','darkgrey','lightgrey','blue'], speed:800});

$(’div#loadmsg2′).pulse({textColors: ['green','darkgreen','darkgrey','lightgrey'], speed:800});

$(’div#loadmsg3′).pulse({textColors: ['lightgrey','red','darkred','darkgrey'], speed:800});

$(’div#loadmsg4′).pulse({textColors: ['darkgrey','lightgrey','orange','darkorange'], speed:800});

Main Title Goes Here

Loading chart data…

Loading chart data…

<!——>

Loading action list…

Loading data list…

— end code —
#18 :: Mark L Says:
March 24th, 2009 at 6:37 pm

Hi James,

This is a very cool plugin, I’m having lots of fun with it!

Here is one strange scenario where it seems to break, however. BTW, I’m using jQuery 1.3.1…

In FF3, the following code works fine. In IE7, it breaks at the 4th call to pulse _only_ if the first color is set to darkgrey. If you use darkgrey in another position, or a different color in the first position, it works fine. Weird, huh??

Let me know if you need the style sheet.

— code —

$(document).ready(function() {
$(’div#loadmsg1′).pulse({textColors: ['darkblue','darkgrey','lightgrey','blue'], speed:800});
$(’div#loadmsg2′).pulse({textColors: ['green','darkgreen','darkgrey','lightgrey'], speed:800});
$(’div#loadmsg3′).pulse({textColors: ['lightgrey','red','darkred','darkgrey'], speed:800});
$(’div#loadmsg4′).pulse({textColors: ['darkgrey','lightgrey','orange','darkorange'], speed:800});

Main Title Goes Here

Loading chart data…

Loading chart data…

<!——>

Loading action list…

Loading data list…
#19 :: Mark L Says:
March 24th, 2009 at 6:39 pm

James - I used the pre tags on the second submission per the help screen… didn’t seem to make a difference

-Mark
#20 :: Mark L Says:
March 24th, 2009 at 6:42 pm

Once more, with the _correct_ pre tag lang to start

$(document).ready(function() {
$(’div#loadmsg1′).pulse({textColors: ['darkblue','darkgrey','lightgrey','blue'], speed:800});
$(’div#loadmsg2′).pulse({textColors: ['green','darkgreen','darkgrey','lightgrey'], speed:800});
$(’div#loadmsg3′).pulse({textColors: ['lightgrey','red','darkred','darkgrey'], speed:800});
$(’div#loadmsg4′).pulse({textColors: ['darkgrey','lightgrey','orange','darkorange'], speed:800});

Main Title Goes Here

Loading chart data…

Loading chart data…

<!——>

Loading action list…

Loading data list…
#21 :: Biser Says:
April 6th, 2009 at 5:55 pm

Is there way to delay pulsing?
#22 :: Elija Says:
June 1st, 2009 at 4:52 pm

I love this plugin but I am having a problem with Firefox 2 on Windows.

The error is “cannot covert recover to an integer”

The code is:

$(’#messageMenuItem’).pulse({
backgroundColors: ['rgb(165,211,234)', 'rgb(100,174,210)'],
textColor: ['black','white'],
opacityRange: [0.3, 0.8]
});
#23 :: Wouter Says:
June 11th, 2009 at 9:57 am

Hi there,

This plugin is just what I was looking for, but the font-rendering after pulsing is not correct in IE7; there seem to be some

Can’t find any suggestions elsewhere.

Do you have any idea?

Hope to hear from you!
Wouter
#24 :: scherii Says:
August 1st, 2009 at 1:19 pm

hi!

is it possible to use background-images instead of colors?

greets
#25 :: Adam Messinger Says:
August 28th, 2009 at 8:08 pm

@Wouter: If the text looks jagged and aliased after the pulse animation completes, the problem you’re seeing is jQuery’s IE ClearType bug. I ran into the same issue. A fix is described here, and can be implemented using setTimeout() — similar to the example in comment #8. It would be great if this could be incorporated into the plugin itself.

A few other issues I noticed (I am fading between two background colors either 2 or 3 times):

When using the runLength setting in Firefox 3.5, the background color simply disappears on the last pulse instead of fading out. This may happen in other browsers as well; I switched to using duration before I could find out. The duration setting doesn’t have this problem.

In Safari 4 (on Windows) and Chrome 2, once the script is cached the target element (a div singled out by ID in my case) only pulses once. This doesn’t happen in Safari 3.2 (also Windows).

IE8 was giving me an “invalid property value” error, with a line number that placed the problem code in the color animation plugin that you’ve included at the bottom of yours. I downloaded another copy of the color animation plugin, ran it through JSMin on the “conservative” setting, and used the result to replace the copy that’s part of your pulse plugin. This resolved the error.

Doesn’t seem to work in Firefox 2. I’m getting the same error Elija mentioned in comment #22: “can’t convert recover to an integer.”

Thanks for the great plugin.
#26 :: Victor Says:
September 16th, 2009 at 2:34 am

I’m really liking the plugin, and appreciate your making it available to us “simple” folk

I am nevertheless observing the same symptom described by Wouter above: after I call .recover() to finish the pulsing, my fonts look smeared. The same applies to the outlines of images contained within the element pulsing.

Any ideas on how to fix this?

Thanks a lot in advance! Great tool!