Add Energy to your DHTML

Dhtml

*purpleendurer corrected some of the errors in the original.

You can use IE to add behavior to your HTML elements and create object-oriented page design methods. Phillip Perkins creates a <DIV> object that, when the user drags it, continues to run in the restricted <DIV> direction.

Macromedia Flash allows developers to protect themselves from web browsers and interoperability solutions. However, limited to flash makes you unable to experience many of the features of web browsers.

For example, you can add behavior to HTML elements through IE, and create an object-oriented page design approach. In this example, I will create a <DIV> object that, when the user drags it, will continue to run in the restricted <DIV> direction.

The ability to add behavior to HTML is a key part of the design. In IE, this is done through the associated style. The style attribute that adds the behavior is "behavior". You can add behavior through nested <STYLE> tags, like this:

<style>div.object {behavior:url (BEHAVIOR.HTC);}

From this script, you can find an action that mentions an HTC (HTML component) file. Now that we have the basics of object-oriented HTML elements, we can create a behavioral script that controls them.

Table A contains all the code that establishes the behavior for our nested <DIV> objects. There is a lot of code within this component.

table A -contents of file COMPONENT.HTC

<public:component lightweight= "true" >

<public:attach event= "onmousedown" onevent= "Element_onmousedown ()"/>

<public:attach event= "onmousemove" onevent= "Element_onmousemove ()"/>

<public:attach event= "onmouseup" onevent= "Element_onmouseup ()"/>

<public:attach event= "onmouseout" onevent= "Element_onmouseup ()"/>

<public:attach event= "onselectstart" onevent= "Element_onselectstart ()"/>

<public:attach event= "ondragstart" onevent= "Element_ondragstart ()"/>

<public:attach event= "onload" for= "window" onevent= "Init ()"/>

<public:method name= "Moveme"/>

<public:property name= "Clickpoint" get= "Get_clickpoint" put= "Put_clickpoint"/>

<public:property name= "Interval" get= "Get_interval" put= "Put_interval"/>

<script language= "JScript"
var m_bstarted = false;
var m_bmoving = false;
var m_clickpoint = null;
var m_tstart = 0;
var m_tend = 0;
var m_ptstart = null;
var m_slope = null;
var m_interval = 0;
var m_ismoving = false;
var m_trash = 0;
var m_dx = 0;
var m_dy = 0;
var m_vectx = 0;
var m_vecty = 0;
var m_pnode = null;
var m_bounds = [];
var BOUNDS = {' Left ': 0, ' top ': 1, ' Right ': 2, ' Bottom ': 3};
var m_dimensions = [];
var DIMS = {"width": 0, "height": 1};

function Init ()
{
Element.id = element.document.uniqueId;
var m_pnode = Element.parentnode;
M_bounds = [
0,
0,
parseint (M_pNode.currentStyle.width),
parseint (M_pNode.currentStyle.height)
];
M_dimensions = [
Node parseint (Element.offsetwidth),
parseint (Element.offsetheight)
];

}

function Element_onmousedown ()
{
M_bstarted = true;
M_tstart = new Date ();
Clearinterval (M_interval);
M_slope = null;
M_ptstart = null;
M_trash = 0;
M_DX = 0;
M_dy = 0;
M_vectx = 0;
m_vecty = 0;
M_clickpoint = new Point (Event.x, EVENT.Y);
M_ptstart = new Point (part (Element.currentStyle.left), parseint (Element.currentStyle.top));

}

function Element_onmouseup ()
{
if (!m_bmoving) return;
M_bmoving = false;
m_bstarted = false;
M_tend = new Date ();
var t = m_tend.valueof ()-m_tstart.valueof ();
var lpoint = new Point (Event.x, EVENT.Y);
M_slope = Geometry.slope (M_clickpoint, lpoint);
var ptend = M_slope.add (M_ptstart);
Element.style.left = ptend.posx + "px";
Element.style.top = Ptend.posy + "px";
var spd = 0;
if (m_slope.deltax!= 0 && m_slope.deltay!= 0)
{
SPD = Math.sqrt (Math.pow (M_slope.deltax, 2) + Math.pow (m_slope.deltay,2))/t;
}
Else
{
SPD = (M_slope.deltax + m_slope.deltay)/t;
}

if (SPD > 1) spd = 1;
M_DX = M_slope.deltax;
M_dy = M_slope.deltay;
if (m_dx!= 0) M_vectx = (M_dx > 0)? 2:-2;
if (m_dy!= 0) m_vecty = (M_dy > 0)? 2:-2;
Startmove (element, parseint (1/SPD));
}

function Element_onmousemove ()
{
m_bmoving = m_bstarted;
if (!m_bmoving) return;
var lpoint = new Point (Event.x, EVENT.Y);
var lslope = Geometry.slope (M_clickpoint, lpoint);
var ptend = Lslope.add (M_ptstart);
Element.style.left = ptend.posx + "px";
Element.style.top = Ptend.posy + "px";
}

function Element_onselectstart ()
{
Event.returnvalue = false;
return false;
}

function Element_ondragstart ()
{
Event.returnvalue = false;
return false;
}

function Get_clickpoint ()
{
return m_clickpoint;
}

function Put_clickpoint (o)
{
if (typeof (o) = = "Object" && o.constructor = = "point")
{
M_clickpoint = O;
}
Else
{
Alert ("expected point.");
}
}

function Get_interval ()
{
return m_interval;
}

function Put_interval (n)
{
M_interval = n;
}

