Tech Demos : pnhObjectLibrary

What is the pnhObjectLibrary?

I started this library of code for 3 reasons: (1) I never want to think about browser specific coding again; (2) Formal javascript APIs that I have seen distributed on the web don't fit my object oriented coding style at all; (3) I found myself rewriting and awful lot of code that i had already written for other things simple because i was too lazy to find it. So I took a serious look through my old code and tried to figure out the types of things I have done in the past and did a lot of cutting and pasting to put these together. The fuctionality of these objects is not complete by any means, it covers only functionality that I have needed in my work.

Please note, I am not offering these up as a formal API for distribution. Look at them, learn from them, and perhaps use them. I am not supporting these objects in any way, shape or form. These objects were put together for purely selfish reasons. And any further work on them will be driven by similarly selfish reasons.

[documentation last updated 2001/03/17]

object descriptions

  • pnhExtendedImageObject [source]

    Used to define a graphic for later use in a document. This object has nothing to do with the DOM or changing an image in a document. It simply provides a more robust Image object. It allows for a separation of the definition of the graphic file's URI from the loading of the graphic.

  • pnhLayerObject [source] [test case]

    Used to give cross-platform, cross-browser access to a specified layer. A layer is defined as any html DIV tag that was originally defined a position via CSS.

  • pnhScalableImageObject [source] [test case]

    Extends pnhLayerObject to create an image that is both scalable and moveable

    Requires pnhLayerObject linked also; Not compatible with NN4; NN6/Mozilla shows some serious cashing issues

  • pnhWindowObject [source] [test case]

    This object is used to provide cross-browser & cross-platform access to the current browser window for use in determining browser size and converting percentage distances to pixels.

  • pnhDraggableLayerObject [coming sometime]

    This will extend the standard layer object so it is draggable. I get to finishing and testing this next time I do something with dragging layers in it.

api documentation

pnhExtendedImageObject.js

Used to define a graphic for later use in a document. This object has nothing to do with the DOM or changing an image in a document. It simply provides a more robust Image object. It allows for a separation of the definition of the graphic file's URI from the loading of the graphic.

Constructor:

pnhExtendedImageObject(string URI)

Creates the object and sets the URI of the image. Loading of the image IS NOT part of the constructor.

  • URI : string : the location of the graphic file.

Methods:

getSrc() :: returns binary source

Used to access the source of the loaded graphic file

load() :: returns true

Initiates the loading of the graphic file

unload() :: returns true

Sets the source of the graphic object to null to free up resources. While this should clear help in theory, I have not tested the actual behavior of individual browsers when using this method to manage resouces.

pnhLayerObject.js

Used to give cross-platform, cross-browser access to a specified layer. A layer is defined as any html DIV tag that was originally defined a position via CSS.

Constructor:

pnhLayerObject(string layer_id, array nested_layers)

  • layer_id : string : the CSS id of the DIV.
  • nested_layers : array : array of layer ids that this layer is found in. Usually null.

Methods:

changeClipBy(int delta_top, int delta_right, int delta_bottom, int delta_left) :: returns true

Changes the size of the layer's clipping rectangle.

  • delta_top : integer : the change in the location of the top of the clipping rectangle.
  • delta_right : integer : the change in the location of the right of the clipping rectangle.
  • delta_bottom : integer : the change in the location of the bottom of the clipping rectangle.
  • delta_left : integer : the change in the location of the left of the clipping rectangle.
getX() :: returns int

Returns the current X position (left) in pixels of the layer

getY() :: returns int

Returns the current Y position (left) in pixels of the layer

moveBy(int delta_left, int delta_top) :: returns true

Changes the position of the layer in relation to it's current postion.

  • delta_left : integer : the change in the horizontal (left) position of the layer. Positive = Right.
  • delta_top : integer : the change in the vertical (top) position of the layer. Positive = Down.
setClip(int top, int right, int bottom, int left) :: returns true

Sets the size of the layer's clipping rectangle.

  • top : integer : the location of the top of the clipping rectangle.
  • right : integer : the location of the right of the clipping rectangle.
  • bottom : integer : the location of the bottom of the clipping rectangle.
  • left : integer : the location of the left of the clipping rectangle.
setHTML(string html_content, int content_width) :: returns true

Sets the content of the layer to a new chunk of html markup.

  • html_content : string : The marked up content.
  • content_width : integer : The width of the new content. Used to work around a NN4 inconsistancy.
setVisibility(string visibility_unit) :: returns true

Sets visibility of the layer.

  • visibility_unit : string : The new visibility of the layer. Can be set to either "visible" or "hidden".
setX(int left) :: returns true

Sets X position (left) of the layer. Positive = Right.

setY(int top) :: returns true

Sets Y position (top) of the layer. Positive = Down.

setZ(int zindex) :: returns true

Sets z-index of the layer. Higher = Forward.

pnhScalableImageObject.js

Extends pnhLayerObject to create an image that is both scalable and moveable

Requires pnhLayerObject linked also; Not compatible with NN4; NN6/Mozilla shows some serious cashing issues

Constructor:

pnhScalableImageObject(string layer_id, string image_name)
  • layer_id : string : the CSS id of the DIV.
  • image_name : string : the name of the image residing in the specified DIV.

Methods:

NOTE: Inherits all methods from pnhLayerObject

changeSizeBy(int delta_width, int delta_height) :: returns true

Changes the size of the image by the specified dimensions

  • delta_width : integer : the change to the width of the image.
  • delta_height : integer : the change to the height of the image.
getHeight() :: returns int

Returns the current height of the image.

getWidth() :: returns int

Returns the current width of the image.

scaleBy(int percent_width, int percent_height) :: returns true

Scales the image by a given percentage of it's height and width.

  • percent_width : integer : the percentage of the current width that the new width will be set to.
  • percent_height : integer : the percentage of the current height that the new height will be set to.
setHeight(int new_height) :: returns true

Sets the height of the image.

  • new_height : integer : the new height of the image.
setSize(int new_width, int new_height) :: returns true

Sets the height and width of the image

  • new_width : integer : the new width of the image.
  • new_height : integer : the new height of the image.
setWidth(int new_width) :: returns true

Sets the width of the image.

  • new_width : integer : the new width of the image.

pnhWindowObject.js

This object is used to provide cross-browser & cross-platform access to the current browser window for use in determining browser size and converting percentage distances to pixels.

Constructor:

pnhWindowObject()

Methods:

clearStatus() :: returns true

Clears the status bar message

getInnerHeight() :: returns int

Returns the height (in pixels) of the viewable area of the browser window

getInnerWidth() :: returns int

Returns the width (in pixels) of the viewable area of the browser window

percentToPixels(int percentage) :: returns int

converts a percentage (int from 0-100) to a pixel value

setStatus(string message) :: returns true

Sets a new status bar message

Last Updated 09/09/2006