Dynamic HTMLMinder Chenmchen@gmu.eduhttp://65.168.115.5/dhtml/

COURSE OVERVIEWOverview

This course introduces you to Dynamic HTML, extension of the traditional static HTML document, to create pages that are live and interactive on the client.

Objective

Upon completion of this course, you should be able to understand new features of Dynamic HTMLdynamically change the rendering and content of a documentcreate visually HTML documents that interact with the user without the burden of relying on server-side programs

TABLE OF CONTENTS1. Introduction to Dynamic HTML2. Dynamic Styles2.1 Cascading Style Sheets2.2 Dynamic Style and CSS2.3 Style Sheet Properties 2.4 Dynamic Styles3. Dynamic Position4. Dynamic Contents5. Data Binding6. Dynamic HTML Object Model

ReferencesShelley Powers, Dynamic HTML, IDG Books, 1998. Danny Goodman, Dynamic HTML: The Definitive Reference, O'Reilly, 1998. Dynamic HMTL tutorial at: For cross-browser compatibility by Shelley Powers: http://www.yasd.com/samples/dhtml/toc.htmhttp://www.microsoft.com/workshop/http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp HTML 4.0 Working Draft at http://www.w3.org/TR/WD-html40/CSS1 Recommendation at http://www.w3.org/TR/REC-CSS1CSS Positioning Working Draft at http://www.w3.org/TR/WD-positioning Preliminary version of the Document Object Model requirements document at http://www.w3.org/DOM/drafts/requirements.html

1. Introduction to Dynamic HTML

What Is Dynamic HTML?HTML is an application of SGML(Standard Generalized Markup Language).Dynamic HTML provides authors with total creative control over all aspects of an HTML document. It extends traditional HTML and Cascading Style Sheets to let you access and manipulate all elements of a documenttags, attributes, styles, images, objects, and textcreating, moving, and modifying these elements when needed. In addition to two aspects of tradition HTML: structure and contents. Cascading Style sheets add the "style" aspect of your web pages. Dynamic HTML now includes a fourth component: behavior, referring to the interaction between the HTML pages and the user implemented via client-side scripting languages.Dynamic HTML is a set of innovative features in Microsoft Internet Explorer 4.0 or Netscape Navigator 4.0. By enabling authors to dynamically change the rendering and content of a document, to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects.

New Features in Dynamic HTMLHTML 4.0 and CSS (Cascading Style Sheet) support IE 4.0 support latest HTML 4.0 standard, CSS1 and many of the new CSS enhancements. These HTML and CSS standards define what is exposed by Dynamic HTML object modelFull access to the document structure (DOM: Document Object Model)Through the Dynamic HTML object model, all elements in the document are accessible and controllable by scripts. You can change colors, typefaces, spacing, indentation, position, and even the visibility of text. Dynamic StylesUse the Dynamic HTML object model to modify the documents CSS in order to change the appearance of the document.

New FeaturesDynamic PositioningUse the Dynamic HTML object model to access and manipulate the positions of the elements and the layout of pages.Dynamic ContentUse the Dynamic HTML object model to change the content of the document after loading.Instant user response (new attributes for events)Used the Dynamic HTML new event model to exposes all user actions to the page. Documents contents or style can be dynamically changed based on uses interaction.Client/server Web page (Data binding)Tables, forms and reports are extended in IE 4.0. Data is asynchronously downloaded and stored locally allowing client-side searching and sorting without assistance from server.Multimedia and animation effectsMultimedia and animation effects are tightly integrated in IE 4.0. These effects include filters to simulate light sources, shadows and other effects that operate directly on text or controls. Transition effects between images and text or even pages can also be added.

Programming LanguageA programming language is used to manipulate the Dynamic HTML Object Model. Dynamic HTML is designed to be platform independent. Therefore, Java Script, Jscript, VBScript, C++, Java or any other programming language can be used as the language of choice.This course uses primarily JScript to access the document object model.Extensions for the Dynamic HTML object model are compatible with that of past version.

2. Dynamic Styles

Structure and StyleStructure provides contexts for the information contained with a document. For example, elements H1 through H6 are meant to define various header and their relative levels.Stylistic tags (physical tags), like and were introduced mark bold and italic text, were invented to create an interesting page to attract more hit or visit of the web site.Confuse the use of Style tag and Structure tags does have consequence.Tools become less powerful. E.g. Indexing toolInvalidates usefulness of (logical) tags, e.g. tag A properly structured page can improve accessibility to the underlying information.

Structure and StyleHTML defines a set of rules representing the proper structure of the document. A DTD (Document Type Definition) describes the relationship among elements. E.g. H1 can be followed by H1 or H2 but not H3.Until mid-1996, HTML fails to be a true SGML (Standard Generalized Markup Language), in which style and structure are defined separately. A document written in SGML can have an associated style sheet that defines how the structural elements are rendered.In mid-1996, a new language named Cascading Style Sheets was introduced for specifying style in HTML. The CSS has been adopted by the major browser implementations.

