Alex Le’s Blog

I just recently completed a demo for a client of mine. The demo was a news portal with lots of links to external news contents. I wanted to spice things up a little, so I implemented a inline link-tip (or inline popup, however, this name may confuse you with the light-box type popup) using the [[http://developer.yahoo.com/yui/|Yahoo! User Interface Library]] (YUI). Thanks to YUI, the effect is now quite easy to be implemented.

Here’s a screencast of what the inline link-top looks like

{{ http://alexle.net/wp-content/uploads/2006/10/inline.gif }}

(If you want to see the actualy demo page or get the sample code, please scroll down to the end of the post)

===== The setup =====
Here is the XHTML-compliant markup code for the content and the hover.

Basically we have a few DIVs, positioned either inline or absolutely to show how the inline link-tip works in both cases. Inside each container div, we have a link with a className of **articleTitle** and an extra attribute called **hoverId**. This extra **hoverId** attribute specifies the ID of the popup that we’d like to associate with this link.

Next, we setup the hover container div. The popup div has the className of ‘inlinePopup’ so that we can style it with CSS later on. Let’s take the div with Id ‘hover1′ as our example.

...


…

For this technique to work, we have to explicitly add the **style=”display:none;”** for the popup div. Setting display:none in the inlinePopup CSS class definition will not work.

For the CSS styling, we can just add these rules to the page to make things a little nicer.

===== The Javascript =====
Here is the javascript to handle the inline popup/ tooltip. The idea is after the page has been rendered properly (window onLoad is fired), we scan through the DOM, look for any link with the className of **articleTitle**, then attach custom events for onMouseOver and onMouseOut to handle the display of the popup. And thanks to YUI, adding custom events and web2.0 animations is easier than ever.

First of all, we include the YUI’s library to our page


…




…



Then we insert some javascript codes. Let’s start with the pageInit() function first.
pageInit = function() {
/* Popup summary */
/* We find all items with the articleTitle class */
var els = YAHOO.util.Dom.getElementsByClassName('articleTitle', 'a');
for( var i=0; i < els.length; i++ )
{
/* Get the hover div */
sDivId = els[i].getAttribute('hoverId');
sDiv = document.getElementById( sDivId );
YAHOO.util.Dom.setStyle( sDiv , 'opacity', '0');

/* Unhide the Summary layer when mouse over/ out*/
YAHOO.util.Event.addListener( els[i], "mouseover", hoverOver );
YAHOO.util.Event.addListener( els[i], "mouseout", hoverOut );
}
}
YAHOO.util.Event.addListener( window, "load", pageInit );

We basically find all **a** (anchor) elements in the page with the className of **articleTitle**. Then we loop through the result **els** array and look for which popup div is associated with this link. As we stored the popup div’s ID in the hoverId attribute of the link, we can just grab the value by using the getAttribute(’hoverId’). And next, we set the opacity of the popup div to 0. With YUI, we don’t have to worry about the different syntax of different browsers. Only one single line of code to set the opacity! Next, we add our custom functions to the **a** element to handle the **onMouserOver** and **onMouserOut** events with the **YAHOO.util.Event.addListener( element, “eventType”, customHandler )**

==== Custom Event Handlers ====
We can now implement our **hoverOver()** and **hoverOut()** handlers. Let’s start with **hoverOut()**

/* This function is to unhide the div, then do a smooth very web2.0 fade-in effect */
function hoverOver()
{
var sDivId = this.getAttribute('hoverId');
var sDiv = document.getElementById( sDivId );

sDiv.style.left = YAHOO.util.Dom.getX( this ) +'px';
sDiv.style.top = (YAHOO.util.Dom.getY( this ) + this.offsetHeight + 2 ) +'px';
sDiv.style.display = '';
var animIn = new YAHOO.util.Anim( sDiv, { opacity: { to: 1 } }, 0.25, YAHOO.util.Easing.easeOut);
animIn.animate();
}

When the mouse hovers over the link, this hoverOver() function is triggered. However, at this very moment, we find out that we don’t have any reference to targetted popup div, so we go grab the popup div’s id from the hoverId attribute of the a element. Luckily, we can just reference to the a element as **this**.

=== Positioning the Popup & Adding Dramatic fading effect ===
As our links can be rendered anywhere in the screen, we have to know where to put our popup div. The solution is to set the position of the popup div to the coordinates of the link. With YUI, it’s quite easy: **YAHOO.util.Dom.getX( this )** and **YAHOO.util.Dom.getY( this )** for the x and y values of the a element. But this will give us the top left corner of the boundary box of the link element, which means our popup would be placed **on top** of the link. So we add the offsetHeight of the a element to the top (Y) value of the popup, plus a few extra pixels as the ‘margin-top’. Now our div is positioned correctly. With this approach, we can place our link anywhere: whether it’s in a absolutely positioned container, or inline within a paragraph, the popup div is still positioned nicely below it.

That isn’t t too bad, is it? Now let’s add the fade-in effect. As we already set the opacity of the popup div to 0 when the page is loaded, we can just use the animation feature of YUI for the dramatically fade-in.

...
var animIn = new YAHOO.util.Anim( sDiv, { opacity: { to: 1 } }, 0.25, YAHOO.util.Easing.easeOut);
animIn.animate();
...

I use 0.25 second for the popup div to appear as I think anything longer will be quite annoying to the end-users (”whoever designed this dang page is wasting my time here”). Let’s keep our visitors happy. The YAHOO.util.Easing.easeOut is added so that the animation is eased out for a smoother appearance of our popup div.

Next, we added the **hoverOut()** handler to hide the popup div with an equally nice fade-out effect. But for **hoverOut()** to work correctly, we have to do some extra work towards the end. Here’s the code:


/* This function is to hide the div with a dramatic web2.0 fade effect */
function hoverOut()
{
var sDivId = this.getAttribute('hoverId');
var sDiv = document.getElementById( sDivId );
var animOut = new YAHOO.util.Anim( sDiv, { opacity: { to: 0 } }, 0.25, YAHOO.util.Easing.easeOut);
animOut.animate();
animOut.onComplete.subscribe( hoverHide );
}


Again, we get the reference to the popup div, then we fade it out by changing its opacity to 0. At this point, eventhough the user won’t see the popup div anymore, it’s not actually hidden. This means that the popup div is still covering up the space underneath it, thus link or clickable elements underneath won’t work (not clickable). We have to explicitly set the display of the popup div to none when the fade-out animation is finished to remove it from the page. We do this by using the **animOut.onComplete.subscribe()** to hand a callback method to the animation object. Our callback method will be called when the animation is completed and hide the popup div.

Here’s the one-line code for the hoverHide() callback function

/* Call back function used in hoverOut() */
function hoverHide()
{
this.getEl().style.display = 'none';
}


The **this** keyword now is interpreted as the animation object, not the link item. We use this.getEl() to get the reference to the targetted hover div, and set its style.display to ‘none’. Now everything’s working the way it’s supposed to. Yay!

===== Final Remarks =====
Thanks to YUI, the code is truely multi-platform compatible. All the event handlings are done through the YAHOO.util.Event so we don’t have to deal with messy browser sniffing and special cases. The YAHOO animation is simple and flexible enough for us to customize the way we want. The inline popup is also robust enough as we can style it with CSS like adding some neat drop-shadow and round-corner effects. As you can see from the screencast above, the inline popup is working correctly in the extreme case of rapidly hovering in and out. Nobody would do anything that crazy in real life but it’s nice to see how the effect behaves in extreme cases. And I think one important feature of this technique is that we can implement it to any existing page with minimal code editing.

I hope you enjoy this small tutorial!

Cheers!

===== Code & Sample Page =====
You can download the sample code of this tutorial here.
* [[http://alexle.net/wp-content/uploads/2006/10/inlinePopup.zip|Inline Popup Source File]]

The same code can be accessed here
* [[http://alexle.net/wp-content/uploads/2006/10/inlinePopup/|Demo Page]]