DHTML Lab: Accessing the User-Defined System Colors, Part I

home / experts / dhtml / column24

Developer News

OpenOffice 3.2 Lands Amid Critical Changes

Red Hat, IBM Firmly in KVM Virtualization Camp

Red Hat Talks Up Open Source Cloud Plans

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:

A positioned element to contain the text display for the user.
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

The Network for Technology Professionals

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

Solutions

Whitepapers and eBooks

Article: Adobe Helps PHP Developers Create Rich Internet Applications
Case Study: Microsoft IT Strengthens Security with Data Loss Prevention Solution
Article: Reduce Your Infrastructure Costs with Microsoft System Center
Intel Brief: Five-Star IT Support--Intel Core 2 processor with vPro Delivers ROI of 524 Percent
Article: Security Enhancements Abound in Windows Server 2008
Article: Enterprise Social Computing with Microsoft SharePoint 2010
Intel Whitepaper: Implementing Intel vPro Technology to Drive Down Client Management Costs

Microsoft Whitepaper: Improve Communications and Collaboration
Intel Article: Intel Core i5 vPro Brings Intelligence to the Processor
Microsoft Personalized Whitepapers and Resources for You
Microsoft Articles: Visual Studio 2010
Adobe Article: Java Developers Finding a Home at Adobe Flex
Microsoft Whitepaper: Make Better Decisions - SQL Server 2008 Business Intelligence.
MORE WHITEPAPERS, EBOOKS, AND ARTICLES

Webcasts

Video: How System Center Helps Reduce IT Costs
IBM Cloud Computing for Developers Virtual Event, April 6-8

Microsoft Video: OCS and Exchange: Platform Futures
MORE WEBCASTS, PODCASTS, AND VIDEOS

Downloads and eKits

HP PartnerONE | SolutionsINFINITE Visit us at hp.com/partners/us
Iron Speed Designer Application Generator

MORE DOWNLOADS, EKITS, AND FREE TRIALS

Tutorials and Demos

Learn Unified Communications
Learn SQL Server 2008
Learn Windows Server 2008 R2
Internet.com Hot List: Get the Inside Scoop on IT and Developer Products
Learn Forefront

Learn System Center
All About Botnets
Learn SharePoint
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES

The latest from WebReference.com

Browse >

Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS

Sitemap · Experts · Tools · Services · Email a Colleague · Contact

FREE Newsletters >

The latest from internet.com

IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

URL: http://www.webreference.com/dhtml/column24/colsIEexample7.html