Structure and StyleWith CSS a Strong elements (and Bold elements) is no longer presents boldface text. Instead a style sheet is used to specify how to render text enclosed in the and tags.

STRONG {font-style:italic}

CSS (Cascading Style Sheets) support gives web authors word processor-like control over the text in HTML documents so you can define complex styles for things like paragraphs, documents, and collections of documents so you can create extensive and dramatic page layout settings. To take full advantage of Dynamic HTML, document should separate the content structure from the presentation/style.

Sample Style DefinitionH1 { font-size: x-large; color: green }H2 { font-size: large; color: blue }.x { color: red }P.note { font-size: small }#footer { font-family: serif }H1 and H2 are selectors, which correspond to style names. The selector's properties and values are contained within the curly braces { }. font-size is a property, and x-large is the value of the font-size property. You can specify multiple properties for a selector by separating each with a semi-colon ( ; ). .x is a class selector .note is a class selector, and #footer is an ID selector.

Defining and Using StylesStyle Sheet

Heading 1This is a testThis is a test. Heading 2 This is a span example. Using id1 ...

2.1 Cascading Style SheetsAll the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

Browser default External Style Sheet Internal Style Sheet (inside the tag) Inline Style (inside HTML element)

Cascading Style Sheets (CSS)CSS is a language with a set of properties for defining the appearance of a HTML document, and adding dynamic style to a page through a script.Style sheet contains only the definition of the style of a document, so as to separate the style from either the contents or structure.The term Cascading in CSS refers to the ability to merge multiple style sheets to form a single style definition for an element or for the entire document.There are three techniques for adding a style sheet to document:Inline styleGlobal style sheetLinked style sheet

Defining Style Sheets in Web PagesInline styles

Embedded style sheet

BODY {background-color: white; margin-left: 1.0in}

Linked and imported style sheetsLinked style sheetsTest

Imported style sheet

@import url(basic.css)

Inline StyleAn inline style is simple: the style is defined directly on the element, using STYLE attribute. For example, using STYLE attribute to create a centered paragraph with a large font.

inline_style1.html

This creates a centered paragraph with a large font. This creates a red, righted paragraph with a smaller font

Inline StylesAn Inline style is basically an style sheet for a single instance of an element and is specified in elements begin tag. Inline style can help you learn the style sheet language or quickly change a single instance of an element. However, Inline style does not reflect true spirit of a structured document. So that it is not much different from traditional HTML. With inline styles, the appearance of the document can not be easily changed.Better approaches: Style sheet should be specified either in the beginning of document or put it into another document to be linked when needed.

Global Style SheetA Global Style Sheet is to define the style of a document at the beginning of the document.The tag in the documents header is used to add a global style sheet to a document.Centralizing all the documents style in a single location makes it easy to modify how the document is rendered.To change the rendering of all paragraphs, only this single entry in global style sheet needs to be modified. Every time a new rule is added or removed or a style is changed, the entire document is recalculated.

Global Style Sheetglobal_sheet1.html

P {font-size:200%; text-align:center}All paragraphs are now larger and centered. This paragraph is also larger and centered

Defining A Style SheetA style sheet is created by CSS language which consists of selectors and presentation rules. Selector specifies the elements that are associated with particular presentation rulePresentation rules specify how elements are rendered.There are two type of selectors Simple selector can be ELEMENTS,CLASS attribute of elements, or ID of specific style.Contextual selector is associated with particular element containership- e.g., all tags inside tags.

Identifying ElementsHTML exposes a set of attributes of elements objects, such as H1, P, that make them easy to identify in various ways, including tag name, and the ID,CLASS and NAME attributes:

AttributePropertyCase-Sensitive?Applicable Elements

(None)tagNameAlways UppercaseAll, including commentsIDidYesAll, except commentsCLASSclassNameYesAll, except commentsNAMEnameYesAnchor,Applet, Button, Form, IMG,Input, Map, Meta,Object, Select and Text Area.

Simple Selector and Its Presentation RulesH1 {color:blue} /* Change all H1s to blue. */

.large {font-size:120%} /* display all elements with CLASS=large in large font. */

#navy {color:blue} /* Give the element with ID=navy a blue font. */

H1.wide {letter-spacing:2px} /* Give the H1 elements with CLASS=wide wider letter spacing. */

Contextual Selector and Its Presentation Rules

P EM {color:red} /* Change all elements contained within to red. */

UL LI.large {font-size:120%} /* Make all elements with CLASS=large contained within the element in the have larger font. */

Global Style Sheetsglobal_sheet2.html

.large {font-size:200%} #navy {color:blue} Larger text. This text is blue and with normal size.

