Compare Page Revisions
« Older Revision - Back to Page History - Newer Revision »
EnableViewState
false
<%@ Page %>
<form runat="server">
<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>
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); } }
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; }
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.