Introduction to DHTML
What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized code modules Can be written in VB(script)
What is DHTML? Dynamic Hypertext Markup Language is comprised of: – CSS (cascading style sheets) – DOM (document object module) – Scripting (Javascript and VBscript) Allows for more interactivity and special effects on web pages.
Document Object Model (DOM)
DOM is an interface that permits scripts to access and update the content, structure and style of the document. Every element of the web page can be dynamically updated in response to input from the user or other programs HTML elements are treated as objects, their attributes are treated as properties of the objects The DOM has a hierarchy of elements with the window as the top level object
Dynamic HTML:Object Model and Collections The object model allows Web authors to control the presentation of their pages and gives them access to all the elements on their Web pages
Object Referencing Simplest way to reference an element is by using element’s id attributes Example: function start() { alert(pText.innerText); pText.innerText=“Thanks for coming”; } Welcome to our Web page!
Collections all and children Collections are arrays of related objects on a page. The all collection is collection (or array) of all the XHTML elements in a document, in the order in which they appear. function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += " " + document.all[ loop ].tagName; pText.innerHTML += elements; alert( elements ); } Elements on this Web page:
Collections all and children var elements = " "; function child( object ) { var loop = 0; elements += " " + object.tagName + " "; for ( loop = 0; loop < object.children.length; loop++ ) { if ( object.children[ loo<p ].children.length ) child( object.children[ loop ] ); else elements += " " + object.children[ loop ].tagName + " "; } elements += " " + " "; } <body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += ' ';"> Welcome to our Web page! Elements on this Web page:
Dynamic Styles An element’s style can be changed dynamically. Often such a change is made in response to user events. function start() { var inputColor = prompt("Enter a color name for the " + "background of this page", "" ); document.body.style.backgroundColor = inputColor; } Welcome to our Web site!
Dynamic Styles function start() { var inputClass = prompt( "Enter a className for the text “ +, "" ); pText.className = inputClass; } Welcome to our Web site!
Dynamic Positioning Dynamic Positioning enables XHTML elements to be positioned with scripting. This is done by declaring an element’s CSS position property to be either absolute or relative. Moving the element by manipulating any of the top, left, right or bottom CSS properties. We use scripting to vary the color, fontFamily or fontSize attributes.
Dynamic Positioning:Example function start() { window.setInterval( "run()", 100 ); } <p id = "pText" style = "position: absolute; left: 0; font-family: serif; color: blue"> Welcome! A similar function to setInterval is setTimeout, which takes same parameters but instead waits the specified amount of time before calling the named function only once
Dynamic Positioning:Example The clearTimeout and clearInterval functions are used to stop setTimeout and setInterval respectively For example, if you started a setTimeout timer with timer1=window.setInterval(‘run()”,200); you could then stop the timer by calling window.clearTimeout(timer1); Which would stop the timer before it fired
frames collection frames collection is useful to access those elements and objects are in different frames function start() { var text = prompt( "What is your name?", "" ); parent.frames( "lower" ).document.write( " Hello, " + text + " " ); }
navigator Object navigator object contains information about the Web browser that is viewing the page This is useful to redirecting from one browser to another browser function start() { if ( navigator.appName == "Microsoft Internet Explorer" ) { if ( navigator.appVersion.substring( 0, 1 ) >= "4" ) document.location = "newIEversion.html"; else document.location = "oldIEversion.html"; } else document.location = "NSversion.html“; }
Dynamic HTML: Event model Clicking a button, moving the mouse pointer over part of the Web page, selecting some text on the page—these actions all fire events, and a DHTML author can write code to run in response to the event.
Event onclick and onload Event onclick Click on this text! <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" />
Event onclick and onload Event onload function start () { alert(“Welcome to Nirma University”); }
Error Handling with onerror onerror event is used to execute specialized error-handling code window.onerror = handleError; function doThis() { alrrt( "hi" ); // alert misspelled, creates an error } function handleError( errType, errURL, errLineNum ) { window.status = "Error: " + errType + " on line " + errLineNum; return true; } <input id = "mybutton" type = "button" value = "Click Me!" onclick = "doThis()" /> This program works correctly only if “Script debugging” is disabled in IE. Tools menu->Internet Option dialog->Advanced tab->Disabled script debugging
Tracking the Mouse with Event onmousemove Event onmousemove fires repeatedly whenever the user moves the mouse over the web page. The following program uses this event to updates a coordinate display that gives the position of the mouse in the coordinate system of the object containing the mouse cursor
Tracking the Mouse with Event onmousemove function updateMouseCoordinates() { coordinates.innerText = event.srcElement.tagName + " (" + event.clientX + ", " + event.clientY + ")"; } (0, 0) <img src = "deitel.gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" />
Rollovers with onmouseover and onmouseout When the mouse cursor move over an element, an onmouseover event occurs for that element When the mouse cursor leaves the element, an onmouseout event occurs for that element <a href=" onmouseover="document.logo.src='malaram.jpg' " onmouseout ="document.logo.src='harry.gif ' " >
Form Processing with onfocus and onblur The onfocus event fires when an element gains focus. The onblur event fires when an element loses focus. var helpArray = [ "Enter your name in this input box.“, "Enter your address in this input box, “]; function helpText( messageNum ) { myForm.helpBox.value = helpArray[ messageNum ]; } Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /> <input type = "text" name = " " onfocus = "helpText(1)" onblur = "helpText(6)" /> </form
More Form Processing with onsubmit and onreset These two events fire when a form is submitted or reset, respectively. function formSubmit() { window.event.returnValue = false; if ( confirm ( "Are you sure you want to submit?" ) ) window.event.returnValue = true; } function formReset() { window.event.returnValue = false; if ( confirm( "Are you sure you want to reset?" ) ) window.event.returnValue = true; } <form id = "myForm" onsubmit = "formSubmit()" onreset = "formReset()" action = "">
Event Bubbling Event bubbling is the process whereby events fired in child elements “bubble” up to their parent element. function documentClick() { alert( "You clicked in the document" ); } function paragraphClick( value ) { alert( "You clicked the text" ); if ( value ) event.cancelBubble = true; } document.onclick = documentClick; Click here! Click here, too!
Dynamic HTML: Filters and Transitions Filters and transitions are specified with the CSS filter property. Applying filters to text and images causes changes that are persistent. Transitions are temporary; applying a transition allow to transfer from one page to another with pleasant visual effect, such as a random dissolve. Filters and transitions do not add content to your pages-rather, they present existing content in an engaging manner to capture the user’s attention. Filters and transitions are Microsoft technologies available only in Windows-based versions of IE6. Do not use these capabilities if you are writing other browsers
Flip Filters: flipv and fliph The flipv and fliph filters mirror text or images vertically and horizontally. Text Text
Flip Filters: flipv and fliph
Transparency with the chroma filter The chroma filter applies transparency effects dynamically, without using a graphics editor to hard-code transparency into the image. function changecolor( theColor ) { if ( theColor ) { chromaImg.filters( "chroma" ).color = theColor; chromaImg.filters( "chroma" ).enabled = true; } else chromaImg.filters( "chroma" ).enabled = false; } <img id = "chromaImg" src = "trans.gif" style ="position: absolute; filter: chroma" alt = "Transparent Image" />
Transparency with the chroma filter None Cyan Yellow Magenta Black
Transparency with the chroma filter
Creating Image masks Applying the mask filter to an image allows you to create an effect in which an element’s background is a solid color and its foreground is transparent, so the image or color behind it show through. Mask Filter AaBbCcDdEeFfGgHhIiJj KkLlMmNnOoPpQqRrSsTt <img src = "gradient.gif" width = "400" height = "200" alt = "Image with Gradient Effect" />
Creating Image masks
Image Filters: invert, gray and xray
Image Filters: invert, gray and xray
Adding shadows to Text A simple filter that adds depth to your text is the shadow filter. This filter creates a shadowing effect that gives your text a three- dimensional appearance. var shadowDirection = 0; function start() { window.setInterval( "runDemo()", 500 ); } function runDemo() { shadowText.innerText = "Shadow Direction: " + shadowDirection % 360; shadowText.filters( "shadow" ).direction = ( shadowDirection % 360 ); shadowDirection += 45; }
Adding shadows to Text <h1 id = "shadowText" style = "position: absolute; top: 25; left: 25; padding: 10; filter: shadow( direction = 0, color = red )">Shadow Direction: 0
Creating Gradient with alpha This filter is used to achieve gradient effect function run() { pic.filters( "alpha" ).opacity = opacityButton.value; pic.filters( "alpha" ).finishopacity = opacityButton2.value; pic.filters( "alpha" ).style = styleSelect.value; } <div id = "pic“ style = "position: absolute; left:0; top: 0;filter: alpha( style = 2, opacity = 100, finishopacity = 0 )"> Opacity: Color saturation of an image.
Creating Gradient with alpha
Making Text glow This filter is used to make text glow. var colorArray = [ "FF0000", "FFFF00", "00FF00“,"00FFFF", "0000FF", "FF00FF" ]; function apply() { glowSpan.filters( "glow" ).color = parseInt( glowColor.value, 16 ); glowSpan.filters( "glow" ).strength = glowStrength.value; } function startdemo() { window.setInterval( "rundemo()", 150 ); } <span id = "glowSpan" style = "position: absolute;left: 200;top: 100; padding: 5; filter: glow( color = red, strength = 5 ); font-size: 2em“>Glowing Text
Making Text glow
Creating Motion with blur The blur filter creates an illusion of motion by blurring text or image in a certain direction.