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

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

Logo

Accessing the User-Defined System Colors, Part I
IE4Win32


The Final Elements

There are two final elements to be included in each of our dialogs:

  1. A positioned element to contain the text display for the user.
  2. An OK button that closes the dialog.




<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 
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>

The display text has been given a color of windowtext. The button simply closes the dialog. In a true dialog the OK button could pass variables to a controlling function that reflect choices the user made in the dialog. An additional Cancel button could be added to disregard user choices.

Now, let's put all our HTML together:

<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>
&nbsp;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)">&nbsp;Menu1&nbsp;</SPAN>
<SPAN ID="span2"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)">&nbsp;Menu2&nbsp;</SPAN>
<SPAN ID="span3"
STYLE="height:18px;width:40px;padding-top:2"
onMouseDown="setMenu(this)">&nbsp;Menu3&nbsp;</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>
&nbsp;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>

Now, on to the script.



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/colsIEexample7.html