Modern web developers often feel like they repeat a lot of code. When we come up with a unique idea, usually that amounts to being only around 10% of our code, the rest is needlessly complicated and tedious. Enter Lunascript – “an in-house programming language for writing rich web applications in about 10% of the time and code you can today.”

At Asana, we’re building a Collaborative Information Manager that we believe will make it radically easier for groups of people to get work done. Writing a complex web application, we experienced pain all too familiar to authors of “Web 2.0″ software (and interactive software in general): there were all kinds of extremely difficult programming tasks that we were doing over and over again for every feature we wanted to write.

I am definitely going to try this out. The language seems very straightforward and could be very helpful in speeding up the development phase.
Read More

At this point, most Flash movies are probably still too CPU-intensive for iPhone. That is the only reason why iPhone doesn’t already support Flash in the first place. Despite that, Gordon is a nice resource to have absent anything else. There are no docs for Gordon at this point, but Gordon is getting widespread Internet attention and seems to be getting rapidly updated with new demos.

Read More

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.

Update
Kev (below) has identified that this is caused by a conflict with firefox. Sounds logical. Switching to version 1.2.0b4 or disabling firefox reportedly fixes the problem.

The Issue:
When browsing a site with one of Doubleclick‘s ads on it, sometimes the ad will take over the whole page (likely due to malformed HTML in the iframe or some type of javascript error), effectively rendering the page useless. The back button doesn’t work because it just keeps taking over the page when you press ‘Back’. I usually end up just closing the tab and forgetting about it. That being said, I imagine other annoyed users are doing the same. This behavior is occurring across multiple very large sites (list below). It makes me wonder if these publishers are aware of potential dollars they are wasting by compromising the user experience in such a big way.

Over the past month, I have taken screenshots of this issue across various sites. It could be a conflict with a FireFox plugin (although I only use Web Developer Plugin and Firebug), but that’s unlikely. This issue seems to be caused by firebug. This issue has been recorded in firefox 2 and 3. By looking at the status bar text which reads something like ‘Transferring data from m0.2mdn.net’ or ‘Read m1.2mdn.net’, and by a quick glance at the source of each of these broken pages, I can quickly conclude that the problem lies somewhere within Doubleclick’s ad code.

yelp, YouTube, Gizmodo, and LinkedIn have all been captured with this problem.

I also wonder if Doubleclick is aware of this issue. They deal with very large advertisers and I can’t imagine something like this going unnoticed for too long.

Has anyone else seen this bug while browsing popular web sites?

Althought I use javascript-free solutions for the majority of drop-downs I make, some menus simply warrant javascript and there’s no way around it. Perhaps the content inside the menu is interactive, or if javascript support has previously been established, or maybe the DOM structure requires two oddly placed elements to interact with each other like a normal drop-down would. Given that some advanced menus require javascript (sorry Stu Nichols), this method uses javascript. All debates and javascript taboos aside, the code below is capable of creating a consistently stable show/hide relationship between a trigger element and a menu element.

My idea of a menu (it could be a ‘drop-down’ or a ‘flyout’ menu) usually consists of a trigger (the element that onmouseover reveals the menu) and a menu (the element to be shown). The code below is capable of creating menus out of nested “semantic” lists (UL, OL, DL) OR from an array of trigger/menu ID pairs depending on what you pass in as the constructor menu array.

This code requires YAHOO! User Interface Library yahoo-dom-event.js.

This article assumes you already have an HTML/CSS menu in mind. This article does not teach how to write CSS. This code simply provides an outlet for controlling show/hide functionality with javascript. The MenuCreator code basically creates a show/hide relationship between a trigger and a menu element. It’s purpose is to eliminate the nuances of mouse event handling when creating simple show/hide menus.

Examples:

1. Example 1 (div menu AND a nested list menu)
2. Example 2 (complex example of a div menu)
3. Example 3 (used on a live site)

The usage is simple:

