| home / experts / dhtml / column24 |    |
|
The caption elements for both dialogs have the same HTML. The one exception is the caption text, of course. The large dialog displays DHTML Popup Element 1 and the smaller one, DHTML Popup Element 2.
 | <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>
|
Each caption is a positioned element with its background color set to inactivecaption, and the color of the contained text to inactivecaptiontext. We set its onMouseDown event handler to call the grabEl() function. Regular readers of DHTML Lab may recall that grabEl() is the first function in our drag-and-drop script from column 7. We will be including an adapted version of that script to enable dialog dragging.
The first element enclosed in the caption is an image, 
, (x.gif), with a transparent background. We align the image on the right and give it a background color of buttonface and a border color of buttonhighlight, creating a close button: 
The close button has both onMouseDown and onMouseUp handlers. They call the xPress() function which will create a depressed version of the button when pressed and a regular version when the mouse button is released.
Since our close button is aligned to the right, the other elements in the caption will render from the left. We first include a small WebReference icon, 
, to identify the dialog as being a WebRef application dialog, in the Windows tradition.
Then, we add a non-breaking space and the caption text.
When we include the caption HTML in the dialog HTML, we get this result:
 | <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> |
 | <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> |
On the next page, we'll create the menus for the large dialog.
|
|
Produced by Peter Belesis and
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
All Rights Reserved. Legal Notices.
Created: Feb 23, 1999
Revised: Feb 23, 1999
URL: http://www.webreference.com/dhtml/column24/colsIEexample4.html
