November 21, 2009

Hot Topics:

So, You Want DHTML, Huh?

March 1, 2000
By Joe Burns

Use these to jump around or read it all...

[What Is DHTML?] [An Example Of DHTML]
[How Do You Get It To Work?]
[The Script] [Get The Images] [The Playing Field]
[Line One -- The Page Division]
[The Images] [Additional DHTML Examples]
[Where From Here?]

On January 1st, 1998, I went to my handy dandy little counting program to see how many people had stopped by my site. I rolled through the numbers until I got to the last little block of statistics. Those are the percentages of browsers coming to the site. Netscape had ruled the roost for the entire run of HTML Goodies until that day.

Microsoft Internet Explorer: 52%

Earlier in December of 1997, CNN Interactive listed the top ten most popular future Internet items. Microsoft's Explorer 4.0's Dynamic HTML led the pack. Of course, to be really cool, you refer to it as DHTML.

I've also been told to be really, really cool, you can no longer say WWW. You must now proclaim Tri-W.

What Is DHTML?

It's actually a little tough to get a handle on because it's beginning to mean different things to a few different people. The actual term stands for Dynamic Hypertext Mark-Up Language. That's obvious.

The essence of the term stands for almost any coding that creates movement or interactivity by employing the standards of the 4.0 level Netscape and MSIE browsers.

But there was movement before with animation and interactivity with forms...

Yeah, see... that's the rub. For something to be considered DHTML it has to employ version 4.0 browsers. Again, an argument I've heard is that DHTML is only viable if it occurs within the Explorer 4.0 browser. I've heard DHTML discussed as being PowerPoint for the Web.
On the other hand, some people have stated that DHTML includes Netscape's Layering Commands.

The best description I can offer is that DHTML is any combination of Style Sheets ( So, You Want Cascading Style Sheets, Huh? ), JavaScript ( The JavaScript Primers ), Layering, Positioning ( So, You Want Positioning, Huh? ), and Page Division (see the So, You Want Positioning, Huh? tutorial for more on this), at the 4.0 browser level, intended to create movement or user interactivity.

Okay, so it's not the "future of the Internet" public-relations-driven description given on the Microsoft DHTML Web page, but it's probably pretty close.

An Example of DHTML

You learn by doing, so let's take a look at DHTML in action. Remember back in primary school when you were given three pegs, round, square, and triangle, and you were told to put them in the correct holes on a peg board? If you did it right, you were off to Harvard. Mess it up, and no warm milk at nap time. This is that same test in DHTML. You'll have to be running MSIE 4.0 at this point.

Go Take the Test

Now that's pretty slick. With a little thinking time, you can see the applications. Make a plan for your office, landscape a plan for your yard, a Virtual Mr. Potato Head for kids, etc., etc.

How Do You Get It To Work?

Okay, let's tear it apart. This is a combination of a simple JavaScript (I was lucky enough to find at the WROX Home Page), some image positioning and page division, and a few Style Sheet commands.

By the way, if you haven't already gone, head to the WROX Home Page. They offer some great examples. Plus they are quite generous in their samples. You can get 15 ready-to-go DHTML items in a Zip packet download.

The Script

It's actually two scripts. The first allows the three images to be moved and the second disallows the main image to be moved. Here it is. You can copy and paste it from here.

<SCRIPT LANGUAGE="JavaScript">
      var curElement;
      function doMouseMove() {
        var newleft=0, newTop = 0
        if ((event.button==1) && (curElement!=null)) {
          
          newleft=
             event.clientX-document.all.OuterDiv.offsetLeft 
                    -(curElement.offsetWidth/2)
          if (newleft<0) newleft=0
          curElement.style.pixelLeft= newleft
          newtop=
             event.clientY -document.all.OuterDiv.offsetTop
                    -(curElement.offsetHeight/2)
          if (newtop<0) newtop=0
          curElement.style.pixel
          newtop=
             event.clientY -document.all.OuterDiv.offsetTop
                    -(curElement.offsetHeight/2)
          if (newtop<0) newtop=0
          curElement.style.pixelTop= newtop
          event.returnValue = false
          event.cancelBubble = true
        }
      }

      function doDragStart() {
        // Don't do default drag operation.
        if ("IMG"==event.srcElement.tagName)
          event.returnValue=false;
      }

      function doMouseDown() {
        if ((event.button==1) && 
            (event.srcElement.tagName=="IMG"))
          curElement = event.srcElement
      }

      document.ondragstart = doDragStart;
      document.onmousedown = doMouseDown;
      document.onmousemove = doMouseMove;
      document.onmouseup = new Function("curElement=null")
    </SCRIPT>
    <SCRIPT FOR="playboard" EVENT="onmousedown" 
                                  LANGUAGE="JavaScript">
      // Do not move the alienhead or allow it to be dragged
      event.cancelBubble=true
    </SCRIPT>

