My Buddy List

Floating Buddy List

This example shows how to use the AIM modules with other dijits to get a resizable, movable, floating buddy list. This page also shows how you can configure the HoverCard that shows up as you hover over buddy names.

The AIM modules are do not have the logic to auto-detect the best HoverCard placement. The following are attributes you can use on the dojoType="aim.ImPanel" div, or you can change the values dynamically by accessing the HoverCardManager on the BuddyList widget. The default options in the form are the ones that are the default configuration.

This page also configures an extra action to show in the HoverCard. It adds an "email" icon to the HoverCard. For details on how to add actions to the HoverCard, see the source of this page and look for onExampleActionClick references.

HoverCard Modification Form

hoverCardOrient informs the HoverCardManager on how to orient the HoverCard as it relates to the element that contains the buddy's name. The first string is what corner on the buddy name's element to use, the second string is what corner of the HoverCard should be aligned with the first corner. Valid values are TL, TR, BL, BR for each corner. T is for Top, B is for Bottom, L is for Left and R is for Right.
hoverCardPointerSide indicate what side should have the triangular arrow that helps "point" to the buddy name's element.
hoverCardPointer indicates if the triangular arrow that helps "point" to the buddy name's element should be shown or not.
hoverCardPadding adjusts how the HoverCard is positioned relative to the corners specified by hoverCardOrient. The default in the code is actually aim.widget.pointerWidth + ", -27". The first number is the x value and the second number is the y value. Values are in pixels.

After pressing this button, hover over one of the buddy names (after you sign in) to see how the above values change hover card positioning.

Example usage (note how in the JavaScript example, hoverCardOrient is an object and hoverCardPadding is an array):

<!-- Markup example -->
<div id="myImWidget"
     dojoType="aim.ImPanel"
     hoverCardOrient="'TL':'BL'"
     hoverCardPointerSide="top"
     hoverCardPointer="hidden"
     hoverCardPadding="0, 0">
</div>

//Modifying the values in JavaScript after widgets are instantiated.
var hoverCardManager = dijit.byId("myImWidget").buddyListWidget.hoverCardManager;
hoverCardManager.hoverCardOrient = { 'TL':'BL' };
hoverCardManager.hoverCardPointerSide = "top";
hoverCardManager.hoverCardPointer = "hidden";
hoverCardManager.hoverCardPadding = [0, 0];