Seperating visual effects from HTML using jQuery

I remember reading Matt Ryall's blog on 10 things every web developer should know a while back and I would like to highlight the clean code suggestion made there.

I'm migrating the existing Aflexi website to Drupal and at one point I came across an existing code which.. is not too ugly but hard to be integrated into its Menu feature. The code has a few divs that jQuery uses to create sliding effects, I could actually put them into the template page.tpl.php but using jQuery to inject them at the end of page is certainly a better practice.

So, in my template.php, I have:

$js[] =<<JAVASCRIPT
$('#nav').append('lots.of.divs'); // Here's the injection
$(document).ready(function() {
UiHelper.registerSlider('a.menu-1-1-2', '#sliderWso', '#pointerWso', 300);
...
});
JAVASCRIPT;
drupal_add_js(join("\n",$js), 'inline');

By the way, I make the divs a one liner using:

echo 'paste your html' | tr -d '\n'

Then, talking about injection, this is brought into my attention as well - jQuery-AOP.

- yc

Sliding down, Scriptaculous and jQuery

Haven't been hacking JavaScript "seriously" after a few years, I got myself back into doing it two days ago. I wanted a slide up/down effect on a panel when a button is hovered.

I first came across the Scriptaculous but I wasn't satisfied with the size of the JS files, Scriptaculous+Prototype+jQuery, as I use Thickbox as well (too bad, Lightview is not free).

I received some questions in Twitter and Facebook about "why both?", so I knew I needed a change unless I had a good reason. I then spent a bit of time in the morning to read the jQuery's documentation and found out that it's easier to get this done with it.

Here's the code comparison:

jQuery's Snip

jQuery(document).ready(function(){
jQuery("#woPageSelector").hover( function(){ jQuery("#woPageSelectorContent").slideDown(300); }, function(){ jQuery("#woPageSelectorContent").slideUp(300); } );
});

Scriptaculous' Snip

var mouseOverHandler = function(event) {
$('wpPageSelectorContent').slideDown({duration: 0.5, queue: {position: 'end', scope: 'pageSelectorsPanel', limit: 2}});
$('woPageSelector').stopObserving('mouseover', mouseOverHandler);
document.observe('mouseover', mouseOutHandler);

}

var mouseOutHandler = function(event) {
$('wpPageSelectorContent').slideUp({duration: 0.5, queue: {position: 'end', scope: 'pageSelectorsPanel', limit: 2}});
$('wpPageSelector').observe('mouseover', mouseOverHandler);
document.stopObserving('mouseover', mouseOutHandler);
}

$('wpPageSelector').observe('mouseover', mouseOverHandler);

By the way, if you really have to use Prototype and jQuery at the same time, you may want to read this page to prevent conflicts.

- yc, woohoo!