WbWizard's JS Book




Blue Line


Lesson 24 & 25: X/Y Positioning


Today we will be discussing X/Y positioning and the various properties JavaScript uses to reference positions on the screen. If you remember back to those good old geometry classes, you've got a better memory than me (there is my feeble attempt at humor for this series, bet your glad it wasn't a B2B Humor series), and you'll remember the Cartesian Coordinate System, which defines a set of x,y axis lines which are used to measure the position of a point on a plane. For webpages, the axis lines will be perpendicular 99.99% of the time, laid along the outer edges of he screen, with the abscissa (x point) measured from the left edge of the screen, and the ordinate (y point) measured from the top of the screen.

WebTv JellyScript supports the posTop and posLeft properties to represent the upper left corner of a CSS-P defined item, with posLeft the equivalent of the abscissa (x), and posTop the equivalent of the ordinate (y). WebTv also has limited support for screen.y which returns the amount the screen has been scrolled vertically, but since WebTv has no horizontal scrolling, there is no support for screen.x and the same applies to client.x/y and item.x/y as well. The posTop and posLeft properties of the style of the element are contained in the all[] array, just like visibility.

[Note-WebTv only supports absolute positioning, however, you can nest divisions with CSS-P attributes, and the nested division will treat the outer division as the page container for itself, creating relative positioning effects.]

Sample CSS-P Division-set to (50,50):



Notice that in the HTML style attributes, or style sheets, the posTop and posLeft are defined by top and left strings set to a number AND a measurement such as "px" for pixels or "in" for inches, etc. For WebTv, position is always set to absolute (see notes for workaround).

1) Positioning with JavaScript

To set or change the position of a CSS-P defined element, we reference via the all[] array, Example-change to (100,100):



Notice that unlike in the HTML attributes where a string is used to set top and left, in JavaScript, the posTop and posLeft values are a number (love that JavaScript auto-conversion).

2) Motion with JavaScript
To define the motion of CSS-P defined items, we must define the positions for the posTop and posLeft properties, and the time between movements, Example-move in a line from (100,100) to (200,00):



Here is the same sample giving vertical motion rather than horizontal:



More complex movements can be derived from analytical geometry calculations. Any calculation that can take a predetermined change in one coordinate and return the corresponding value for the other coordinate, or a rate of change, can be used to define motion of CSS-P defined items with JavaScript.

Here is an aggravating example that wont let you click the link by repositioning to random areas onMouseOver and focusing back on the extra link:



[Note- the nextleft, nextright, ect are WebTv only attributes that take place of the tab index computer browser use.]

[Note2- notice the use of the all[] array to set focus to a link. This is a little known but very powerful WebTv supported method for focusing the highlight box on the desired link programmatically!]


Easy Pad



Blue Line
Lessons by
Jerry aka WebWizard