DHTML stands for Dynamic HTML.
Dynamic HTML, a combination of HTML enhancements, scripting language and interface that are used to deliver animations, interactions and dynamic updating on web pages. The two major elements are the ECMAScript language and the DOM object model. ECMAScript is a derivative of JavaScript, and DOMis an interface that presents the HTML document to the programmer as an object model for ease in updating.
DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML is a “marketing term” – used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support. DHTML is a combination of technologies used to create dynamic Web sites.
Staying on the cutting edge of web design is a hard but important thing to do. One of the buzzwords around the net is DHTML and DOM. No doubt you may have wondered exactly what in the world they are. DHTML, Dynamic HTML, allows you to alter the display of your page after it has loaded.
You must’ve seen neat DHTML effects at numerous sites on the net. And if you’ve ever looked at some code there, you may have given up on ever coding DHTML. However, don’t give in just yet. DHTML is really fun and easy. In fact, it is merely a combination of a scripting language, CSS (Cascading Style Sheets), and HTML.
Why we need DHTML?
Straightforward text is too dull for the mass-market of the Internet, and we need more complex and interesting structures to display an ever-increasing amount of data. So HTML was born.
DHTML stands for Dynamic HTML. Dynamic HTML, a combination of HTML enhancements, scripting language and interface that are used to deliver animations, interactions and dynamic updating on web pages. The two major elements are the ECMAScript language and the DOM object model. ECMAScript is a derivative of JavaScript, and DOMis an interface that presents the …
The DOM is the Document Object Model. The BOM is the Browser Object Model. The DOM is nested inside the BOM. This may not make any sense, so let’s look at what it means. Imagine a normal HTML document. It has a title, maybe some styles, some script, and a body. In the body, there are …
Working with HTML DOM (Document Object Model) In DHTML Read More »
DOM Collections As we know, the DOM stores the objects of a document and information relevant to these objects, and allows JavaScript to access the information and alter it. Changing the DOM changes the displayed page. Individual named elements can be identified in the DOM structure readily. But we might have several instances of a …
As the Internet gained popularity, HTML became increasing weakened. People started demanding more and more features, and this caused the creation of DHTML. It also created CSS, or Cascading Style Sheets. Styles allow us to separate the content of the HTML page from its presentation. DHTML makes very good use of styles – we can …
One interesting DHTML feature in IE5+ that never quite made it into the spotlight is Dynamic Properties. By their very nature, properties defined in HTML are static, non changing (ie: “). Dynamic Properties allows you to substitute static values in HTML with a dynamic expression instead, so instead of “300”, it could be “half the …
The Object Model in Overview The browser object model can be thought of as physically part of the software that forms the browser, while Dynamic HTML is (in theory at least) a universal browser-independent document definition language. This means that all browsers which host Dynamic HTML must provide the same object model. Otherwise, it would …
As with the DOM, we can read/write various parts of the BOM. The status line at the base of a browser screen can be read or written to using the window.status property. If the status line is left unattended, the defaultStatus property is displayed. <HTML> <HEAD> <TITLE>Status Demo</TITLE> </HEAD> <BODY onload=”defaultStatus=’Welcome to eBiz.com Pvt Ltd’;”> …
Frames proved to be a valuable extension to the HTML language, allowing multiple documents to be displayed in a single browser. With DHTML, frames become even more powerful, with the ability to read and write across frames. This is achieved by the usual referencing of elements, but we need to ensure that we ‘travel’ …
The window object also has child objects, which contain related information about the browser. Commonly-used child objects include: • Navigator • History • Location The navigator object This object holds all the information about the type of browser and system the user is using. The navigator object has read-only properties. <HTML> …
The entire DHTML language is fairly substantial. It contains keywords for all sorts of things – dynamic event handling, text substitution, dynamic element creation, and so on. A discussion of these is beyond the scope of this tutorial, but there are a few features that we can explore. An Example of innerHTML: …
Document Object Model The Document Object Model has been around since browsers support JavaScript. From Netscape 2 onwards, web programmers wanted to access bits of HTML and change its properties. For instance, when you write a mouseover script you want to go to a certain image on the page and change its src property. …
We can access an element (e.g., a layer) by it’s ID with document.getElementById(ID). We can also access element nodes with document.getElementsByTagName(tagName). That returns an array of elements with that tagName. Example: document.getElementsByTagName(“TD”).item(0) In the example, we grab the first table cell (<td> tag) in the document. To get an array of all tags …
“Events are the heart of any JavaScript application. Events are used to add interactivity to the page. Without events interactivity can not be imagined.” The Web is an ever evolving environment, and Web pages themselves are steadily blooming from static displays of data to interactive applications. “Dynamic HTML” is an umbrella term encompassing several …
Some o the frequently used events are onLoad and onunload. Onload event occurs when the current page (including all of its images) finishes loading from the server. The onLoad event is related to the document object, and to define it you use an event handler in the tag. For example, the following is a tag …
One of the most common uses for an event handler is to display a message on the status line when the user moves the mouse over a link. For example, moving the mouse over the Order Form link might display a message like “Order a product or check an order’s status” on the status line. …
OnClick Event In DHTML You may be well ahead of me here, but I’ll say it anyway: OnClick works exactly like onMouseOverexcept onClick creates the effect when you click on the active text or image. Here’s the alert method example from above using onClick: <A HREF=”http://csitquestions.com” onClick=”javascript:alert(‘Hello out there!’);” target=”_blank”>csitquestion PVT LTD</A> And here’s what …
Rollover Menu In DHTML The source Code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title> Rollover Menu </title> <meta name=”generator” content=”editplus” /> <meta name=”author” content=”” /> <meta name=”keywords” content=”” /> <meta name=”description” content=”” /> <style type=”text/css”> #ebizmenu{ width: 180px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: …
Source code: <html> <head> <TITLE>[Right Click Disabled]</TITLE> <script type=”text/javascript”> function disable() { if (event.button == 2) { alert(“Right Click not Allowed”) } } </script> </head> <body onmousedown=”disable()”> <p>Right Click not allowed on the page.</p> <p>…..</p> </body> </html> Preview of the example on IE. Preview on Apple Safari.