A+ Ajax

Jun 25

How Custom Events Will Save Us All

I am a big fan of both Andrew Dupont, and custom events.

In his presentation he goes through some very nice use cases. Some are cross cutting (e.g. the fact that you can unit test, or debug, or … so much easier) and some are specific such as:

Scripty2 animation heartbeat

PLAIN TEXT

JAVASCRIPT:

// keep the heartbeat going
setTimeout(function() {
document.fire(“effect:heartbeat”);
}, 0);

// listen in
document.observe(“effect:heartbeat”, advanceEffectByOneFrame);

// allows for nice debugging
document.observe(“keydown”, function(event) {
if (event.keyCode === Event.KEY_RIGHT) {
document.fire(“effect:heartbeat”);
}
});

Another nice example is how you can start using the new and cool EventSource while retrofitting the functionality for browsers who don’t implement the new standard:

PLAIN TEXT

JAVASCRIPT:

// new browsers
var eventSource = $(‘event_source’);
eventSource.observe(‘server-sent-event-name’, function(event) {
document.fire(‘data:received’, event.data);
});

// old browsers
new Ajax.Request(‘/legacy/polling’, {
onComplete: function(request) {
document.fire(‘data:received’, request.responseJSON);
}
});

// observer works for both
$(document).observe(‘data:received’, function(event) {
doStuff(event.memo);
});

And, there are many more great examples in the slides.

How have you been using custom events?

Tagged with: Custom • events • Save

Feb 24

Custom checkbox and radio buttons using CSS

Ajax No Comments »

In my never ending quest to find weird and wonderful ways to abuse CSS and all its little intricacies, I have come up with a pretty good way of using CSS to create custom radio and checkbox inputs without JavaScript, that are accessible, keyboard controlled, don’t use any hacks and degrade nicely in non supporting browsers. The journey wasn’t easy and I was on the brink of filing it in the “to crazy” folder, never to be seen again. Luckily I had a brain wave that paid off and actually allowed this to be a very viable solution that degrades beautifully and works in 80% of the browsers. This is my story.

customcssinputs

Ryan “the CSS Ninja” goes from here to explain his quest which includes fun CSS such as:

PLAIN TEXT

CSS:

p:not(#foo)> input + label:before
{
position: absolute;
z-index: 2;
left: 16px;
content: url(radio_normal.png);
width: 16px;
height: 16px;
margin: 0 3px 0 -16px;
}
p:not(#foo)> input[type=radio]:checked + label:after {
content: url(radio_checked.png);
}
input[type=radio]:hover + label:after,
input[type=radio]:focus + label:after {
content: url(radio_normal_hover.png);
}
input[type=radio]:hover:checked + label:after,
input[type=radio]:focus:checked + label:after {
content: url(radio_checked_hover.png);
}
input[type=radio]:hover:disabled + label:after,
input[type=radio]:focus:disabled + label:after {
content: url(radio_normal_hover_disabled.png);
}
input[type=radio]:hover:checked:disabled + label:after,
input[type=radio]:focus:checked:disabled + label:after {
content: url(radio_checked_hover_disabled.png);
}
input[type=radio]:active + label:before {
content: url(radio_normal_active.png);
}
input[type=radio]:active:checked + label:before {
content: url(radio_checked_active.png);
}

He also reminded me of pointer events:

The CSS property pointer-events allows authors to control whether or when an element may be the target of a mouse event. This property is used to specify under which circumstance (if any) a mouse event should go “through” an element and target whatever is “underneath” that element instead.

There is a lot of Ninja in this one. Nice job.