DHTML Notes Page 1

1. CSS
   • Element Positioning Attributes

     Property	Values	Description
     Position	Absolute Relative
     Visibility	Visible Hidden
     Z-Index	Z-Index(1) Z-Index(n)	Places elements behind

   • Element Filtering Attributes
     Some Filter Properties only work with BackGround-Color:Transparent
     Some Filter Properties only wotk with Width:100%

     Property	Argument	Description	Example
     Alpha	Opacity FinishOpacity Style StartX StartY FinishX FinishY	Sets Element Opacity	Filter:Alpha(Opacity = 20, Style = 1)
     Blur	Add Direction Strength	Makes Element Blurry	Filter:Blur(Add = True, Direction = 90, Strength = 6 before after
     Chroma	Color	Makes Specified Color Transparent	Filter:Chroma(Color = "Blue")
     FlipH	None	Flips Element Horizonally	Filter:FlipH
     FlipV	None	Flips Vertically	Filter:FlipV
     Glow	Color Strength	Makes Element Glow	Filter:Glow(Color = "Blue" Strength = 5)
     Gray	None	Sets Element to B&W	Filter:Gray
     Invert	None	Reverses Color & Brightness	Filter:Invert
     Mask	Color	Renders the element to a color	Filter:Mask(Color = "ColorName")
     Shadow	Color Direction	Sets a shadow	Filter:Shadow(Color = "#ff0000 direction = 90)
     DropShadow	Color OffX OffY Positive	Renders with a DropShadow	Filter:DropShadow(Color = #ff0000 OffX = 5,OffY = 5,Positive = True)
     Wave	Add Freq LightStrength Phase Strength	Renders the element like a wave	Filter:Wave(Add = True,Freq=1, LightStrength=3,Phase=0,Strength=5)
     Xray	None	Renders the element in XRay	Filter:XRay;

2. The Document Object Model Events

   Event	Occurs When
   OnAbort	User Aborts Page Loading
   OnBlue	User Leaves an Object
   OnChange	User Changes an Object's Value
   OnClick	User Clicks an Object
   OnDblClick	User Double Clicks an Object
   OnFocus	User Makes an Object Active
   OnKeyDown	Key has gone down
   OnKeyPress	Keypress
   OnKeyUp	Key is released
   OnLoad	Page gets loaded
   OnMouseDown	User presses mouse
   OnMouseMove	Cursor moves on an object
   OnMouseOver	Cursor Moves over an object
   OnMouseOut	Cursor moves off an object
   OnMouseUp	Mouse button released
   OnReset	User Resets a form
   OnSelect	User selects content on a page
   OnSubmit	User submits a form
   OnUnLoad	Page is closed

3. The Document Object Model
   1. The DOM Window Object
      The Top Object

      • Properties

        Property	Description
        ClientInformation	Returns Navigator Object
        closed	Boolean if Window is Closed
        Complete	Boolean if Windows is Loaded
        DataTransfer	Returns predefined ClipBoard formats used to transfer data
        DefaultStatus	Sets/Returns Default Status Bar Message
        DialogArguments	Sets/Returns Arguments in dialogs Created with ShowModalDialog() or ShowModlessDialog()
        Dialog Height	Sets/Returns Height of a Dialog
        Dialog Left	Sets/Returns Left Coord of a Dialog
        DialogTop	Sets/Returns Top Coord of a Dialog
        DialogWidth	Sets/Returns Width of a Dialog
        Document	Returns the Document Object
        Event	Returns the Event Object
        External	Returns External Host
        History	Returns previously visited URL's
        Length	Returns Number of Frames in a Window
        Location	Returns the Current URL
        Name	Sets/Returns Window Name
        Navigator	Returns a Navigator Object
        OffScreenBuffering	Indicates if Objects are OffScreen Before being displayed
        Opener	Sets/Returns Object
        Parent	Returns the Parent Object of The current frame
        ReturnValue	Sets/Returns the return value from a dialog
        Screen	Returns an object containing User's screen information
        ScreenLeft	Returns Left Coordinate of the user's screen
        ScreenTop	Returns Top Coordinate
        Self	Returns Current Window Object
        Status	Set/Returns Message in Status Bar
        Top	Returns the TopMost window object

      • Methods

        Method	Description
        Alert()	Displays an Alert Box
        AttachEvent()	Attaches the function To an event
        Blur	window loses focus
        ClearInterval()	Clears the SetInterval() Method
        ClearTimeOut()	Clears the TimeOut() Method
        Close()	Closes the window
        Confirm()	Displays a confirm dialog
        DetachEvent()	Detaches a function from an event
        ExecScript()	Executes a Script
        Focus()	Sets focus on a specified window
        MoveBy()	Moves the window relative to current
        MoveTo	Moves the window to a position
        Navigate()	goes to specified URL
        Open()	Opens a new window
        Print()	Prints the windows document
        Prompt()	Displays a prompt dialog
        ResizeBy()	Resizes the window by the specified X and Y OffSets
        ScollBy()	Scrolls from the current position
        ScrollTo()	Scrolls To a specified position
        SetInterval()	An expression is evaluated After a specified time interval has passed
        SetTimeOut()	An expression is evaluated After a specified timeout has occurred
        ShowHelp()	Displays a specified Help file
        ShowModalDialog()	Displays a modal dialog box containing a specified HTML page
        ShowModlessDialog()	Displays a Modless dialog containing a specified HTML page

      The DOM Navigator Object

      Information about the User's Browser

      • Properties

        Property	Description
        AppCodeName	Code Name of the Browser
        AppMinorVersion	Minor Version of The Browser
        AppName	Name of the Browser
        AppVersion	Brower Platform & Verison
        BrowserLanguage	User's Browser's Language
        CookieEnabled	Returns whether Cookie's enabled
        CPUClass	String Indicating CPU Class of Browser
        OnLine	Returns Whether the system is online
        Platform	Returns the platform of the browser
        SystemLanguage	Returns the default language for the browser
        UserAgent	Returns the HTTP User-Agent
        UserLanguage	Returns the current User Language

      The DOM Event Object

      Information about what occurs

      • Properties

        Property	Description
        AltKey	Returns whether the alt key was pressed
        Button	Returns which mouse button is pressed
        CancelBubble	Sets/Returns if the current should bubble up the hierarchy
        ClientX	Returns the X coord of the cursor
        ClientY	Returns the Y coord of the cursor
        CtrlKey	Returns if the Ctrl Key was pressed
        DataFld	Returns the data column affected by the OnCellChange event
        FromElement	Returns the Object the cursor is exiting
        KeyCode	Sets/Returns the Unicode of the pressed key
        OffSetX	Returns the Horizontal coord of the cursor
        OffSetY	Returns the Vertical coord of the cursor
        PropertyName	Returns the Name of the property that has been changed
        Reason	Returns the reason for completion for a data source object
        RecordSet	Returns a recordSet
        Repeat	Returns whether an event is to be repeated
        ReturnValue	Sets/Returns the value returned from an event
        ScreenX	Returns the X coord of the cursor relative to the screen
        ScreenY	Returns the Y coord of the cursor relative to the screen
        ShiftKey	Returns if the shift key was pressed
        SrcElement	Returns the object that fired the event
        SrcFilter	Returns the filter object that fired the OnFilterChange event
        SrcUrn	Returns the URN of the behavior that fired the event
        ToElement	Returns the Object the user moves to
        Type	Returns the Name of the Event Type
        X	Returns the Cursor's X coord
        Y	Returns the Cursor's Y coord

      • Collections

        Collection	Description
        BookMarks	Collection of MSADO bookmarks connected to the rows affected by the events
        BoundElements	Collection of all elements on a page bound to a data test(set?)

      The DOM Collection Object

      Collection of Elements

      • Properties

        Property	Description
        Length	Returns the number of specified elements in a collection

      • Methods

        Method	Description
        Item(Index)	Returns the indexed item as a node
        NamedItem(Name)	Returns the Named Item as a Node

      The DOM Document Object

      • Properties

        Property	Description
        Anchors	Returns a collection of all anchor elements in a document
        Applets	Returns a collection of all object elements in an applet
        Body	Returns the Body or FrameSet Element
        Cookie	Returns the Cookies for the Docment
        Domain	Returns the domain name of the document's server
        Forms	Returns a collection of all the Form Elements
        Images	Returns a collection of all the Images
        Links	Returns all the Anchor Elements with the Href Attribute specified
        Referrer	Returns the URL of the previous page
        Title	Sets/Returns the Document's Title
        URL	Returns the Document's URL

      • Methods

        Method	Description
        Close()	Closes a document opened with Document.Open()
        GetElementById(ID)	Returns the Element with the Specified Id
        GetElementByName(Name)	Returns a Collection of all elements with a specified Name
        Open()	Opens a new document
        Write(Text)	Writes Text to a document
        WriteLn(Text)	Writes a line of text to a document

      The DOM Form Object

      • Properties

        Property	Description
        AcceptCharSet	Returns List of Accepted Character Sets
        Action	Sets/Returns the Action Handler of the Form
        Elements	Collection of all Form Elements
        Enctype	Returns the Content Type of the Submitted Form
        Length	Number of Elements in a Form
        Method	Sets/Returns the HTTP Method for Submitting a Form
        Name	Sets/Returns the Form Name
        Target	Sets the Frame to Submit the Form To

      • Methods

        Method	Description
        Reset()	Resets all the Values of the Input Fields on a Form
        Submit()	Submits the Form

      The DOM Input Objects

      • Properties

        Property	Description
        AccessKey	Specifies a Key to Acces the Input Element
        Accept	Specifies a list of content types a server will handle successfully
        Align	Sets the Alignment of the Input Element
        Alt	Sets/Returns Alternate Text of the Input Element
        Checked	Sets/Returns Boolean indicating checked
        DefaultValue	Sets/Returns the Input Element's default value
        DefaultChecked	Sets/Returns the Default value for an Input Element
        Disabled	Sets/Returns Boolean Indicating Disabled
        Form	returns the Form Element to the Input Element
        MaxLength	Sets/Returns the Max Length
        Name	Sets/Returns the Name
        ReadOnly	Sets/Returns Boolean Indiating ReadOnly Input Element
        Size	Sets/Returns the Size of a Text Element
        Src	Sets/Returns the URL of an Image on a Submit Button (for type = "image")
        TabIndex	Sets/Returns the Tab Index of the Element
        Type	Returns the Type of Element
        UseMap
        Value	Sets/Returns the value of Radio's & CheckBoxes

      • Methods

        Method	Description
        Blur()	Element Loses Focus
        Focus()	Element gets Focus
        Select()	Element is Selected
        Click	Makes a mouse click for Button Checkbox Radio Reset Submit

      The DOM Select Object

      • Properties

        Property	Description
        Disabled	Sets/Returns the Disabled Property
        Form	Returns the Form element to the Select Element
        Length	Returns the Number of Option Elements
        Multiple	Sets/Returns Whether Multiple Select Options are allowed
        SelectedIndex	Returns the Selected Option Element as a Number
        Size	Sets/Returns the Number of Visible Options
        TabIndex	Sets/Returns the Select Elements Tab Position
        Type	Returns the Type of the Select Element
        Value

      • Methods

        Method	Description
        Add(OptionInsertBefore)	Adds a New Option to the Option Collection
        Remove(Index)	Removes an Option from the Collection
        Blur()	Element Loses focus
        Focus()	Element Gains Focus

      The DOM Option Object

      • Properties

        Property	Description
        DefaultSelected	Sets the Option to be selected as default
        Disabled	Sets/Returns Boolean indicating disabled
        Form	Returns the Form Element that contains the Option
        Index	Index position of the Option
        Label	Sets/Returns the Option's Label
        Selected	Sets this option to be selected
        Text	Returns the text for this Option
        Value	Sets/Returns the Value of the Option

      The DOM TextArea Object

      • Properties

        Property	Description
        Access Key	Specifies a Keyboard Key to Access the TextArea
        Cols	Sets/Returns the Width of the TextArea in Characters
        DefaultValue	Sets/Returns the Default Value
        Disabled	Sets/Returns Disabled
        Form	Returns the Form Element to the TextArea
        Name	Sets/Returns TextArea's Name
        ReadOnly	Sets/Returns ReadOnly
        Rows	Sets/Returns Height of the TextArea in Rows
        TabIndex
        Type	Returns the Type of the TextArea
        Value	Sets/Returns the Value

      • Methods

        Method	Description
        Blur()	Lose Focus
        Focus()	Get Focus
        Select()	Selects the Content of the TextArea

      The DOM Table Object

      • Properties

        Property	Description
        Border	Sets/Returns the Width of the Table Border
        Caption	Sets/Returns the Table Caption
        CellPadding	Sets/Returns the Space Between the Cell Border And the Cell Content
        CellSpacing	Sets/Returns the Space Between Cells
        Frame	Specifies Which Borders to render
        Rows	Returns All Rows in a Table
        Rules	Specifies Which Borders to Render
        Summary	Sets/Returns a Table Description
        TBodies	Sets/Returns All the TBody Elements
        TFoot	Returns the TFoot Element
        THead	Returns the THead Element
        Width	Sets/Returns the Table Width

      • Methods

        Method	Description
        CreateCaption()	Creates/Returns Table Caption
        CreateTFoot()	Creates/Returns Table Footer
        CreateTHead()	Creates/Returns Table Header
        DeleteCaption()	Deletes the Caption
        DeleteTFoot()
        DeleteTHead()
        DeleteRow(Index)	Deletes Indexed Row
        InsertRow(Index)	Inserts a Row at the Index

      The DOM TableRow Object

      • Properties

        Property	Description
        Align	Sets Horizontal Cell Alignment
        Cells	Returns All the Cells in a Row
        Ch
        ChOff
        RowIndex	Returns the Index of a Row Relative to the Table
        SectionRowIndex	Returns the Index of a Row Relative to the Current Section THEAD, TFOOT or TBODY
        VAlign	Sets the Vertical Alignment of a Cell's Contents

      • Methods

        DeleteCell(Index)	Deletes a Cell
        InsertCell(Index)	Inserts a Cell

      The DOM TableCell Object

      • Properties

        Property	Description
        Abbr	Sets/Returns an Abbreviation for Header Cells
        Align	Sets the Horizontal Alignment
        Axis	Sets/Returns the Name of a Group of Headers
        CellIndex	Returns the Index for a Cell
        Ch	ChOff
        ColSpan	Sets/Returns the ColumnSpan for a Cell
        Headers	Returns a list of the Id Attribute's Value for Header Cells
        RowSpan	Sets/Returns the RowSpan for a Cell
        Scope
        VAlign	Sets the Vetical Alignment

      The DOM Anchor Object

      • Properties

        Property	Description
        AccessKey	Defines a KeyBoard Key to Access the Anchor
        CharSet	Sets/Returns the Character Set to use With the Linked Resource
        Coords	Sets/Returns the Coordinates of the Anchor
        Href	Sets/Returns URL of the Linked Resource
        HrefLang	Sets/Returns the Language Code to use with the Linked Resource
        Name	Sets/Returns the Anchor Name
        Rel	Defines the LInk relationship from the Current document to the Linked Resource
        Rev	Defines the LInk relationship from the Linked document to the Current Document
        Shape	Sets/Returns the Shape of the Anchor
        TabIndex
        Target	Sets/Returns Where to Open the Linked Resource
        Type	Sets/Returns the Content Type of the Linked Resource

      • Methods

        Method	Description
        Blur()	Lose Focus
        Focus()	Get Focus

      The DOM Image Object

      • Properties

        Property	Description
        Alt	Sets/Returns Alternate Text
        Height	Sets/Returns Image Height
        IsMap	Sets the Image to be a Server-Side Image Map
        LongDesc	Sets/Returns a URL for a Long Description of the Image
        LowSrc	Sets/Returns a URL of the Image for Clients with Low Resolution
        Src	Sets/Returns the URL of the Image
        UseMap	Sets the Image to be a Client-Side Image Map
        Width	Sets the Image's Width

      The DOM FrameSet Object

      • Properties

        Property	Description
        Cols	Sets/Returns Number of Columns in the FrameSet
        Rows	Sets/Returns Number of Rows in the FrameSet

      Frame

      • Properties

        Property	Description
        FrameBorder	Returns the Frame Border
        Height	Sets/Returns the Frame Height
        LongDesc	Sets/Returns the URL containing Frame's Long Description
        MarginHeight	Sets/Returns Frame's Margin Height
        MarginWidth	Sets/Returns Frame's Margin Width
        Name	Sets/Returns Frame's Name
        Scrolling	Enables/Disables Scroll Bar For Frame
        Src	Sets/Returns the URI of the Frame Content

      IFrame

      • Properties

        Property	Description
        FrameBorder	Returns the IFrame Border
        Height	Sets/Returns IFrame's Height
        LongDesc	Sets/Returns the URI containing the IFrame's Long Description
        MarginHeight	Sets/Returns IFrame's Margin Height
        MarginWidth	Sets/Returns IFrame's Margin Width
        Name	Sets/Returns IFrame's Name
        Scrolling	Enables/Disables Scroll Bar on IFrame
        Src	Sets/Returns URI of the IFrame's Content