Posts Tagged ‘yui’

The Yahoo! User Interface Library (YUI) has a bunch of very nifty little methods to make complex tasks easier. One that immediately stood out to me was isAncestor, as I can attest first-hand to the cross-browser troubles when trying to detect ancestry in the DOM. Although a very basic concept, most drop-down code often becomes bloated or restrictive. I’m not advocating the use of JavaScript drop-downs over a CSS method, but there are some added benefits of using JS to achieve this effect:

1. Clean markup, no need for conditional comments
2. The ability to animate show and hide events
3. Added styling opportunities, won’t break so long as the nested list structure remains in tact

Below is a simple example of how to use YUI’s isAncestor to create flyout menus with HTML and CSS.

(function() {
	function mouseover(e) {
		var menu = this.getElementsByTagName('ul')[0];
		YAHOO.util.Dom.setStyle(menu, 'display', 'block');
	};

	function mouseout(e) {
		if (!YAHOO.util.Dom.isAncestor(this, e.relatedTarget) || e.relatedTarget == document.getElementsByTagName('html')[0]) {
			var menu = this.getElementsByTagName('ul')[0];
			YAHOO.util.Dom.setStyle(menu, 'display', 'none');
		}
	};
	YAHOO.util.Event.on(YAHOO.util.Dom.get('nav').getElementsByTagName('li'), 'mouseover', mouseover);
	YAHOO.util.Event.on(YAHOO.util.Dom.get('nav').getElementsByTagName('li'), 'mouseout', mouseout);
})();

See Example »

If you need something more complex, see the YUI MenuCreator page.

All you designers might not agree with her, but she speaks the truth!
(more…)

At work I frequently encounter designs that utilize a mouseover show/mouseout hide menu that usually consists of a trigger (often an A tag, or LI element) and a menu (often a DIV, or a UL). Due to the browser inconsistencies between event handling and mouseout/mouseover DOM detection, it can be cumbersome to create a menu that is quick to implement (thus cost effective) and most importantly, stable. It also has support for a delay threshold, and the ability to animate show and hide events.

(more…)

Recently at Ajaxian there was a post describing Custom Events and how they could be used to better structure an event-driven application by ’subscribing’ or ‘binding’ certain actions to an event. At Pint we use YUI as our main library, so I’ve ported the author’s example into a version that uses YUI.

Here is the code:

YAHOO.util.Event.onDOMReady(function() {
    document.body.event1 = new YAHOO.util.CustomEvent();
    YAHOO.util.Event.on('colorchange', 'change', function(e) {
        if (this.checked) document.body.event1.subscribe(changeColor);
        else document.body.event1.unsubscribe(changeColor);
    });
    YAHOO.util.Event.on('contentchange', 'change', function(e) {
        if (this.checked) document.body.event1.subscribe(changeContent);
        else document.body.event1.unsubscribe(changeContent);
        }
    });
    YAHOO.util.Event.on(document.getElementById('leftchoices').childNodes, 'click', function(e) {
        document.body.event1.fire(e);
    });
});

See example »