1. Once you have your CSS and HTML setup to look the way you want, add the MenuCreator code to your page:

   var MenuCreator = function(obj) {
   	for (var oMenu in obj.menus) {
   		(function(index) {
   			var trigger = (obj.menus[index].trigger) ? YAHOO.util.Dom.get(obj.menus[index].trigger) : YAHOO.util.Dom.get(obj.menus[index]);
   			var menu = (obj.menus[index].id) ? YAHOO.util.Dom.get(obj.menus[index].id) : YAHOO.util.Dom.get(obj.menus[index]).lastChild;
   
   			if (!trigger || !menu || !obj.show || !obj.hide) return;
   
   			function enterLink(e) {
   				obj.show(trigger,menu);
   				YAHOO.util.Event.stopEvent(e);
   			}
   
   			function exitLink(e) {
   				if (!e) var e = window.event;
   				if (e.stopPropagation) e.stopPropagation();
   				else e.cancelBubble = true;
   				var relTarg = e.relatedTarget || e.toElement;
   				if (relTarg != menu) {
   					obj.hide(trigger, menu);
   					return false;
   				}
   				YAHOO.util.Event.stopEvent(e);
   			}
   
   			function exitField(e) {
   				if (!e) var e = window.event;
   				var tg = (window.event) ? e.srcElement : e.target;
   				if (e.stopPropagation) e.stopPropagation();
   				else e.cancelBubble = true;
   				if (tg.nodeName != 'DIV' && tg.nodeName != 'UL') return;
   				var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
   				while (reltg != tg && reltg.nodeName != 'BODY' && reltg.nodeName != 'HTML') {
   					if (reltg == this) return;
   					reltg = reltg.parentNode
   				}
   				if (reltg == tg) return;
   				obj.hide(trigger, menu);
   				YAHOO.util.Event.stopEvent(e);
   			}
   
   			YAHOO.util.Event.on(trigger, 'mouseover', enterLink);
   			YAHOO.util.Event.on(trigger, 'mouseout', exitLink);
   			YAHOO.util.Event.on(menu, 'mouseout', exitField);
   		}(oMenu));
   	}
   };

2. Create the menu by passing in an array of menu/trigger ID pairs and a show function and a hide function.

   var divMenu = new MenuCreator({
   	menus: [{
   		id: 'box1',
   		trigger: 'tab1' },
   	{
   		id: 'box2',
   		trigger: 'tab2'},
   	{
   		id: 'box3',
   		trigger: 'tab3'
   	}],
   	show:function(trigger,menu) {
   		YAHOO.util.Dom.addClass(trigger, 'hover');
   		menu.style.display = "block";
   	},
   	hide:function(trigger,menu) {
   		YAHOO.util.Dom.removeClass(trigger, 'hover');
   		menu.style.display = "none";
   	}
   });

Requires
yahoo-dom-event.js
Include this file by placing this above the MenuCreator code.

FAQ
Why provide a custom show/hide function?
Often the specific things that need to happen on a successful show/hide differ from menu to menu, so abstracting them from the MenuCreator seemed more logical.

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

Why is a bulky menu creator solution like this (after yahoo-dom-event.js) useful?
Most programmers prefer to use one JavaScript library (if any) for a web site. This code is most useful for a web site that is already using YUI (like all Pint web sites, where YUI is included by default).

Why not use something like suckerfish drop downs?
Suckerfish drop downs only support nested lists with links in them. Suckerfish code is not a robust solution for complex HTML menus. MenuCreator offers a convenient way to deal with multiple javascript hover interfaces.

Assumptions

1. Assumes the menus are hidden by default (using display:none, visibility:hidden, or however else you wish).
2. Assumes the show/hide events are mouseover/mouseout events.

Special Thanks
Peter Paul-Koch (quirksmode) for his mouse event DOM solutions.

Diana Chan who wrote the prototype for this entire snippet.

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 »