Linked Style SheetLinked Style Sheets is the most abstract and powerful technique to define style separately in another document/file.A linked style sheet is created by the same syntax of global style sheet.The advantage of using a linked style sheet is that all the rules and styles can be defined and encapsulated in a single file that can be shared across multiple documents.A linked style sheet can improve performance because it is cached locally on the client, separate from the document, so each document is smaller and the style sheet is downloaded only once.

Linked Style Sheetlinked_sheet1.html

This document uses the styles specified in fancy.css.This Header is blue. Based on the definition in fancy.css, these words are turned to red

fancy.cssP EM {color:red} /* Change all elements contained within to red. */H1 {color:blue}

Using FrontPage: Format / Stylesheet...

CSS Example

Sample Page with CSS

Heading 1 in Blue and 28 pt font This is a standard page with text indented by 0.5 in. Using P.extended class A paragraph without text indentation.

More Samples of CSS FeaturesThese samples present some of the interesting feature of CSS supported by Internet Explorer 4.0Example 1 : Using the list-style property, we can replace built-in bullets in lists by custom bullets, such as a GIF. This technique degrades well on down-level browser.

Custom Bulleted Lists: bullet.htmlCustom Bulleted Lists /*Display cool.gif instead of default symbol for the bullet */ UL { list-style-image: URL(cool.gif)} Custom Bulleted List You can provide a custom bullet! The bullets are replaced with cool.gif Each bullet can be different

samples.cssH1 {color:navy} /* Change H1 elements to navy*/

DIVHTML elements can be grouped or positioned within containers using & or & . and are neutral style tags that only apply styles to an elements or groups of elements. is a block-level element that may contain headings, paragraphs, tables, and other divisions. is a text-level element that may be used midstream in a sentence to apply a style.

Represents different kinds of containers, for example, chapter, section, abstract, or appendix, when used with the CLASS attribute. DIV allows the enclosed group of elements to be given a distinctive style. ...ParametersALIGN=LEFT|CENTER|RIGHT|JUSTIFY Specifies the default horizontal alignment for the contents of the DIV element, when DIV is used with an ALIGN attribute. This is needed for compatibility with deployed browsers and may be overridden by style sheets.

DIVCLASS=container type Represents different kinds of containers, for example, chapter, section, abstract, or appendix. DIV allows the enclosed group of elements to be given a distinctive style. Example

This text represents a section.

This text represents another section.

Sample HTML HTML Sampler Web Page HTML Sampler

This is paragraph 1

We will show you how to use dynamic HTML.

This course is developed by Advanced IT Consulting

Element Containment with and without Document

Heading Paragraph 1 Paragraph 2 Paragraph 3LinkDocument

Heading Paragraph 1 Paragraph 2 Paragraph 3Link Division 1

Inheritance Chains HTMLHEADBODYTitleH1PPPHTMLHEADBODYTitleH1DIVPPAPA

2.2 Dynamic Style and CSS

Dynamic Styles and CSSDynamic Style is the modification of the style sheet associated with the document through a script.Rather than define an alternative style sheet language, Dynamic Styles in IE modify the documents CSS-defined style sheet via style property in every element, enable and disable global and linked style sheets and add rules and change rules on an existing style sheet.

2.3 Style Sheet Properties

Style Sheet PropertiesStyle Sheet Properties control the appearance of an elements contents and thereby control the style of a document.Some properties in CSS are defined to be compound properties. For example, the CSS background attribute contains information about the background image, URL, position :

body {background:red URL(cool.gif)}

Background Propertieslinked_sheet2_background.html

Referencing Style Sheet Properties in ScriptsMany CSS properties have a dash in their name (such as background-color). The dash isn't a valid character for identifiers in most scripting languages. To get around this little problem, continue to use the dashed name when specifying the CSS attribute in HTML or in a style sheet, but when accessing the attribute as a script property, remove the dash, and capitalize the next letter. For example: background-color becomes backgroundColor border-left becomes borderLeft margin-bottom becomes marginBottom The naming rule can be applied generally with one exception. The CSS float property is exposed as styleFloat.HTML: { background-color: sColor }Scripting: object.style.backgroundColor [=sColor ]

ExampleThe following examples use the background-color attribute and the backgroundColor property to specify the background color. This example uses an inline style sheet to set the background color to beige. . . . This example uses inline scripting to set the background color to beige. . . .

Sample Code HTML Sampler Web Page

.x { text-indent: 0.5in; font-family: Comic Sans MS; font-size: 24pt }

HTML Sampler

This is paragraph 1

We will show you how to use dynamic HTML.

This course is developed by Advanced IT Consulting

cssTEXT PROPERTYcssTEXT contains an elements style in the form of a string and you could retrieve the style or copy a style from one element to another. cssText.html

Sharing the cssText Property This paragraph is red with a half-inch indent.This paragraph has a default appearance. Click to make this paragraph look like the first paragraph.