function Moveme ()
{
if (m_ismoving) return;
settimeout ("m_ismoving = true;", 1);
var newx = parseint (element.currentStyle.left);
var newy = parseint (element.currentStyle.top);
var dxabs = Math.Abs (M_DX);
var dyabs = Math.Abs (M_dy);
if (Dxabs > Dyabs)
{
Divide both by DeltaX
Each call move X with 1 and Y by y/x
If iteration > 1, then move Y by 1
and add remainder back on Y
Newx + = M_vectx;
var l_step = (M_DY/M_DX) * 2;
M_trash = M_trash + l_step;
if (M_trash > 2 | | | M_trash <-2)
{
Newy + = M_vecty;
M_trash-= M_vectx;
}
}
Else
{
Vice-versa
Newy + = M_vecty;
var l_step = (m_dx/m_dy) * 2;
M_trash = M_trash + l_step;
if (M_trash > 2 | | | M_trash <-2)
{
Newx + = M_vectx;
M_trash-= M_vectx;
}
}
if (newx <= M_bounds[bounds.left])
{
NEWX = M_bounds[bounds.left] + 1;
M_vectx *=-1;
}
else if ((Newx + m_dimensions[dims.width]) >= M_bounds[bounds.right])
{
NEWX = M_bounds[bounds.right]-m_dimensions[dims.width]-1;
M_vectx *=-1;
}

if (Newy <= m_bounds[bounds.top])
{
Newy = M_bounds[bounds.top] + 1;
M_vecty *=-1;
}
else if ((Newy + m_dimensions[dims.height]) >= M_bounds[bounds.bottom])
{
Newy = M_bounds[bounds.bottom]-m_dimensions[dims.height]-1;
M_vecty *=-1;
}

Element.style.left = newx + "px";
Element.style.top = newy + "px";
settimeout ("m_ismoving = false;", 1);
}
</script>

</public:component>

If you notice the top of the script, there's a special tag that tells the browser which style to use to render the feature and the method that contains the component, and which events to add this component to. These events are standard HTML events.

When the component (in the Mount event) is initialized, it obtains a UniqueID, records its containing parent in a numeric variable, and sets the default value for the process calculation. As you step through the target processor of this object, you will see that whenever the user clicks on the object---element_onmousedown ()---Some variables to initialize. Next, the user should drag the object to another location.

When a user drags an object on the screen,-element_onmousemove ()-The position of the object changes to match the mouse motion. The user should then release the mouse button to allow the object to move itself.

When the user releases the mouse button-element_onmouseup ()-or the mouse is disconnected from the object area-element_onmouseout ()-The release point is recorded and the user clicks on the object to release the object, and the object gets the eternal motion. By calculating the slope of the click starting point and the release point, the slope becomes the new moving path of the object. The distance that is moved through an object and the drag time calculate the speed at which the user drags the object. This speed is then used to establish how objects are moved. Eventually, the countdown to the speed is used to establish the time interval for updating the object's location.

In the interval interrupt event-moveme ()-The object's ascent (Rise) and motion (run) convert the direction angle to the computed motion path. We can do this by separating the larger direction changes from the smaller ones. As a result, One Direction change is always 1 and the other is less than 1. In each interrupt, the larger of the two direction changes is increased by a vector unit, possibly 2 or 2 pixels. The other increases by twice times the change in the minor direction (that is, if the motion rises to 2 and the movement is 1, then the ascent increases by 1 * vectors and the movement increases each time. 5 * 2 units). If the smaller change increment exceeds the vector unit (-2 or 2),

If the new position of the object is outside the qualified element, the vector changes to match it. This method "bounces" the object out of the qualifying element.

Table B is the HTML page that contains these components.

table B --demo.htm content

<style>
Div.bounds
{
width:800px;
height:600px;
BORDER:1PX Red Solid;
Overflow:hidden;

}

Div.object
{
Position:absolute;
left:0px;
top:0px;
border:0px Blue Solid;
Behavior:url (COMPONENT.HTC);
Cursor:hand;

}
</style>

<script language= "JavaScript" >

function point (PX, PY)
{
This.posx = PX;
This.posy = PY;
}

function Cslope (P1, P2)
{
This.deltay = P2.posy-p1.posy;
This.deltax = P2.POSX-P1.POSX;
THIS.M = (p2.posy-p1.posy)/(P2.POSX-P1.POSX);
}

function _slopeadd (P1)
{
var lpoint = new Point ((P1.posx + this.deltax), (P1.posy + This.deltay));
return lpoint;
}

CSlope.prototype.add = _slopeadd;

function Cgeometry () {}

function _slope (P1, P2)
{
var lslope = new Cslope (P1, P2);
return lslope;
}

CGeometry.prototype.slope = _slope;
var Geometry = new Cgeometry ();
var objstack = [];

function Startmove (obj, t)
{
var id = objstack.push (obj);
Objstack[id-1].interval = SetInterval ("objstack[" + (id-1) + "].moveme ()", t);
}
</script>

<body style= "Font-family:verdana; font-size:24pt; " >

<center>
<div class= "Bounds" id= "Divbounds" name= "Divbounds" onselectstart= "window.event.returnValue" = false; >
<div class= "Object" >dog</div>
</div>
</center>
</body>

An HTML page is simply a nested <DIV> containing <DIV> and as a component element. Within JavaScript, there are support objects and functions to help with component calculations. Notably, there is an object stack-objstack-variable that can be used to help manage calls to the component Moveme () method during the interval interruption.

Copy the code and paste it into your own file. Remember to name your HTC file component.htc, especially for behavioral style features. Run this example in IE 5.0 or later and look at your object with vigour.