Take that and paste it in between your <HEAD> commands. The only change you might want to make is the name of the item that will remain in place. I called mine "Playboard." You can see that about four lines up at the start of the second script. If you change the ID name of the item that stays put, you'll need to change it in the script, too.

Get The Images

This little deal only has four images. If you want, you can add as many as you like (there doesn't appear to be an upper limit), but you might run out of floor space. Here are the four images used in this example:

[stage.gif] [circle.gif] [square.gif] [triangle.gif]

Grab them right from there if you'd like.

The Playing Field

Here's the code that was used to place the images on the page.


<DIV id=OuterDiv style="position:relative;
                    width:100%;height:400px">
    <img ID="playboard" STYLE="position:absolute;TOP:83pt;
            LEFT:142pt;width: 300px; height=150px; 
            Z-INDEX:2;" src="stage.gif">
    <img ID="square" STYLE="position:absolute;TOP:8pt;
            LEFT:0pt;WIDTH:50px;HEIGHT:50px;Z-INDEX:22;" 
            src="square.gif">
    <img ID="circle" STYLE="position:absolute;TOP:8pt;
            LEFT:70pt;WIDTH:50px;HEIGHT:50px;Z-INDEX:21;" 
            src="circle.gif">
    <img ID="triangle" STYLE="position:absolute;TOP:8pt;
            LEFT:140pt;WIDTH:50xt;HEIGHT:50px;Z-INDEX:21;" 
            src="triangle.gif">
</DIV>

It looks a bit daunting right now, but stay with me here. I'll get you through it.

Line One -- The Page Division

Here's line one:

You didn't know this at first, but the game you played had boundaries. You were playing on a set "section" or division of the page. That's what the command <DIV> stands for. You are blocking off a section of the page. Please also notice the </DIV> command at the end of the block of text above.

Okay, you've set aside a section of the page, but how much of a section? Now we get into Positioning ( So, You Want Positioning, Huh? ) using Style Sheet commands. I also touch on this a bit in the Layer tutorials.

Here's What's Happening

DIV states this is a division of the page.
id=OuterDiv states this is the outer parameter of the game.
style= denotes that what follows are Style Sheet commands.
position:relative; denotes that this division's position is relative to the other items it will contain.
width:100%;height:400px" states that the width of this division is 100% of the width of the screen and 400 pixels high.

The Images

The images are all placed on the page in basically the same fashion, so I'll only go over one. Here's the command to place the large stationary image on the page:

Here's What's Happening

IMG means it's an image.
ID="playboard" is a name I gave the image. Remember that since this one is stationary, it is affected by the second script above, so the IDs must match up.
STYLE= indicates the style commands coming up.
position:absolute; means that the image will be positioned exactly where I say to put it.
TOP:83pt;LEFT:142pt is the exact location of the upper left-hand corner of the image -- 83 pixels from the top of the browser screen and 142 pixels from the left of the browser screen.
width: 300px; height=150px; are the width and height of the image that will display.
Z-INDEX:2; is another positioning element. Notice its number is lowest of the four? Thus it will be the lowest level of this. In other words, items will go on top of it.
SRC="stage.gif" is the name of the image.

Each of the images above are done the same way. The only differences between the commands are the ID names and names of the images, of course, and the positioning pixel numbers. Remember that you must make allowances for these positions. When you state that positioning is absolute, if there is text or another image in the way -- tough! The position is absolute and other items will be covered up.

That's It! You're Done

Place the JavaScripts above between the <HEAD> commands and the <DIV> block above between the <BODY> commands, run it in MSIE 4.0, and you should be good to go.

Additional DHTML Examples

[ A Video Game ]
[ Power Point Transistions ]
[ Folder Trees ]
[ Link ]
[ Link ]
[ Link ]
[ Link ]

Where From Here?

This is only the first of what I hope to make many DHTML tutorials. Believe me, they get a lot more daring than this. However, I am finding that DHTML on the Net is not as loopy goofy as you'd think. People who are putting these little deals together are beginning to offer them in much the same way Applets and JavaScripts are being offered, as self-contained copy-and-paste deals. Just make sure you have permission to take from the page that has the DHTML.

If you have a DHTML model that you think would make a good tutorial, let me know. If it adds to the discussion, I'll share it with the world. I'd like to get five to seven DHTML examples showing different areas of the craft. I figure that if someone gets through five tutorials on my site, he or she won't have much trouble implementing DHTML from elsewhere on the Web.

But first, here are a few great links to get you further along in the process:

Microsoft's DHTML pages
Macromedia's DHTML Zone!
Inside Dynamic HTML
Yahoo's HTML Formats: DHTML
Yahoo's DHTML Games

Enjoy the trip. It looks like enough of the the big players in the Internet game are throwing their hats into the DHTML ring to keep it around for a good long while.