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!

Sexy Web-Design Trick

Here is something I shared with my colleagues previously in company's internal blog. Something quite useful to a web- designer or developer.

var tables = document.getElementsByTagName("table");

for(var i = 0; i < tables.length; i++){ tables[i].style.border = "2px dotted #000000"; tables[i].style.padding = "4px"; };

var divs = document.getElementsByTagName("div");

for(var i = 0; i < divs.length; i++){ divs[i].style.border = "1px dashed #dddddd"; divs[i].style.padding = "4px"; };

I'm using this as a Firefox bookmark, here's an example:



- yc, stoning