CSS style sheet a 'window' visual effect : DOM Content « Development « JavaScript DHTML

Home
JavaScript DHTML
1.Ajax Layer
2.Data Type
3.Date Time
4.Development
5.Document
6.Dojo toolkit
7.Event
8.Event onMethod
9.Ext JS
10.Form Control
11.GUI Components
12.HTML
13.Javascript Collections
14.Javascript Objects
15.Javascript Properties
16.jQuery
17.Language Basics
18.Mochkit
19.Mootools
20.Node Operation
21.Object Oriented
22.Page Components
23.Rico
24.Scriptaculous
25.Security
26.SmartClient
27.Style Layout
28.Table
29.Utilities
30.Window Browser
31.YUI Library
JavaScript DHTML » Development » DOM Content 




CSS style sheet a 'window' visual effect


/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
*/
<head>
<style type="text/css">
/**
 * This is a CSS style sheet that defines three style rules that we use
 * in the body of the document to create a "window" visual effect.
 * The rules use positioning attributes to set the overall size of the window 
 * and the position of its components.  Changing the size of the window
 * requires careful changes to positioning attributes in all three rules.
 **/
div.window {    /* Specifies size and border of the window */
    position: absolute;            /* The position is specified elsewhere */
    width: 300px; height: 200px;   /* Window size, not including borders */
    border: outset gray 3px;       /* Note 3D "outset" border effect */
}

div.titlebar {  /* Specifies position, size, and style of the titlebar */
    position: absolute;        /* It's a positioned element */
    top: 0px; height: 18px;    /* titlebar is 18px + padding and borders */
    width: 290px;              /* 290 + 5px padding on left and right = 300 */
    background-color: ActiveCaption;  /* Use system titlebar color */
    border-bottom: groove black 2px;  /* Titlebar has border on bottom only */
    padding: 3px 5px 2px 5px;  /* Values clockwise: top, right, bottom, left */
    font: caption;             /* Use system font for titlebar */
}

div.content {   /* Specifies size, position and scrolling for window content */
    position: absolute;        /* It's a positioned element */
    top: 25px;                 /* 18px title+2px border+3px+2px padding */
    height: 165px;             /* 200px total - 25px titlebar - 10px padding */
    width: 290px;              /* 300px width - 10px of padding */
    padding: 5px;              /* allow space on all four sides */
    overflow: auto;            /* give us scrollbars if we need them */
    background-color: #ffffff; /* White background by default */
}
</style>
</head>

<body>
<!-- Here is how we define a window: a "window" div with a titlebar and -->
<!-- content div nested between them.  Note how position is specified with -->
<!-- a style attribute that augments the styles from the style sheet -->
<div class="window" style="left: 10px; top: 10px; z-index: 10;">
<div class="titlebar">Test Window</div>
<div class="content">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br> <!--Lots of lines to -->
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br> <!--demonstrate scrolling-->
</div>
</div>

<!-- Here's another window with different position, color, and font weight -->
<div class="window" style="left: 170px; top: 140px; z-index: 20;">
<div class="titlebar">Another Window</div>
<div class="content" style="background-color:#d0d0d0; font-weight:bold;">
This is another window.  Its <tt>z-index</tt> puts it on top of the other one.
</div>
</div>
</body>


           
       














Related examples in the same category
1.Define a NodeFilter function to accept only 'img' elements
2.Check DOM Node object whether represents an HTML tag
3.If a DOM Node object is a Text object
4.recursively looks at node n and its descendants: replacing with their uppercase equivalents
5.Creating a Table: Using the insertBefore Method with DOM
6.Navigating Documents
7.A DOM Core Document Analyzer
8.Adding/Replacing DOM Content
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.