jQuery pulse question

Question

I'm using a slightly modified version of the wonderful pulse plug-in from James Padolsey. It provides the pulse functionality without having to link to jQuery-UI, which for me is great since I already have jQuery linked and don't want to bother with another set of tools if I don't have to...

My question is, is it possible to have only the focus border pulse, rather than the entire element. With the current implementation, the entire element pulses, but I want only the focus border to do so and if possible, only when the border is visible (i.e., the user has tabbed to a link).

Thanks in advance,

Aaron Chauvin

Edit: Here's a test page to demonstrate my dilema

Edit Edit: Ok, guess I should've asked this question differently... My current implementation references the elements with classes "link" & "piclink". Is it possible to specifically reference the focus border?

Edit Edit Edit: I've found some JS functions which allow the manipulation of CSS rules in stylesheets... I'm going to try to use these in conjunction with the above modified plug-in in order to achieve what I am after. I'll update with my findings.

You are really missing out if you haven't leveraged all that Jquery UI has to offer. Just the buttons and themeroller alone are reasons to load the library. — bpeterson76, Jun 20 '11 at 22:20
I understand where you're coming from, but with my site, I don't make use of any of those features, so.... — Aaron Chauvin, Jun 20 '11 at 22:26
your question is all over the place. if you post a code sample to jsfiddle.net, that might help us help you — Jeff, Jun 21 '11 at 02:16
Take a look at the test page linked in the first edit... on that page, all elements with class "link" or "piclink" pulse. I want just the focus border to pulse and if possible, only when the focus border is visible (a user tabbed to a link). — Aaron Chauvin, Jun 21 '11 at 02:42

score 1 · Accepted Answer · answered Jun 21 '11 at 03:55

1

While I didn't look at the plugin, hopefully this little snippet will help a bit to your own solution:

Given this css:

.blinky {
    background-color:blue;
    color:white;
    outline-width:5px;
    outline-style:solid;
    outline-color:green;
}

You can write something like:

// in on ready
$('.blinky').focus(function(){
   $(this).animate({
    'outline-width': '0px'
   }, 500, function() {
      animateBorder(this,5);
   });
});
// elsewhere
function animateBorder(context,px)
{
    $(context).animate({
        'outline-width': px+'px'
       }, 500, function() {
           // make sure its still focused before calling again
           if(this===document.activeElement){
               animateBorder(context,(px>0)?0:5);
           }
       }
    );
}

Here is a simple jsfiddle example. Click the button to set the focus, which starts the animation, then click somewhere else on the page so it loses focus and stops animating.

Basically, it is just animating the size of the outline border from a given amount to 0, and back.

It then calls recursively the same animate function so that it stays in a continuous loop. But, before each recursive call it checks to make sure that the element is still the active one.

Hopefully from here you can adjust this to fit what you need, as it doesn't answer your question directly (sorry!).

answered Jun 21 '11 at 03:55

WSkid

2,736
2
22
26

Thanks, this is along the lines of what I'm talkin' about! I'm going to adjust it to change the opacity rather than the width of the border though (if possible) and report my findings. btw, I've seen this type of code before, but never knew exactly what was goin on: "(px>0)?0:5)" It's apparent that it's a conditional stmt, but what is the "?0:5" doing? – Aaron Chauvin Jun 21 '11 at 20:08
1

I don't think outline has a opacity property-- if you really want to go that route you would need to make another
that sits behind your element and only show it (and blink it) on focus, and change it to hidden on un-focus. The ()?: is a tertiary statement. Basically it evaluates the stuff in parens, if its true it does the left side of the :, false the right side. So in that case if px is greater than 0 - send 0, else send 5.
– WSkid Jun 21 '11 at 20:27
Awesome, thanks so much for the pointers! I want to use the outline property because it doesn't mess with the flow of the page, whereas the border property does. Is there a way to get the border _not_ to throw off the flow? – Aaron Chauvin Jun 21 '11 at 20:43
1

Not reliably cross-browser no... most sites I've seen with similar effects (like a glow-y effect) do the hidden div that shows on focus/mouse over. For how to do that, I'd search SO for CSS relative layout or how to position element behind using relative - you have to worry about z-index, transparency, and other issues that a full-answer would have figured out. – WSkid Jun 21 '11 at 21:15
You could use the `outline` property; you don't get a lot of things that `border` can do (such as rounded corners), but it works on (AFAIK) every browser. The more modern path would be to use `box-shadow`, which lets you do much more than a solid border, but only more recent browsers support it. – Forest Katsch May 19 '13 at 23:22

jQuery pulse question

1 Answers1