[Javascript] IE popup object

[Dan Costea]

here is an example:

realmenu.js:
/**************************************************************************/
/**************************************************************************/
menuItems = new Array();
menuItemNum = 0;

function addMenuItem (text, url, img)
{
 if (img)
  menuItems[menuItemNum] = new Array (text, url, img);
 else if (text)
  menuItems[menuItemNum] = new Array(text, url);
 else
  menuItems[menuItemNum] = new Array();

 menuItemNum++;
}


menuWidth = 158;
menuHeight = 271;
menuDelay = 50;
menuSpeed = 8;
menuOffset = 2;

addMenuItem ("<center>..:: Tini MENU ::..</center>","readme.htm");
addMenuItem ();
addMenuItem ("<u>B</u>ack","readme.htm");
addMenuItem ("F<u>o</u>rward","readme.htm");
addMenuItem ();
addMenuItem ("<u>S</u>ave Background As...","readme.htm");
addMenuItem ("Set as <u>W</u>allpaper","readme.htm");
addMenuItem ("<u>Z</u>ip File","readme.htm");
addMenuItem ("Set as <u>D</u>esktop Item...","readme.htm");
addMenuItem ();
addMenuItem ("Create Shor<u>t</u>cut","readme.htm");
addMenuItem ("Add to <u>F</u>avorites...","readme.htm");
addMenuItem ("<u>V</u>iew Source","readme.htm");
addMenuItem ();
addMenuItem ("<u>P</u>roperties","readme.htm");
addMenuItem ();
addMenuItem ("<b>B<u>o</u>ld Text</b>","readme.htm");
addMenuItem ("<i>Ita<u>l</u>ic Text</i>","readme.htm");




if (window.navigator.appName == "Microsoft Internet Explorer" &&
window.navigator.appVersion.substring
(window.navigator.appVersion.indexOf("MSIE") + 5,
window.navigator.appVersion.indexOf ("MSIE") + 8) >= 5.5)
 isIe = 1;
else
 isIe = 0;