Document object could be used to retrieve information about the document, to examine and modify the HTML elements and text within the document, and to process events.

2.4 Dynamic Styles

Dynamic StylesDynamic styles uses combination of programming scripts( VBScript or Java Script) and CSS(Cascading Style Sheets) to modify the appearance of the document. Dynamic styles are based on the W3C Recommendation for Cascading Style Sheets(CSS) specification for static style sheets.Dynamic Styles are an integral components of interactive Web pages.The style of a document is defined using style sheet and HTML. Dynamic styles have been designed to require no new HTML. CSS attributes can be set from the style sub-object for each element, while regular HTML attributes are accessed as properties on each elementYou can dynamically change the style of any HTML element in a document. You can change colors, typefaces, spacing, indentation, position, and even the visibility of text.

Mouse EventsAn event is a notification that occurs in response to an action, such as a change in state or as a result of the user clicking the mouse or pressing a key while viewing the document. Dynamic HTML exposes a set of events that allows Web authors to respond to most interactions between the user and document.The different states of the mouse are captured by Dynamic HTML Object Model. Mouse events occur when the user moves the mouse or clicks the left button.

Mouse EventsEventDescription

onmousedownMouse button was pressedonmousemoveMouse was moved or is being movedonmouseupMouse button was releasedonclickLeft mouse button was clicked, or the default action of an element was invoked.ondbclickLeft mouse button was double-clicked onmouseoverMouse pointer entered the scope of an elementonmouseoutMouse pointer exited the scope of an elementondragstartsA drag-and-drop operation was initiatedonselectstartA new selection was initiated over an element using the mouseonselectA selection is occurring

Use Mouse Events to Change Inline StylesInline_style2.html

This element turns yellow when the mouse moves over it.

Example of Dynamic Stylesdstyle1.html

Make me red Make me red

Use Script to Dynamically Change Stylesdstyle2.html:

Click Here This will go away This is some text function toggle(e) { if (e.style.display == "none") {e.style.display = ""; } else {e.style.display = "none";} }

display vs. visibility Attributedisplay Indicates whether an element is rendered. If set to none, the element is not rendered. e.style.display = noneIf set to one of the other values, the element is rendered. The default is to render the element. e.style.display = ;visibilityIndicates whether the content of a positioned element is displayed.Acts similarly to that of display.

A script object to specify an inline text container. This element is especially useful for applying CSS styles.

This paragraph contains a single blue word.

Use Script to Dynamically Change Stylesdstyle3.html:

Click Here This will go away This is some text function toggle(e) { if (e.style.visibility == "hidden") {e.style.visibility = "visible";} else {e.style.visibility = "hidden";} }

ExpandingList.htmExpanding List Item

Item 1

Item 1.1 Item 1.2

Item 2

Item 2.1 Item 2.2

function toggle(e) { if (e.style.display == "") {e.style.display = "none";} else {e.style.display = "";} }

class AttributeInline Style is simple and useful but clumsy if there are more then one property needed to be manipulated. A more effective way to change style for two or more classes in a global style sheet and dynamically change the class attribute of an element.The class attribute of an element is exposed through the className property.

class ATTRIBUTEchangeClassAttribute.html

Changing the class Attribute .yellow {background:yellow; font-weight:bolder} This H1 element changes its CLASS attribute when the mouse moves over it. There are two advantages:Multiple parts of the style can be changed with a single line of codeModify style by changing style sheet rather than using code

class ATTRIBUTE: animatedButton.html

Animated Buttons.over {color:yellow; background:navy}.down {color:yellow; background:red}Animating Buttons

AN EXAMPLE OF CHANGING THE class ATTRIBUTEONMOUSEOUTONMOUSEOVERONMOUSEDOWN

Multiple Style SheetsGlobal style sheets and linked style sheets provides more flexibility of modifying style of a documents. Style sheets could be turned on and off, rules could be accessed and changed and new rules can be added,etc.The Style element supports the DISABLED attribute, which can be used to control which style sheets are applied to the document.This technique is useful for switching between different views of the same data.

#headOnly {display:none} #detail {display:none} DIV {display:none} Demonstration of Multiple Views Header view, click here for detail view. Detail view, click here for header view. This is the details Multiple Style Sheets - multipleStyleSheet.html

Multiple Views of The Same Data

3. Dynamic Position

Dynamic PositioningCascading Style Sheets (CSS2) specification provides the syntax for specifying the precise positions of HTML elements. CSS2 includes CSS1 and CSS-Positioning. There are three types of positioning: static, absolute, and relative. Static positioning is the default and corresponds to the traditional way HTML document are layout. Item is not positionable. Dynamic positioning introduces two new positioning: absolute and relative.Absolute positioning, an element is taken out of normal flow of the document and positioned according to the parent coordinate system.Relative positioning, an element stays in the flow of the document and is positioned relative to its normal position in the flow.To absolutely position text, you should use a SPAN and DIV element and generally speaking, both of them can be used interchangeably.

