KLayers
Manual

Table of contents

• KLayers home page
• Download KLayers
• What is KLayers?
• Using KLayers
  • Including to document
  • Supported browsers
  • Is KLayers free?
• Functions and methods
  • Flags and variables
    • Browser's version
    • Reference mark of screen coordinates
  • Functions
    • Window and document
    • Special
    • Misc: preloading images
  • Classes and methods
    • Class KLayer - interface to layer
    • Class KImage - interface to image
• Examples

What is KLayers

KLayers library is intended for simplification of operation with Dynamic HTML in various browsers. KLayers is a set of JavaScript functions and methods which allow programmer to pay lesser attention to browser's specific features.

For example, to find out height of document contents, the programmer should use variables:

• document.body.scrollHeight in Microsoft Internet Explorer (MSIE);
• document.height in Netscape and Mozilla;
• document.body.style.pixelHeight in Opera 6.

KLayers releases programmer from this routine actions. Using KLayers, you should only call function getDocumentHeight() which returns document's height.

Using KLayers

Including to document

KLayers is a JavaScript program, so it is included by standart tags

<script language="JavaScript" type="text/javascript" src="klayers.js"></script>

Supported browsers?

This version of KLayers supports all main DHTML-browsers:

• MSIE 4, 5, 6;
• Netscape 4, 6, 7, Mozilla;
• Opera 5, 6 (partially), 7 (full support)

Other browsers officially not supported.

In case of new DHTML-browsers releasing I will add it's support to new versions of KLayers and you should only download updated version of KLayers.

Is KLayers free?

Yes. KLayers is distributed under the terms of the GNU Lesser General Public License, so you can use it in commercial projects and modify.

Functions and methods

Flags and variables

Browser's version

True, if browser

• isDOM - supports DOM1,
• isMSIE - MSIE,
• isNC4 - Netscape 4,
• isNC6 = isMozilla - Netscape 6, 7 (Mozilla),
• isNC - Netscape,
• isOpera - Opera,
• isOpera5 - Opera 5+,
• isOpera6 - Opera 6+.
• isOpera7 - Opera 7.

Reference mark of screen coordinates

You can define variables pageLeft and pageTop to determine reference mark of screen coordinates. Defaults - 0.

Functions

Window and document

• getWindowLeft([window]) - x-coordinate of left edge of window's workspace,
• getWindowTop([window]) - y-coordinate of top edge of window's workspace,
• getWindowWidth([window]) - width of window or frame. Without optional argument (window object) - width of current window (self),
• getWindowHeight([window]) - height of window or frame,
• getDocumentWidth([window]) - document's content's width,
• getDocumentHeight([window]) - document's content's height,
• getScrollX([window]) - vertical scrolling ratio of document,
• getScrollY([window]) - horizontal scrolling ratio of document.

Example - scroll document to bottom minus 100 px:

S=getDocumentHeight()-getWindowHeight()-100
if(S>=0) self.scrollTo(S)

Special

• initKLayers() - initialize flags and variables. Called automatically. Returns true, if KLayers supports that browser.
• KLayers - true if KLayers supports that browser. Set thru function initKLayers().

Miscellaneous

• preloadImage(image URL) - load image to browser cache to prevent delay while changing image source.

Classes

Class KLayer

Class KLayer is intended to incapsulating of data and logics for operating with layer properties. For historical reasons we shall name hereinafter the DHTML-object a layer

There is constructor KLayer(layer id), for creating instance you must use function-factory layer(layer id). If we have layer with id mylayer, we call layer("mylayer") to obtain interface to it.

For better compatibility with Netscape 4 I wrote function layerFrom(layer id, path to parent layer) for more quick search of layer in Netscape 4 tree of nested layers. For example, if we have layer zzz nested in layer yyy and yyy nested in xxx, we should call layer zzz as

layerFrom("zzz", "document.layers.xxx.document.layers.yyy")

Class KLayer incapsulates following fields and methods:

• Fields:
  • .object - link to DHTML-object (layer).
  • .style, .css - link to styles of layer.
  • .path - path to layer in current browser DOM, i. e. eval(layer.path)=layer.object
• Reading layer's properties:
  • .isExist(), .exists() - is layer exist.
  • .getLeft() - x-coordinate of left edge of layer concerning parent element (if parent does not exist then concerning document).
  • .getTop() - y-coordinate of top edge of layer concerning parent element.
  • .getAbsoluteLeft() - x-coordinate of left edge of layer concerning document.
  • .getAbsoluteTop() - y-coordinate of top edge of layer concerning document.
  • .getWidth() - layer's contents width.
  • .getHeight() - layer's contents height.
  • .getZIndex() - layer's z-index. Z-index larger, layer closer to spectator.
  • .isVisible(), .getVisibility() - is layer visible.
• Setting layer's properties:
  • .setLeft(x), .moveX(...) - set x-coordinate of left edge of layer.
  • .setTop(y), .moveY(...) - set y-coordinate of top edge of layer.
  • .moveTo(x, y), .move(...) - move layer.
  • .moveBy(x, y) - move layer relatively.
  • .setZIndex(zIndex), .moveZ(...) - set layer's z-index.
  • .setVisibility(true / false) - set layer's visibility.
  • .show() - show layer.
  • .hide() - hide layer.
  • .setBgColor(color) - set layer's background color (At Opera 5 you should set some background color by style sheet).
  • .setBgImage(image URL) - set background image (Not works at Opera below version 6).
  • .setClip(top, right, bottom, left), .clip(...) - set rectangle part of layer visible (clip layer) (Not works at Opera because Opera does not support layer clipping)
  • .scrollTo(windowLeft, windowTop, windowWidth, windowHeight, scrollX, scrollY), .scroll(...) - scrolling layer in rectangle area with coordinates windowLeft, windowTop, windowWidth, windowHeight with scrolling offset scrollX and scrollY. (For not Netscape 4 browser it is recommends to use layer property overflow as showed at one of examples)
  • .scrollBy(windowLeft, windowTop, windowWidth, windowHeight, scrollX, scrollY), .scrollByOffset(...) - relative scrolling.
  • .scrollByPercentage(windowLeft, windowTop, windowWidth, windowHeight, scrollX, scrollY) - percentage scrolling.
  • .write(text) - write to layer (Not works at Opera).
  • .add(text) - add content to layer (Not works at Opera).

Example: move hidden layer to position (100, 200) and make it visible:

<div id="mylayer" style="position: absolute; visibility: hidden; left:0px; top: 0px">LAYER</div>
<script>
var L=layer("mylayer")
L.moveTo(100,200)
L.show()
</script>

Class KImage

Class KImage written to image operation in Netscape 4, which hold image objects in tree, if images included to layer.

Constructor - KImage(), but for creating image interface you must use function-factory image(image name). or imageFrom(image name, parent layer path in Netscape 4 DOM)

• Fields:
  • .object - link to image object.
  • .path - eval(image.path)=image.object.
• Methods:
  • .isExist(), .exists() - is image exists.
  • .getSrc(), .src() - URL of image.
  • .setSrc(URL), .load(...) - change image's URL.

Examples

• Simple drop-down menu
• Binding layer to cursor
• Scrolling (vertical marquee)