The World’s Leading Microsoft .NET Magazine
Sign-In | Register
   
 
timstall

Donate Today!

Search Box

 

Calendar

««Sep 2008»»
SMTWTFS
 
1
2
3
456
78910111213
14151617181920
21222324252627
282930

My RSS Feeds








Mailing List

Most Popular Tags

                                                           

DHTML I: Intro and Positioning Text

« H E ASP.Net :: email
posted Monday, 28 November 2005

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.

links: digg this    technorati    


comments (2)


1. madhu left...
Thursday, 20 April 2006 5:41 am

very good !


2. Vinay left...
Wednesday, 30 May 2007 2:00 am

Very good points. If we have cons of divs, it would be even good.