DHTML Lab: Accessing the User-Defined System Colors, Part I - dhtmlab.com | 5 | WebReference

DHTML Lab: Accessing the User-Defined System Colors, Part I - dhtmlab.com | 5

Logo

Accessing the User-Defined System Colors, Part I
IE4Win32


Displaying the Dialogs

Since the dialogs are originally hidden, you should use a link or button to display them. For example:

<BUTTON onClick="popup1.style.visibility='visible';makeActive(popup1)">Show Element 1</BUTTON>
<BUTTON onClick="popup2.style.visibility='visible';makeActive(popup2)">Show Element 2</BUTTON>

or

<A HREF="#" onClick="popup1.style.visibility='visible';makeActive(popup1);return false">Show Element 1</A>
<A HREF="#" onClick="popup2.style.visibility='visible';makeActive(popup2);return false">Show Element 2</A>

Download

You may also download the dialog page in ZIP format.

The Complete Page

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<BUTTON onClick="popup1.style.visibility='visible';makeActive(popup1)">Show Element 1</BUTTON>
<BUTTON onClick="popup2.style.visibility='visible';makeActive(popup2)">Show Element 2</BUTTON>
<DIV ID=popup1
STYLE="position:absolute;
       visibility:hidden;
       left:240;top:300;
       width:212px;height:180;
       border:2px threedhighlight outset;
       background-color:threedface;
       font-family:MS Sans Serif;font-size:8pt;
       cursor:default"
onSelectStart="return false"
onMouseDown="makeActive(this)">
<DIV
STYLE="position:absolute;
       left:0;top:0;
       width:100%;height:100%;
       border:1px inactiveborder solid">
</DIV>
<DIV
STYLE="position:absolute;
       left:2;top:2;
       width:204px;height:18px;
       background-color:inactivecaption;
       color:inactivecaptiontext;
       font-family:MS Sans Serif;
       font-size:9pt;font-weight:bold;
       padding:2px"
onMouseDown="grabEl(this.offsetParent)">
<IMG SRC="x.gif"
WIDTH=12 HEIGHT=10 HSPACE=0 BORDER=0 ALIGN=RIGHT
STYLE="background-color:buttonface;
       border:2px buttonhighlight outset;"
onMouseDown="xPress(this,1)"
onMouseUp="xPress(this,0)">
<IMG SRC="wr.gif"
WIDTH=20 HEIGHT=11 BORDER=0 VSPACE=1
ALIGN=ABSMIDDLE>
 DHTML Popup Element 1
</DIV>
<DIV
STYLE="position:absolute;
       left:2;top:21;
       width:204px;height:18px;
       background-color:menu;
       color:menutext;
       font-family:MS Sans Serif;font-size:8pt;"><SPAN ID="span1"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu1 </SPAN><SPAN ID="span2"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu2 </SPAN><SPAN ID="span3"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)"> Menu3 </SPAN></DIV>
<HR
STYLE="position:absolute;top:40;width:100%">
<DIV ID=menu1
STYLE="position:absolute;
       visibility:hidden;
       top:39;left:0;
       width:100px;
       border:2px threedhighlight outset;
       background-color:menu;
       font-family:MS Sans Serif;font-size:8pt;
       color:menutext;
       line-height:160%;
       z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
</DIV>
<DIV ID=menu2
STYLE="position:absolute;
       visibility:hidden;
       top:39;left:0;
       width:100px;
       border:2px threedhighlight outset;
       background-color:menu;
       font-family:MS Sans Serif;font-size:8pt;
       color:menutext;
       line-height:160%;
       z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
</DIV>
<DIV ID=menu3
STYLE="position:absolute;
       visibility:hidden;
       top:39;left:0;
       width:100px;
       border:2px threedhighlight outset;
       background-color:menu;
       font-family:MS Sans Serif;font-size:8pt;
       color:menutext;
       line-height:160%;
       z-index:10;">
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 1</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 2</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 3</SPAN><BR>
<SPAN
STYLE="width:100%;padding-left:10px"
onMouseOver=
 "this.style.backgroundColor='highlight';this.style.color='highlighttext'"
onMouseOut=
 "this.style.backgroundColor='menu';this.style.color='menutext'"
onClick="doSomething()">
Menu Item 4</SPAN><BR>
</DIV>
<DIV 
STYLE="position:absolute;
       left:3;top:53;
       color:windowtext">
Put any HTML/text for your users here
</DIV>
<CENTER><BUTTON
STYLE="position:relative;
       top:145;width:70px"
       onClick="popup1.style.visibility='hidden'">