Using LayersA layer is a container for HTML content, usually delineated by the DIV or SPAN tags, that you can position anywhere on a page. Layers can contain text, images, forms, plug-in objects, and even other layers. CSS layers (i.e., CSS-P) position content on a page using the DIV and SPAN tags. Netscape layers position content on a page using the Netscape proprietary LAYER and ILAYER tags.Positioning properties of layers include left and top (x and y coordinates) and z-index (i.e., stacking order), and visibility.

Absolute Positioning ExampleAbsolute_position1.html

This example demonstrates Absolute Positioning. in a paragraph.

Relative Positioning ExampleRelative_position1.html

This example demonstrates Relative Positioning. in a paragraph.

With an relative-positioned element, the anchor point of its positioning context is the top left corner of the place (the box) where the normal flow of the content should go.

Absolute Positioning ExampleAbsolute_position2.html

Positioning Welcome to Dynamic HTML!With positioning, you can place images exactly where you want them, even behind text and other images.

Exercise: relative_position3.html

Positioning

Welcome to Dynamic HTML!With positioning, you can place images exactly where you want them, even behind text and other images.

Block-Level Elements and Box PropertiesBox topBox leftmargin spaceborder spacepadding spacecontent spaceBox widthBox heightelement widthelement heightMargin propertiesPadding propertiesBorder properties

CSS Length UnitsMeasurements and positions in cascading style sheet (CSS) properties are made using length units. Internet Explorer supports two types of length units: relative and absolute. Relative length unitsem *The height of the element's font.ex *The height of the letter "x".pxPixels.%Percentage.Absolute length unitsinInches (1 inch = 2.54 centimeters).cmCentimeters.mmMillimeters.ptPoints (1 point = 1/72 inches).pcPicas (1 pica = 12 points).

Define Box Properties

CSS1 - Border Properties

BODY { margin: 50px 30px 50px 30px }P.extended { margin: 15% }

Margin properties Show the use of CSS1 to set the margins for the web page.Set white space for various other elements

BODY {margin-top: 50px; margin-right: 30px; margin-bottom: 50px margin-left: 30px;}P.extended { margin: 15% }

10015

CSS Positioning Properties

Property

Allowable Values

Applies To

Description

position

static | absolute | relative

All elements

Specifies type of positioning.

top, left

auto | |

All elements with position set to absolute or relative

Defines the top and left positions of the element relative to its parent.

width, height

auto | |

All block elements, replaced elements, and elements with position set to absolute

Defines the size of the element. Percentages are relative to the parent.

CSS Positioning Properties

Property

Allowable Values

Applies To

Description

clip

auto | rect

All elements with position set to absolute

Defines the clipping region for the element.

z-index

auto | number

All elements with position set to absolute or relative

Specifies an elements position overlapping or being overlapped by other elements.

visibility

inherit | visible | hidden

All elements

Specifies whether the element is visible. A hidden element is not removed from the documents flow.

overflow

visible | hidden | auto | scroll

All elements with position set to absolute and all block elements.

Specifies whether scrollbars are displayed if the contents do not fit in the element.

Absolute Positioning Elements in IE 4.0AppletButtonDIVFieldsetIframeIMGInputObjectSelectSpanTableTextArea Since absolute positioned elements are positioned outside the flow/context, the order of the elements within the context becomes less important. In IE 4.0, all elements support relative and static positioning. However, only these following elements support absolute positioning.

Coordinate SystemsEvery element that is either absolutely or relatively positioned must be positioned relative to another element or position in the document. The location from which the element is offset is called the root of the elements coordinate system.

Relatively positioned elements have their root based on their normal flow position in the document.Absolutely positioned elements have root to the upper left corner of the document defines the default coordinate system for all absolutely positioned elements.

Size and Position in Coordinate SystemsWhen an element is positioned either absolutely or relatively, its top and left properties specify the offset of the element from the upper left corner of the coordinate system. The width and height properties define the physical width and height of the element. Positioning context of the element: A point somewhere on the screen that has coordinate point (0, 0). The default positioning context is the upper left corner of the window or frame. Each time an element is positioned, it spawns a new positioning context with the (0, 0) position located at the top left corner of that element. For relative sizes, the width and height properties are interpreted relative to the size of the element defining the coordinate system. The top, left, width, and height properties can be specified as a percentage or in any of the units (for example, points, pixels, and ems) defined by CSS.

coordinate_system.html

absolutely positioned DIV element, create a coordinate system. absolutely positioned inside the DIV element.

Example of Nested Coordinate Systems

Example of Nested Coordinate Systems

Automatic SizingIf top and left properties both set to auto, a relative positioned element is displayed the same as static positioned element, an absolutely positioned element is positioned outside the flow but anchored at the position it would have as a static positioned element.If width and height property is omitted, the element is automatically sized based on its content.

