timstall: DHTML I: Intro and Positioning Text

Sunday, November 27, 2005

DHTML I: Intro and Positioning Text

[This was originally posted at http://timstall.dotnetdevelopersjournal.com/dhtml_i_intro_and_positioning_text.htm]

HTML is essentially static. However with some JavaScript and CSS, you can make it dynamic - hence DHTML (D is for Dynamic). There are lots of neat things you can do with DHTML. While some of it may just be for "toys", some of it can also enhance the UI for an enterprise app.

Using CSS, you can position your text in several ways. First you can set whether the style refer to an absolute or relative position. You can then specify the left or top. You can also specify the "layer" via the Z index. For example, the following snippet offsets the div tag:

<style>
    .pos1
    {
      z-index: 1;
      left: 100px;
      position:absolute;
      top: 20px;
      background-color:Yellow;
    }
style>
head>
<body MS_POSITIONING="FlowLayout">
    <form id="Form1" method="post" runat="server">
      <div class="pos1">
      Hello World
      div>
     form>
body>

You can use JavaScript to programmatically change the CSS class as whole, or switch a specific style:

document.getElementById('DivPosition').className = 'myNewClass';
document.getElementById('DivPosition').style.left = 10;

The combination of all these things opens up a lot of possibilities. For example, using a JavaScript timer, you could move a div across the page by continually updating the .left property.

The next several posts will dive more into DHTML.

timstall

Sunday, November 27, 2005

DHTML I: Intro and Positioning Text

No comments:

Post a Comment