Jasinski Technical Wiki

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

PoweredBy

Flyouts - JavaScript

RSS
Modified on Fri, Apr 08, 2011, 2:01 PM by Administrator Categorized as JavaScript, jQuery, and Angular

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

Loading.gif


ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.