if (isIe)
{
 menuContent =
  '<table id="rightMenu" width="0" height="0" cellspacing="0"
cellpadding="0" style="font:menu;color:menutext;">' +
  ' <tr height="1">' +
  '  <td style="background:threedlightshadow" colspan="4"></td>' +
  '  <td style="background:threeddarkshadow"></td>' +
  ' </tr>' +
  ' <tr height="1">' +
  '  <td style="background:threedlightshadow"></td>' +
  '  <td style="background:threedhighlight" colspan="2"></td>' +
  '  <td style="background:threedshadow"></td>' +
  '  <td style="background:threeddarkshadow"></td>' +
  ' </tr>' +
  ' <tr height="10">' +
  '  <td style="background:threedlightshadow"></td>' +
  '  <td style="background:threedhighlight"></td>' +
  '  <td style="background:threedface">' +
  '<table cellspacing="0" cellpadding="0" nowrap
style="font:menu;color:menutext;cursor:default;">';

 for (m = 0; m < menuItems.length; m++)
 {
  if (menuItems[m][0] && menuItems[m][2])
   menuContent +=
    '<tr height="17"
onMouseOver="this.style.background=\'highlight\';this.style.color=\'highligh
ttext\';"
onMouseOut="this.style.background=\'threedface\';this.style.color=\'menutext
\';" onClick="parent.window.location.href=\'' + menuItems[m][1] + '\'">' +
    ' <td style="background:threedface" width="1" nowrap></td>' +
    ' <td width="21" nowrap><img src="' + menuItems[m][2] + '"></td>' +
    ' <td nowrap>' + menuItems[m][0] + '</td>' +
    ' <td width="21" nowrap></td>' +
    ' <td style="background:threedface" width="1" nowrap></td>' +
    '</tr>';
  else if (menuItems[m][0])
   menuContent +=
    '<tr height="17"
onMouseOver="this.style.background=\'highlight\';this.style.color=\'highligh
ttext\';"
onMouseOut="this.style.background=\'threedface\';this.style.color=\'menutext
\';" onClick="parent.window.location.href=\'' + menuItems[m][1] + '\'">' +
    ' <td style="background:threedface" width="1" nowrap></td>' +
    ' <td width="21" nowrap></td>' +
    ' <td nowrap>' + menuItems[m][0] + '</td>' +
    ' <td width="21" nowrap></td>' +
    ' <td style="background:threedface" width="1" nowrap></td>' +
    '</tr>';
  else
   menuContent +=
    '<tr>' +
    ' <td colspan="5" height="4"></td>' +
    '</tr>' +
    '<tr>' +
    ' <td colspan="5">' +
    '  <table cellspacing="0">' +
    '   <tr>' +
    '    <td width="2" height="1"></td>' +
    '    <td width="0" height="1" style="background:threedshadow"></td>' +
    '    <td width="2" height="1"></td>' +
    '   </tr>' +
    '   <tr>' +
    '    <td width="2" height="1"></td>' +
    '    <td width="100%" height="1"
style="background:threedhighlight"></td>' +
    '    <td width="2" height="1"></td>' +
    '   </tr>' +
    '  </table>' +
    ' </td>' +
    '</tr>' +
    '<tr>' +
    ' <td colspan="5" height="3">' +
    ' </td>' +
    '</tr>';
 }

 menuContent +=
  '   </table>' +
  '  </td>' +
  '  <td style="background:threedshadow"></td>' +
  '  <td style="background:threeddarkshadow"></td>' +
  ' </tr>' +
  ' <tr height="1">' +
  '  <td style="background:threedlightshadow"></td>' +
  '  <td style="background:threedhighlight"></td>' +
  '  <td style="background:threedface"></td>' +
  '  <td style="background:threedshadow"></td>' +
  '  <td style="background:threeddarkshadow"></td>' +
  ' </tr>' +
  ' <tr height="1">' +
  '  <td style="background:threedlightshadow"></td>' +
  '  <td style="background:threedshadow" colspan="3"></td>' +
  '  <td style="background:threeddarkshadow"></td>' +
  ' </tr>' +
  ' <tr height="1">' +
  '  <td style="background:threeddarkshadow" colspan="5"></td>' +
  ' </tr>' +
  '</table>';

 menuPopup = window.createPopup();
 menuPopup.document.body.innerHTML = menuContent;
}


function showMenu ()
{
 menuXPos = event.clientX + menuOffset;
 menuYPos = event.clientY + menuOffset;

 menuXIncrement = menuWidth / menuSpeed;
 menuYIncrement = menuHeight / menuSpeed;

 menuTimer = setTimeout ("openMenu (0,0)", menuDelay);

 return false;
}


function openMenu (height, width)
{
 iHeight = height;
 iWidth = width;

 menuPopup.show (menuXPos, menuYPos, iWidth, iHeight, document.body);

 if (iHeight < menuHeight)
  menuTimer = setTimeout("openMenu(iHeight + menuYIncrement, iWidth +
menuXIncrement)", 1);
 else
  clearTimeout(menuTimer);
}


 if (isIe)
 document.oncontextmenu = showMenu;
/**************************************************************************/
/**************************************************************************/

testig.html:
/**************************************************************************/
/**************************************************************************/
<html>
 <head>
  <title>realMenu</title>
  <script language="javaScript" src="realmenu.js"></script>
 </head>
 <body
style="color:#000000;margin:5pt;font-family:dungeon,verdana,arial,geneva;fon
t-size:10pt;">
 </body>
</html>
/**************************************************************************/
/**************************************************************************/


If you need submenus (one or more levels) I can send you an example made
with htc.

Dan.

----- Original Message -----
From: "Peter Brunone" <peter at brunone.com>
To: <javascript at LaTech.edu>
Sent: Monday, August 26, 2002 9:37 PM
Subject: [Javascript] IE popup object


>
>     Does anybody have any code (or experience) working with the popup
object
> in IE?  I've been trying to use it in a dynamic menu implementation that
> isn't broken by SELECT boxes or ActiveX objects, but as soon as I do
> anything more complex than a piddly example from MSDN, the little buggers
> forget about their relative positioning and just sit in the upper left
> corner of the screen!
>     Any help would be appreciated.
>
> Cheers,
>
> Peter
>
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript