DHTML Demonstrations Using DOM/Style

  • Revision slug: DHTML_Demonstrations_Using_DOM//Style
  • Revision title: DHTML Demonstrations Using DOM/Style
  • Revision id: 201111
  • Created:
  • Creator: Dria
  • Is current revision? No
  • Comment adding categories

Revision Content

DHTML Demonstrations Using DOM/Style

Mozilla's DOM Sample Project
This page contains a list of DOM samples based on the various DOM features. The list includes demos for DOM Events, DOM Core, DOM HTML and much more.

Animation and Manipulation of Text Elements

Real-time 3D animation
This demonstration shows how to use JavaScript and the DOM to dynamically animate a set of image objects creating a 3d animation effect.


DOM Demonstrations (Requires DOM 1 and 2 compliant web browser)

DOM Style: Clipping and Positioning Elements via JavaScript DOM Interfaces
This demonstration is optimized to work with Mozilla because it uses PNG images with alpha channel. This demonstrates the use of DOM interfaces to set positioning and clip properties of DIV elements.

DOM 1 and DOM 2 Events: Dragging and Resizing Element using DOM
This sample requires a web browser compliant with DOM 1 and DOM 2 Events. It was tested with Netscape 7.x/Mozilla.

DOM 1 and DOM 2: Dynamically Manipulating a Table Element
This demonstration requires a browser that supports DOM 1 and DOM 2 specfication, such as Netscape 7.x or Mozilla. It uses DOM 2 mouse events to provide an interface that can dynamically manipulate table elements.


Cross-Browser Widgets

Windowing API: BrainJar's DHTML Window
BrainJar's DHTML Windows is a widget that demonstrates how to add dynamic DHTML windows to your DHTML application.

Scott Potter's Dynamic Window
Dynamic Window Interface demonstrates a DHTML-based desktop interface with multiple windows support and integration with embedded DHTML applications.

Stock Ticker
Stock Ticker provides a reusable Object that can be adapted to display scrolling stock quotes in any Browser that supports the Standard DOM.


Additional Resources for Learning The DOM

Traversing an HTML Table with JavaScript and DOM Interfaces
An overview of the DOM level 1.0 methods and how to use them via JavaScript. This technote covers the core methods that allows creation and manipulation of markup elements dyncamically via JavaScript.

DOM Central
Learn more about W3C DOM.

Visit GetElementById.com
GetElementById.com has DHTML scripts and tutorials using the W3C DOM. Check out the Zoom Intro demo and other great DOM demonstrations and scripts.

W3C DOM Category at DMOZ.ORG
This category contains technotes, tutorials and many other resources related with JavaScript and the W3C DOM.

Revision Source

<h3 name="DHTML_Demonstrations_Using_DOM.2FStyle"> DHTML Demonstrations Using DOM/Style </h3>
<p><b> Mozilla's DOM Sample Project </b><br>
<a class="external" href="http://cgi.din.or.jp/%7Ehagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html">This page</a> contains a list of DOM samples based on the various DOM features. The list includes demos for DOM Events, DOM Core, DOM HTML and much more.
</p><p><b> Animation and Manipulation of Text Elements </b><br>
</p>
<ul><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/colorfades.html">Color Fades</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/textinterlace.html">Text Interlace Effect</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/fadespacing.html">Fade and Spacing</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/bouncingsmile.html">Animating Text 1</a> - <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/geckowave.html">and 2</a>
</li><li> <a class="external" href="http://www.mozilla.org/docs/dom/samples/dom-css-fonts/credits.html">Scrolling Credits Demo</a> (requires Netscape 7.x/Mozilla)
</li></ul>
<p><b> Real-time 3D animation </b><br>
<a class="external" href="http://www.world-direct.com/mozilla/dhtml/funo/3dcube/index.htm">This demonstration</a> shows how to use JavaScript and the DOM to dynamically animate a set of image objects creating a 3d animation effect.
</p><p><br>
</p>
<h3 name="DOM_Demonstrations_.28Requires_DOM_1_and_2_compliant_web_browser.29"> DOM Demonstrations (Requires DOM 1 and 2 compliant web browser) </h3>
<p><b> DOM Style: Clipping and Positioning Elements via JavaScript DOM Interfaces </b><br>
<a class="external" href="http://www.mozilla.org/docs/dom/samples/can/index.html">This demonstration</a> is optimized to work with Mozilla because it uses PNG images with alpha channel. This demonstrates the use of DOM interfaces to set positioning and clip properties of DIV elements.
</p><p><b> DOM 1 and DOM 2 Events: Dragging and Resizing Element using DOM </b><br>
<a class="external" href="http://www.mozilla.org/docs/dom/samples/resize/index.html">This sample</a> requires a web browser compliant with DOM 1 and DOM 2 Events. It was tested with Netscape 7.x/Mozilla.
</p><p><b> DOM 1 and DOM 2: Dynamically Manipulating a Table Element </b><br>
<a class="external" href="http://www.mozilla.org/docs/dom/samples/dynatable-light/index.html">This demonstration</a> requires a browser that supports DOM 1 and DOM 2 specfication, such as Netscape 7.x or Mozilla. It uses DOM 2 mouse events to provide an interface that can dynamically manipulate table elements.
</p><p><br>
</p>
<h3 name="Cross-Browser_Widgets"> Cross-Browser Widgets </h3>
<p><b> Windowing API: BrainJar's DHTML Window </b><br>
<a class="external" href="http://www.brainjar.com/dhtml/windows/demo.html">BrainJar's DHTML Windows</a> is a widget that demonstrates how to add dynamic DHTML windows to your DHTML application. 
</p><p><b> Scott Potter's Dynamic Window </b><br>
<a class="external" href="http://www.javascript-games.org/indexdyn.html?betaversion">Dynamic Window Interface</a> demonstrates a DHTML-based desktop interface with multiple windows support and integration with embedded DHTML applications.
</p><p><b> Stock Ticker </b><br>
<a href="en/DHTML_Demonstrations_Using_DOM%2f%2fStyle/Stock_Ticker">Stock Ticker</a> provides a reusable Object that can be adapted to display scrolling stock quotes in any Browser that supports the Standard DOM.
</p><p><br>
</p>
<h3 name="Additional_Resources_for_Learning_The_DOM"> Additional Resources for Learning The DOM </h3>
<p><b> Traversing an HTML Table with JavaScript and DOM Interfaces </b><br>
<a class="external" href="http://www.mozilla.org/docs/dom/technote/tn-dom-table/">An overview</a> of the DOM level 1.0 methods and how to use them via JavaScript. This technote covers the core methods that allows creation and manipulation of markup elements dyncamically via JavaScript.
</p><p><b> DOM Central </b><br>
Learn more about <a href="en/DOM">W3C DOM</a>.
</p><p><b> Visit GetElementById.com </b><br>
<a class="external" href="http://getelementbyid.com/">GetElementById.com</a> has DHTML scripts and tutorials using the W3C DOM. Check out the <a class="external" href="http://getelementbyid.com/scripts/index.aspx?CodeID=28">Zoom Intro demo</a> and other great DOM demonstrations and scripts.
</p><p><b> W3C DOM Category at DMOZ.ORG </b><br>
<a class="external" href="http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/">This category</a> contains technotes, tutorials and many other resources related with JavaScript and the W3C DOM.
</p>
Revert to this revision