Automatic SizingCoordinate_system_auto_size.html

absolutely positioned DIV element, create a coordinate system. absolutely positioned inside the DIV element with automatic sizing feature.

The visibility and z-index PropertiesAn element is visible based on whether its parent element is visible because by default the visibility is inherited. It can be overwritten with either hidden or visible.z-index property defines the graphical z-order or overlapping, of elements in relation to the other elements. All elements that define a coordinate system, including the element are positioned with a z-index of 0 in default. To place an element behind them, specified a negative z-index.

visibility Property in Coordinate Systemcoordinate_system_hidden.html

absolutely positioned DIV element, create a coordinate system. absolutely positioned inside the DIV element.

z_index

z_index.html

Positioning Welcome to Dynamic HTML!With positioning, you can place images exactly where you want them, even behind text and other images.

Overlapping Graphics and Texts

main.cssBODY { background-image: url(snow.jpg) }image { width: 100; height: 150 }h2 { font-family: Cursive; font-size: 12pt; font-weight: 400; color: white }h2 A { text-decoration: none; color: white }h2 A:link { color-white }h2 A:visited { color: white }#logo { position: absolute; top: 20px; left: 50px; width: 102px } #image1 { position: absolute; top: 20px; left: 180px; z-index: 1 }#image2 { position: absolute; top: 20px; left: 290px; z-index: 1 }#image3 { position: absolute; top: 20px; left: 400px; z-index: 1 }#image4 { position: absolute; top: 20px; left: 510px; z-index: 1 }#title1 { position: absolute; top: 20px; left: 185px; z-index: 2; height: 1px; width: 1px}#title2 { position: absolute; top: 20px; left: 295px; z-index: 2; height: 1px; width: 1px }#title3 { position: absolute; top: 20px; left: 405px; z-index: 2; height: 1px; width: 1px }#title4 { position: absolute; top: 20px; left: 515px; z-index: 2; height: 1px; width: 1px }

main.htm

ServicesSitesScribblesSamples

clip PropertyEach absolutely positioned element has a clipping region associated with it. The purpose of this clipping region is to define the portion of the document available for displaying the element and its contents. Anything outside that portion is clipped, or not displayed.The default value of the clip property is auto, which causes the contents not to be clipped. The clip property can be set to be a rectangle:

clip:rect(top right bottom left )

Example on Clipping: clip.html

Clip the DIV some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content some content

The overflow PropertyThe overflow property controls how any contents that extend beyond the physical size of the element are handled.The overflow property takes one of four values: visible, hidden, auto, and scroll.overflow = visible, all contents are displayed, even contents outside the specified height and width of the element.overflow = hidden, only the contents within the elements height and width are displayed; no contents flow beyond the specified boundaries.overflow = auto, scrollbars are added when the contents are larger than the height and width of the element.overflow = scroll, scrollbars are added regardless of the size of the contents.

Example of overflow set to scroll

Scrolling Sidebar Scrolling Sidebars Scrolling Sidebar This text appears in a scrolling window that is floating to the left of the main contents. These contents appear to the right of the scrolling DIV element.

Example of overflow = scroll

overflow = auto When Content Size Is Less Than Boundary

Overflow Set to Auto When Content Size Is Bigger Than Boundary

Creating SidebarsTraditionally, sidebars are created using tables, but with float property in CSS tables are no longer required. in the example sidebar.html is to assign a class to text contents and the float property can be set in a style rule for that class. There are 2 types of sidebars created in sidebar.htmlSidebars are surrounded by text, similar to images, aligned along the left and right edge.Sidebars are out of the margins of the flow of the document.

sidebar.htmlSidebar Example

BODY {margin-left: 144pt; margin-right:0pt} .inflow {float: left; width:144pt; color: blue; font-weight: bold} .outflow {float: left; margin-left: -72pt; width: 144pt; color: brown; font-weight: bold} Sidebar Example Notice that the text is wrapping around this sidebar. This example demonstrates a sidebar that exists within the flow of the document. The contents wrap around the sidebar and continue below it.

This sidebar appears in the left margin of the document.

This example demonstrates how to manipulate a document's margins to force a sidebar to float in the margin. By adjusting the margins, the sidebar can also be made to overlay the flow of the contents.

4. Dynamic Contents

Dynamic ContentsDynamic content is all about changing the content of the HTML documentinserting and deleting elements or the contents of an element before or after the document has been loaded. The contents of an elements within a document is exposed through four properties and two methods. Properties are innerHTML, innerText, outerHTML, and outerText and methods are insertAdjacentHTML and insertAdjacentText

Dynamic Contents PropertiesThe basic difference between innerHTML and outerHTML properties on one hand and innerText and outerText on the other hand is that HTML properties expose the entire markup while TEXT properties expose contents without the markup.Dynamic Content is Very Cool!For the H1 element, the following table lists values of four properties:

