Dynamic HTML...Are You Ready to Step Up to the Plate?
Part 3
If you've been reading our DHTML series, you've checked out some working models of what DHTML can do, and you understand what Cascading Style Sheets do and how they are used. You probably understand that the parameters of layers can be manipulated on the Web page in real time. In this column we'll go into these properties a bit more, show you an example, and point you to some outstanding tutorials which will take you even further in your DHTML quest.
DHTML Positioning
In our last lesson we showed you that you can make a layer become visible or invisible using the visibility parameter. This time we're going to move the layer around a bit using a simple form, and while we're at it we'll add a couple buttons to make it appear and disappear. We do this using the visibility property, and the top and left positions of the layer.
First we must define the style sheet for the layer:
<STYLE TYPE="text/css">
#wdarea {position: absolute; left: 300; right: 100; top: 70;}
</STYLE>
Then we define the layer itself:
<DIV ID="wdarea" >
<IMG SRC="webdevlogo.gif">
</DIV>
Then we make a function which will move the layer to the left and top numbers we will later specify:
function move(leftnum, topnum){
document.wdarea.left = leftnum;
document.wdarea.top = topnum;
}
Since we're using this as an example, what better way is there to examine the effect than by using a form so we can instantly change the position of the layer:
<FORM NAME="form1"
action="javascript:move(document.form1.leftnumber.value,
document.form1.topnumber.value)" METHOD=POST><PRE>
<B>LEFT</B> <INPUT TYPE=TEXT NAME="leftnumber">
<B>TOP</B> <INPUT TYPE=TEXT NAME="topnumber"></PRE>
<INPUT TYPE="submit"></FORM>
This simply takes the values which you input into the form, and moves the layer that many pixels from the top and the left. No error correction has been added, so if you type anything but an integer into the form, an error will occur. The effect is great though, and you can see how easy it is to move a layer around a page. The example page may be viewed to see the full effect. At the same time, we also added two other buttons (and a function) to the page. The function makes the layer appear and disappear by clicking the form button. It's very simple, as you'll see here:
function hideshow(yn){
document.layers.wdarea.visibility=yn;
}
The form(s) for this effect simply call the JavaScript function and pass it the directive--to make the layer "visible" or "hidden."
<FORM NAME="form2" action="javascript:hideshow('hidden')"
METHOD=POST>
<INPUT TYPE="submit" VALUE="Hide"></FORM>
Again, the full effect can be seen on the example page. The only extra things I've done on the example page are to place the forms within a table for a more presentable appearance. Functionally, they are identicle to the above code.
DHTML Resources
In the last 3 months many excellent DHTML sources have appeared on the Web. Right at the top is our own WebReference's DHTML Expert. The resident DHTML expert presents detailed tutorials which will get you up to speed in no time flat. Another hot DHTML site is Macromedia's DHTMLZone. DHTMLZone features tutorials, demos and more, brought to you from one of the few companies who sell DHTML visual tools. Another must visit site is Nick Heinle's WebCoder, a JavaScript/DHTML resource site. Nick's site features tons of code you can use and hack to your heart's content.
While there's not a whole slew of DHTML editors available like there are for standard HTML, some decent software is starting to appear which will make it easier to develop Web sites which include DHTML. Below is a preliminary list of these tools:
Don't forget to stop by our definitive list of DHTML resources. And if you find any that we've missed, please pass 'em on!.
[ < Dynamic HTML...Are You Ready to Step Up to the Plate?:
Part 2 ] |
[ Dynamic HTML...Are You Ready to Step Up to the Plate?:
Part 1 > ] |
|
eBook library 