OK</BUTTON></CENTER>
</DIV>
<DIV ID=popup2
STYLE="position:absolute;
       visibility:hidden;
       left:440;top:360;
       width:212px;height:80;
       border:2px threedhighlight outset;
       background-color:threedface;
       font-family:MS Sans Serif;font-size:8pt;
       cursor:default"
onSelectStart="return false"
onMouseDown="makeActive(this)">
<DIV
STYLE="position:absolute;
       left:0;top:0;
       width:100%;height:100%;
       border:1px inactiveborder solid">
</DIV>
<DIV
STYLE="position:absolute;
       left:2;top:2;
       width:204px;height:18px;
       background-color:inactivecaption;
       color:inactivecaptiontext;
       font-family:MS Sans Serif;
       font-size:9pt;font-weight:bold;
       padding:2px"
onMouseDown="grabEl(this.offsetParent)">
<IMG SRC="x.gif"
WIDTH=12 HEIGHT=10 HSPACE=0 BORDER=0 ALIGN=RIGHT
STYLE="background-color:buttonface;
       border:2px buttonhighlight outset;"
onMouseDown="xPress(this,1)"
onMouseUp="xPress(this,0)">
<IMG SRC="wr.gif"
WIDTH=20 HEIGHT=11 BORDER=0 VSPACE=1
ALIGN=ABSMIDDLE>
 DHTML Popup Element 2
</DIV>
<DIV 
STYLE="position:absolute;
       left:3;top:23;
       color:windowtext">
Put any HTML/text for your users here
</DIV>
<CENTER><BUTTON
STYLE="position:relative;
       top:45;width:70px"
       onClick="popup2.style.visibility='hidden'">
OK</BUTTON></CENTER>
</DIV>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
activeElement = null;
function makeActive(el){
  if (activeElement) {
    activeElement.children(0).style.borderColor = "inactiveborder";
    activeElement.children(1).style.backgroundColor = "inactivecaption";
    activeElement.children(1).style.color = "inactivecaptiontext";
  }
  el.style.zIndex = (activeElement) ? (activeElement.style.zIndex+1) : 1;
  el.children(0).style.borderColor = "activeborder";
  el.children(1).style.backgroundColor = "activecaption";
  el.children(1).style.color = "captiontext";
  activeElement = el;
}
    
makeActive(popup1);
activeMenu = null;
function setMenu(el){
   makeActive(el.offsetParent.offsetParent);
   if (activeMenu) {
      activeMenu.menuElement.style.visibility = "hidden";
      activeMenu.style.backgroundColor = "menu";
      activeMenu.style.color = "menutext";
   }
   el.style.backgroundColor = "highlight";
   el.style.color = "highlighttext";
   switch (el.id) {
      case "span1":
         el.menuElement = menu1;
         break;
      case "span2":
         el.menuElement = menu2;
         break;
      case "span3":
         el.menuElement = menu3;
         break;
   }
   el.menuElement.style.pixelLeft = el.offsetLeft+2;
   el.menuElement.style.visibility = "visible"
   activeMenu = el;
   document.onmousedown = killMenu;
   event.cancelBubble = true;   
}
function killMenu(){
   activeMenu.menuElement.style.visibility = "hidden";
   activeMenu.style.backgroundColor = "menu";
   activeMenu.style.color = "menutext";
   activeMenu = null;
   document.onmousedown = null;
}
function xPress(el,on) {
   el.style.borderStyle = (on) ? "inset" : "outset";
   event.cancelBubble = true;
}
currentX = currentY = null;
whichEl = null;
function grabEl(el) {
   if (activeMenu) killMenu();
   whichEl = el;
   makeActive(whichEl);
   event.cancelBubble = true;
   whichEl.style.pixelLeft = whichEl.offsetLeft;
   whichEl.style.pixelTop = whichEl.offsetTop;
   currentX = (event.clientX + document.body.scrollLeft);
   currentY = (event.clientY + document.body.scrollTop); 
   document.onmousemove = moveEl;
   document.onmouseup = dropEl;
   event.returnValue = false;   
}
    
function moveEl() {
   newX = (event.clientX + document.body.scrollLeft);
   newY = (event.clientY + document.body.scrollTop);
   distanceX = (newX - currentX);
   distanceY = (newY - currentY);
   currentX = newX;
   currentY = newY;
   whichEl.style.pixelLeft += distanceX;
   whichEl.style.pixelTop += distanceY;
   event.returnValue = false;
}
    
function dropEl() {
   document.onmousemove = document.onmouseup = null;
}
//-->
</SCRIPT>
</BODY>
</HTML>


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Feb 23, 1999
Revised: Feb 23, 1999

URL: https://www.webreference.com/dhtml/column24/colsIEexample10.html