PropertyValue

innerTextDynamic Content is very coolinnerHTMLDynamic Content is very coolouterTextDynamic Content is very coolouterHTMLDynamic Content is Very Cool!

innerText vs. innerHTMLinnerText and innerHTML properties represent the contents of the element, including any elements contained by that element. InnerText

document.all.myH1.innerText = DHTML is Very Cool

The content of the H1 in previous example can be changed with the innerText property.The H1 element remains in the document, while the content of the H1 changes to contain the new string "DHTML is Very Cool". The string assigned to innerText renders any HTML tags as text, and does not process the HTML. To insert HTML code into the contents of another element, you must use the innerHTML

innerText vs. innerHTMLinnerHTML

document.all.myH1.innerHTML = "DHTML is Very Cool!

The new string replaces the original content of the H1, and the word "Very" appears in italic.

outerText and outerHTMLThe ourtText and outterHTML properties represent the element itself, as well as the contents of the element. Assuming that the preceding example is contained by a BODY elementouterText

document.all.myspan.outerText = "DHTML is VERY Cool!"

replaces the entire element with the string attached and causes the H1 to go away entirely, and the text string appears where the element was in the flow of the BODY 's content.

outerText vs. outerHTMLouterHTML

document.all.myH1.outerHTML = "

Exercise: dyn_content1.htmlDynamic ContentsThis is a test

insertAdjacentHTML and insertAdjacentText.insertAdjacentHTML and insertAdjacentText insert contents before or after the begin or end tag. The methods can inset text at one of the four position: beforeBegin, afterBegin, beforeEnd and afterEnd. The following example shows the values of the four properties and where these positions are for element H1.

Dynamic Content Properties & PositionsWelcome to Dynamic HTML class.beforeBeginafterBeginbeforeEndafterEnd

Property

Value

innerText

Welcome to Dynamic HTML class

innerHTML

Welcome to Dynamic HTML class

outerText

Welcome to Dynamic HTML class

outerHTML

Welcome to Dynamic HTML class

Example on Replacing Contenthid_button.html

Disappearing Button Replacing an Element

Example of insertAdjacentHTMLbeforeBegin.html

Disappearing Button Please click here.

Example of insertAjacentHTMLbeforeEnd.html

Dynamic Content: Inserting Elements

function insertPara(){ document.body.insertAdjacentHTML("BeforeEnd", "But adding a line makes it less so."); }

This is a very short document.

5. Data Binding

What is Data BindingIE 4.0 enables content providers to develop data-centric Web applications that support retrieval and update through native data binding facilities. Data binding technique makes data-driven pages easy to author with minimal scripting required. Once data is downloaded to the client asynchronously the data can be sorted and filtered without requiring additional trips to the server. So that pages render quickly and provide immediate interactivity. Compare that to traditional Web pages and those generated by server-side scripts. Once the data reaches the client, it's static, and any manipulation of that data requires another server request.

Data Binding ArchitectureData binding is based on a component architecture consisting of four major pieces: Data source objects to provide the data to a pageData consumers, the data-consuming HTML elements display the dataThe binding agent ensure that both provider and consumer are synchronizedThe table repetition agent.

Data Binding Architecture

dept.htm

IDName

dept.txtID,NameBIOL,BiologyANIM,Animation

repeat.html

repeat.html

Repeated Table Data Binding .thd { color: "#0000FF"; font-weight: bold; text-decoration: underline; cursor: hand }

repeat.html

Repeated Table

repeat.html Symbol Last Change Volume

repeat.html

function sort() { if (event.srcElement.id != "") { stocklist.Sort=event.srcElement.id; stocklist.Reset() } }

6. Dynamic HTML Object Model

What is Object ModelThe object model is the mechanism that makes Dynamic HTML programmable. It doesn't require that authors learn new HTML tags, and it doesn't involve any new authoring technologies. In fact, the object model builds on functionality that authors have used for creating content for previous browsers.Dynamic HTML's Document Object Model allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. Combined with the event model, object model allows the browser to react to user input ( such as move mouse over a particular element, press a key ), execute scripts on the fly, and display the new content without downloading additional documents from a server.

Accessing Elements with Script Every HTML element is a scriptable object in the Object Model , with its own set of properties, methods and events. However, to write script for each element object, the author must know how to get to an element. The object model is focused around collections of elements, a hierarchy of groupings that the elements fall into. The most important of these collections are the "all" collection and the "children" collection. A Dynamic HTML document is a structured arrangement of elementsfor instance, in the following document, each element has a scope of influence which depends on where in the document the tags appear.

Accessing Elements with Script

Some text in a paragraph

The DIV contains (and is the parent of) the P tag and the IMG called image1. Conversely, image1 and the P are children of the DIV. The IMG tag called image2, however, is a child of the BODY. And all elements are children of the HTML element.

