Flyouts - JavaScript

Overview

A flyout is a sort of glorified tooltip. When the user hovers over a "trigger", which is indicated by a dashed underline, a small rectangle containing related information appears nearby. The contents of this rectangle can be whatever you want, and are typically loaded asynchronously via JavaScript.

Sample Implementation

Special Considerations for ASPX Pages

You must do the following in order for the source of the flyout to be an ASPX page.


HTML Code

Use the following HTML code for each instance of a flyout.

<script language="javascript" src="scripts/Flyout.js"></script>

<a  class="trigger"
    onmouseenter="ShowFlyout('uxSeveritiesFlyout', 'flyouts/Severities.aspx');" 
    onmouseleave="HideFlyout('uxSeveritiesFlyout');">here</a>.

<div id="uxSeveritiesFlyout" style="visibility:hidden;" class="flyout" >MY FLYOUT</div>

JavaScript Code

Here are the contents of the flyout.js file.

{copytext|flyout_js}
var _xmlhttp;
var _scrollX, _scrollY;
var _flyoutId;
function GetWindowScrollPosition()
{
    if (document.all)
    {
        if (!document.documentElement.scrollLeft)
            _scrollX = document.body.scrollLeft;
        else
            _scrollX = document.documentElement.scrollLeft;

        if (!document.documentElement.scrollTop)
            _scrollY = document.body.scrollTop;
        else
            _scrollY = document.documentElement.scrollTop;
    }   
    else
    {
        _scrollX = window.pageXOffset;
        _scrollY = window.pageYOffset;
    }
}
function ShowFlyout(flyoutId, url)
{
    try
    {
        GetWindowScrollPosition();
        var flyout = document.getElementById(flyoutId);
        flyout.style.left = event.clientX + _scrollX - 320;
        flyout.style.top = event.clientY + _scrollY;
        var html;
        html = "<table width='100%' height='100%'><tr>";
        html = html + "<td align='center' valign='middle'>";
        html = html + "<img src='Images/Loading.gif' /></td>";
        html = html + "</tr></table>";
        flyout.innerHTML = html;
        flyout.style.visibility = "visible";
        loadDoc(flyoutId, url);
    }
    catch (ex)
    {
        alert("Error: " + ex.name + " -- " + ex.message);
    }
}
function HideFlyout(flyoutId)
{
    var flyout = document.getElementById(flyoutId);
    flyout.style.visibility = "hidden";    
}
function loadDoc(flyoutId, url)
{
    _xmlhttp = null;

    //-- Mozilla, etc. ----------------------------------------------------------------
    if (window.XMLHttpRequest)
    {
        _xmlhttp = new XMLHttpRequest()
    }
    //-- IE ---------------------------------------------------------------------------
    else if (window.ActiveXObject)
    {
        try 
        { 
            _xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
        } 
        catch (e) 
        {
            try 
            { 
                _xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
            } 
            catch (e) {}
        }
    }

    //-- Make AJAX call ---------------------------------------------------------------
    if (_xmlhttp != null)
    {
        var detail = "";
        try 
        {
            detail = "Couldn't set onreadystatechange.";
            _flyoutId = flyoutId;
            _xmlhttp.onreadystatechange = HandleFlyoutResponse;
            
            detail = "OPEN method failed.";
            _xmlhttp.open("GET", url, true);
            
            detail = "SEND method failed.";
            _xmlhttp.send(null);/**/
        }
        catch (ex)
        {
            alert("Error in loadDoc: " + ex.name + " -- " + ex.message + " -- " + detail);
        }
    }
    //else
    //{
    //    alert("Your browser does not support XMLHTTP.")
    //}
}

function HandleFlyoutResponse()
{
    var errMsg;
    errMsg = "Couldn't initialize";
    try
    {
        errMsg = "Couldn't get ReadyState";
        
        if (_xmlhttp.readyState == 4) // 4 = loaded
        {
            var div;
            errMsg = "Couldn't get " + _flyoutId + " element";
            //alert(_flyoutId);
            div = window.document.getElementById(_flyoutId);

            errMsg = "Couldn't get status";
            if (_xmlhttp.status == 200) // 200 = OK
            {
                // handle _xmlhttp.responseText
                errMsg = "Couldn't get Response Text";
                var s = _xmlhttp.responseText;
                
                if (div == null)
                    alert("DIV is null");
                
                errMsg = "Couldn't set Inner HTML to [" + s + "]";
                div.innerHTML = s;
                //alert(_xmlhttp.responseText);
            }
            else
            {
            //alert('HELLO WORLD');
                var a;
                errMsg = "Couldn't construct error message";
                a = "Problem retrieving XML data. Status = " + _xmlhttp.status.toString()
            
                errMsg = "Couldn't set Inner Text";
                div.innerText = a;
            }
        }
        else
        {
            //alert(_xmlhttp.readyState);
        }
    }
    catch (ex)
    {
        alert("Error in HandleFlyoutResponse: " + ex.name + " -- " + ex.message + " -- " + errMsg);
    }
}

CSS Code

div.flyout /* flyouts */
{
    width:              320px;
    border:             solid 1px black; 
    position:           absolute; 
    left:               100px; 
    top:                100px;
    background-color:   #eeeecc;
}
a.trigger /* flyout triggers -- the links you hover over to show a flyout */
{
	border-bottom:		dotted 1.5px blue;
	text-decoration:	none;
	cursor:				hand;
}

Image File

Here is but one sample of an animated GIF you can use.

Loading.gif

Loading.gif