Friday, October 28, 2011

jQuery - "getting" chains

I've been using jQuery for quite a while now. I really like its interface, often it feels very Perlish to me.

But in the past I've struggle when trying to process or access parts of a single element returned by a selector. Most of the time, I really want to grab it with an array index, e.g.
$('.special-sauce')[0].href
(just some rough example).

But that always felt wrong, against the jQuery way, like i was an outsider. Esp when its so natural do things like:
$('a.special-sauce').click( function() { // do something } );

I've tried to use the first() method to get a single element but that returns an array too. But I finally got how to use it today...

We are using jQuery Tools for overlays and some other actions. I wanted to retrieve the href attribute for the trigger object (the one that was clicked to open the overlay (aka lightbox). I tried the wrong feeling:
this.getTrigger()[0].href
and had the moment of clarity that said "that really means:
this.getTrigger().first().attr('href')
And now i get it (for now) :)

Since I want some part of the element like an attribute or value I can use the first method with either attr or val methods (or whatever part of the element I really want).

__END__

Wednesday, October 26, 2011

jQuery placeholder plugin

We have moved to using the jQuery plugin placeholder-enhanced for adding placeholders to browsers that don't support them (i'm looking at you IE9).

It seems to work better than the other plugins and libraries out there (we tried placify which had some trouble when pages resized or if forms were hidden in lightboxes).

It looks like placify creates a div with text (and class) positioned above the input element but placeholder-enhanced adds a class to input and then sets value to placeholder text. Both have positives and negatives. I can see why there are less positioning issues with placeholder-enhanced since it doesn't have to figure out the current location of the element to position a new div on top of it.

But the one thing i found interesting was that for password fields, placeholder-enhanced creates an input on top of the password input. Its a clever idea but i found a bug with IE9 (go figure) that by default password inputs w/out size have a set width. I need to patch the placeholder library to check for size of the input that it covers up. I've forked and submitted pull request on github.

The only other thing i'd like with placeholder-enhanced is way to disable adding 'placeholder' class to input elements when browser supports placeholder styling since we don't need that. It should be too tough to create new parameter. Someday :)

__END__

Tuesday, October 4, 2011

Dancer::Plugin internal sharing

I've been creating quite a few Dancer plugins recently. The nice part of a Dancer plugin is that it gives a small new set of keywords.

In some cases, I've want to provide a generic keyword interface to an object but then provide smarter business level keywords. I've found a quirk in the Dancer::Plugin interface. I couldn't find it documented anywhere but I'm sure it is.

If you want to access keywords from the same space that they are registered you need to use a different format than the:
register keyword => sub {};

You need to use the pattern:
sub keyword {
  # do stuff
}

register keyword => \&keyword;

register_plugin actually stuffs the symbols into the namespace therefore you need to share the sub names before that happens to use them.