Accessing Elements with ScriptAll and Children collectionFor each element object, there is an "all" collection which contains all of the elements that are beneath that element in the hierarchy, and a "children" collection which contains only the elements that are direct descendants of that element. In the example above, the B would be in the DIV's all collection, but would not appear in the DIV's children collection. Similarly, the DIV is a member of BODY's children collection, but the P is not. In addition to these collections for each element, the document itself (represented by the document object) has a number of element and non-element collections. The most important is an all collection that contains all of the elements on the Web page. This all collection is the primary way to access elements through script.

EventsClicking a button, moving the mouse over part of the Web page, selecting some text on the pagethese actions all fire events that a DHTML author can write code to run in response to the event. This particular piece of code is generally known as an event handler because that's what it does, handles events. Here is a set of common events that every HTML element generates in Internet Explorer 4.0: Mouse eventKeyboard event

Keyboard EventsKeyboard event:

Keyboard event Generated when the user

onkeypressPresses and releases a key (full down-and-up cycle). However, if a key is held down, multiple onkeypress events will be fired. OnkeydownPresses a key. Only a single event will be fired, even if the key is held down. OnkeyupReleases a key.

window ObjectThe window object is the root of the object hierarchy. All properties in the object model are either accessed as properties of the window object or as properties of those properties. Because the current window object is implied, you do not need to prefix the property with the window keyword. However, many people prefer to use the keyword to ensure that their scripts are as clear and readable as possible. For example: status = "hello";is the same as saying: window.status = "hello"; and both will work when referring to the current window object. Many of the properties of the window object can be used to carry out simple tasks, such as displaying messages, prompting for input, and loading new documents into the window. For example, you can display a simple modal message box from the current window by using the alert method and change the text in Internet Explorer's status bar by using the status property, as in the following example.

window ObjectWindow.html

A Simple Documentfunction doAlert() { window.status = "Page is loaded!"; alert("Page is loaded!");} This is a very short document.

Event Handling: bubbling Event.htm

Welcome!This is a very short document.

function wasClicked() { alert("I was clicked " + window.event.srcElement.tagName);}function wasAlsoClicked() { alert("You clicked me " + window.event.srcElement.tagName);}

window ObjectThere can be more than one window object at a time. For example, the browser creates one window object for each frame defined within a document. From the scripting perspective, the current window object is always the one that contains the document which contains the script. To access window objects other than the current window object, you precede the property with a window reference. The window.open method returns a reference to this new window that is then used in scripts to access properties and methods of the new window.

Document Object Model (DOM)The Dynamic HTML document object model allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. This access, combined with the event model, allows the browser to react to user input,execute scripts on the fly, and display the new content without downloading additional documents from a server. The document object model puts sophisticated interactivity within easy reach of the average HTML author.

Object Model HierarchyWindowlocationframeshistorynavigator (navigation/client information) eventscreendocumentall formsanchorslinksbodyimagesframesselectionstyleSheetsscriptsappletswindow.document.images(0).src="test.gif"document.images(0).src="test.gif"

Window Properties and MethodsPropertiesdocumenthistorylocationnavigatoropener: Reference to the window that opened the current windowselfstatusMethodsalert open: open a new browser windowsettimeoutsetInterval confirmclose

Document ObjectPropertiescookiebgColorparentWindowtitleMethodsclose: close the document and displays contentsopen: open document for write method write: write HTML code to documentwritelnclear

Location, History, and Navigatornavigator.userAgentnavigator.appVersionhistory.backhistory.forwardhistory.go(URL)location.reload

Object.htm

Object.htm

Back to previous page.

window Object

new_window.html

Creating a Window

Open Sample

Open a New Browser Window: openwindow.htm

Open Windows

Keeping Multiple Windows In FocusWhen working with multiple windows, it's important to keep track of which windows are open, and which are in view, so that visitors to your site are able to see the windows that you intend them to see. Creating a reference to each of the windows that you open will allow you to refer to any of those windows from the current page. Then you can use the closed Window property and the focus Window method to keep track of each of your new windows. The closed property returns true if the window object reference is closed, and false if it's not. This is an important property to question, since if you create a reference to a window and then close the window, the reference to the window still exists, and trying to use it will result in an error. The focus method brings the referenced window to the front of all of the windows.

if (!myWindow || myWindow.closed) myWindow = open ("newpage.htm");else myWindow.focus();In the code, we first check to make sure that a window with the reference myWindow doesn't already exist (!myWindow) or if it has been opened, but is now closed (myWindow.closed). If either of these is true, we open a new window with the reference myWindow. If the window already exists, we use the focus method to bring the window into focus so that the user can see it.

Interaction between Two Windows

Openwindow2.htm

Open Windows

Enter your name:

getname.htmGet Name

Enter your name: