Navigation

	Home Page
	Index
	All Pages

Quick Search

Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

Page History: Flyouts - JavaScript

Compare Page Revisions

« Older Revision - Back to Page History - Newer Revision »

Page Revision: Thu, Jan 06, 2011, 10:12 AM

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.

Set EnableViewState to false in the <%@ Page %> directive!
Remove the <form runat="server"> tag. Note that this precludes you from having certain ASP.NET controls on the page, most notably, the GridView control. The work-around for this situation is to use a Literal control instead and generate the HTML code programmatically.

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

Jasinski Technical Wiki