DHTML Demonstrations Using DOM/Style

  • Revision slug: DHTML_Demonstrations_Using_DOM//Style
  • Revision title: DHTML Demonstrations Using DOM/Style
  • Revision id: 201067
  • Created:
  • Creator: Anonymous
  • Is current revision? No
  • Comment /* Real-time 3D animation */

Revision Content

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.

Revision Source

<h4 name="Mozilla.27s_DOM_Sample_Project"> Mozilla's DOM Sample Project </h4>
<p><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>
<h4 name="Animation_and_Manipulation_of_Text_Elements"> Animation and Manipulation of Text Elements </h4>
<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>
<h4 name="Real-time_3D_animation"> Real-time 3D animation </h4>
<p><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>
<h3 name="DOM_Demonstrations_.28Requires_DOM_1_and_2_compliant_web_browser.29"> DOM Demonstrations (Requires DOM 1 and 2 compliant web browser) </h3>
<h4 name="DOM_Style:_Clipping_and_Positioning_Elements_via_JavaScript_DOM_Interfaces"> DOM Style: Clipping and Positioning Elements via JavaScript DOM Interfaces </h4>
<p><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>
<h4 name="DOM_1_and_DOM_2_Events:_Dragging_and_Resizing_Element_using_DOM"> DOM 1 and DOM 2 Events: Dragging and Resizing Element using DOM </h4>
<p><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>
<h4 name="DOM_1_and_DOM_2:_Dynamically_Manipulating_a_Table_Element"> DOM 1 and DOM 2: Dynamically Manipulating a Table Element </h4>
<p><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>
Revert to this revision