<html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<LINK REL="stylesheet" HREF="../../../samples.css" TYPE="text/css">
<script>
var oPopup = window.createPopup();
function richDropDown()
{
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(0, 28, 305, 100, dropdowno);
}
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
function richDialog()
{
oPopup.document.body.innerHTML = oDialog.innerHTML;
oPopup.show(100, 50, 400, 300);
}
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 88, contextobox);
}
</script>
</head>
<body>
<h1>Four Exciting Uses of the Popup Object</h1>
<BR>
<b style="margin-top:15px;">1. Custom Context Menus</b><br><br>
<div style="">Context menus are accessed by clicking the right mouse button. Usually this displays a default context menu. Now you can create a customized context menu with the popup object.</div>
<br>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richContext(); return false" >Right-click inside this box.</span>
<BR><BR>
<hr size="1">
<BR>
<b style="width:550px">2. Custom Menus</b>
<br>
<div style="">Creating custom menus is easy with the popup object. In the following example, the drop-down menu uses a gradient filter on each option and has a color scroll bar. Click the drop-down menu and then move the cursor over the options to see these effects.</div>
<br>
<div id="dropdowno" style="background:#3366CC; padding:5px; border-bottom:1px solid black; border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:300px" ><span style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDropDown()" >Click here for a custom drop-down <img src="../../../../graphics/UI_droparrow.gif" align="absmiddle" style=""></span></div>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()" > Click Me</button><br>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">4. Custom ToolTips</b>
<br>
<div style="">Using the popup object, web pages can now have ToolTips that are as dynamic as the pages themselves. In the following example, the popup object's position depends on where the mouse pointer is when the ToolTip is activated. Move the cursor over the green text to display a ToolTip.</div><br>
Using <span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span> enhance the web experience.
<br>
<br>
<br>
<br>
<DIV ID="oContextHTML" STYLE="display:none;">
<div style="position:absolute; top:0; left:0; overflow:scroll; overflow-x:hidden; width:300; height:100; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
Custom Drop-Down Item 1</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 2</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 3</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=violet, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 4</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 5</SPAN>
</DIV>
</div>
</DIV>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px; font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">Close Message</button>
</DIV>
<div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
<IMG SRC="img/home.gif" ALIGN="absmiddle"> Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
<IMG SRC="img/search.gif" ALIGN="absmiddle"> Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/ie';">
<IMG SRC="img/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
<head>
<title>Four Exciting Ways to Use the Popup Object</title>
<LINK REL="stylesheet" HREF="../../../samples.css" TYPE="text/css">
<script>
var oPopup = window.createPopup();
function richDropDown()
{
oPopup.document.body.innerHTML = oContextHTML.innerHTML;
oPopup.show(0, 28, 305, 100, dropdowno);
}
function richToolTip()
{
var lefter = event.offsetY+0;
var topper = event.offsetX+15;
oPopup.document.body.innerHTML = oToolTip.innerHTML;
oPopup.show(topper, lefter, 170, 120, ttip);
}
function richDialog()
{
oPopup.document.body.innerHTML = oDialog.innerHTML;
oPopup.show(100, 50, 400, 300);
}
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 88, contextobox);
}
</script>
</head>
<body>
<h1>Four Exciting Uses of the Popup Object</h1>
<BR>
<b style="margin-top:15px;">1. Custom Context Menus</b><br><br>
<div style="">Context menus are accessed by clicking the right mouse button. Usually this displays a default context menu. Now you can create a customized context menu with the popup object.</div>
<br>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richContext(); return false" >Right-click inside this box.</span>
<BR><BR>
<hr size="1">
<BR>
<b style="width:550px">2. Custom Menus</b>
<br>
<div style="">Creating custom menus is easy with the popup object. In the following example, the drop-down menu uses a gradient filter on each option and has a color scroll bar. Click the drop-down menu and then move the cursor over the options to see these effects.</div>
<br>
<div id="dropdowno" style="background:#3366CC; padding:5px; border-bottom:1px solid black; border-top:1px solid #99CCFF; font:bold 10pt tahoma; color:white; width:300px" ><span style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDropDown()" >Click here for a custom drop-down <img src="../../../../graphics/UI_droparrow.gif" align="absmiddle" style=""></span></div>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">3. Custom Message Boxes</b>
<br>
<div style="">All types of interactive message boxes can be easily created with the popup object. Click the button below.</div><br>
<Button style="cursor:hand; margin-left:5px; margin-right:10px;" onmousedown="richDialog()" > Click Me</button><br>
<BR>
<hr size="1">
<b style="margin-top:15px; width:550px">4. Custom ToolTips</b>
<br>
<div style="">Using the popup object, web pages can now have ToolTips that are as dynamic as the pages themselves. In the following example, the popup object's position depends on where the mouse pointer is when the ToolTip is activated. Move the cursor over the green text to display a ToolTip.</div><br>
Using <span id="ttip" style="width:120;color:green; cursor:hand; font-weight:bold" onmouseover="richToolTip()" onmouseout="oPopup.hide()" >Custom ToolTips</span> enhance the web experience.
<br>
<br>
<br>
<br>
<DIV ID="oContextHTML" STYLE="display:none;">
<div style="position:absolute; top:0; left:0; overflow:scroll; overflow-x:hidden; width:300; height:100; scrollbar-base-color:#3366CC; border-bottom:2px solid black; SCROLLBAR-HIGHLIGHT-COLOR: #99CCFF; SCROLLBAR-ARROW-COLOR: white;" >
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; filter:;">
<SPAN ONCLICK="parent.location.href='http://msdn.microsoft.com'">
Custom Drop-Down Item 1</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 2</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 3</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=violet, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 4</SPAN>
</DIV>
<DIV onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';"
onmouseout="this.style.filter='';"
STYLE="font-family:verdana; font-size:70%; height:25px; background:#e4e4e4; border:1px solid black; padding:3px; padding-left:20px; cursor:hand; border-top:0px solid black">
<SPAN ONCLICK="parent.location.href='http://search.microsoft.com'">
Custom Drop-Down Item 5</SPAN>
</DIV>
</div>
</DIV>
<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px; font:normal 10pt tahoma; padding-left:18px "> <b>Rich Message Boxes</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
This message box is written entirely in Dynamic HTML (DHTML) using Cascading Style Sheets (CSS). You can dynamically change properties of this message box. For instance, click the button below to change the color of the popup object.
<br>
<br>
<br>
<button style="background:#cccccc" onclick="myid.style.backgroundColor='#3366CC';" tabindex="-1">Change Color</button>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">Close Message</button>
</DIV>
<div style="position: absolute; top:50; left:250px; width:125px; height:200px; border:1px solid black; border-bottom:1px solid white; border-right:1px solid white; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>DHTML Content</b><hr size="1" style="border:1px solid black;">It's easy to put content in a custom message box
</div></div>
</DIV>
<DIV ID="oToolTip" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext" STYLE="display:none;">
<div style="position: absolute; top:0; left:0; width:100%; height:100%; border:2px solid black; font:normal 10pt tahoma; filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF); padding:10px" >
<b>Custom ToolTips</b><hr size="1" style="border:1px solid black;">Now you can create ToolTips that are enhanced by DHTML.
</div>
</DIV>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='iframe4popup.htm';">
<IMG SRC="img/home.gif" ALIGN="absmiddle"> Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://search.microsoft.com';">
<IMG SRC="img/search.gif" ALIGN="absmiddle"> Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/ie';">
<IMG SRC="img/ielogo.gif" ALIGN="absmiddle"> Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.oIframe.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
