Navigate back home
GalaSoft Laurent Bugnion
DHTML effect: Positioning
Introduction

Here is a new DHTML effect. When a node is positioned absolutely on a page, adding the effect to that node will keep it always "in sight", also when the page is scrolled down. The node will reposition itself smoothly. The speed with which the node will move is calculated by a function, however the user can define his own function and pass it to the node as an option. This allows any kind of movement. Of course I provide a default function, which is a factor of the square of the distance. This way, the Node "glides" smoothly to the position.

Update: new functionalities in V1.1

  • With V1.2, it's now possible to use any CSS unit to position the HTML element, for example em, points (pt), pixels (px). This functionality uses the JavaScript class gslb.CssLength.
  • It's now possible to specify all the style attributes in external CSS files, using either the "class" or the "ID" notation. Of course cascaded classes are supported.
  • When using the method relocate, the new position can now be saved to a cookie. This way, when the page is refreshed, the new location is preserved. Use the options bSaveRelocationInCookie and iCookieExpirationHours to control this feature.
  • The code has been refactored in 2 objects (PositionedNode and PositionedBase) to facilitate future development. The basic class gslb.Object is used for the inheritance.

Adding the effect to a DOM node is very easy; for example:

<!-- This file is only needed for non-IE platforms (Mozilla, Firefox...) --> <script type="text/javascript" src="gslb.csslength.js"></script> <!-- This file is only needed if the relocate method is called, and if the new position must be saved in a cookie. --> <script type="text/javascript" src="gslb.cookie.js"></script> <!-- These 3 files are always needed. --> <script type="text/javascript" src="gslb.object.js"></script> <script type="text/javascript" src="gslb.positionedbase.js"></script> <script type="text/javascript" src="gslb.positionednode.js"></script> (...) // This code presupposes that 2 functions // myOwnFunction() and fnMoveStartY() are defined // somewhere else in the code. var oOptions = { bRepositionX : true, bRepositionY : true, iTimerMillisecondsFast : 5, iTimerMillisecondsSlow : 500, fnRepositionX : myOwnFunction, fnOnMoveStartY : doSomething }; var oPositionedNode = new gslb.PositionedNode( document.getElementById( "divLogo" ), oOptions ); (with:) <div id="divLogo" style="position: absolute; left: 2em; top: 60pt;"> <img src="http://www.galasoft.ch/logo/smallhead.gif" /> </div>
Creating a positioned node
Options

The different options all have default values, and thus can be omitted. In fact, the whole "options" object can be omitted in the constructor, in which case all options use default values. The options available are:

  • bRepositionX: If true, the node will be repositioned along the X axis. Default: true.
  • bRepositionY: If true, the node will be repositioned along the Y axis. Default: true.
  • iTimerMillisecondsFast: The duration of one iteration (in milliseconds) while the node is being moved. Default: 1 milliseconds.
  • iTimerMillisecondsSlow: The duration of one iteration (in milliseconds) while the node is standing still. Default: 100 milliseconds.
  • fnRepositionX: The function to use to calculate the Node's speed when it is moved along the X axis. Default: null.
  • fnRepositionY: The function to use to calculate the Node's speed when it is moved along the Y axis. Default: null.
  • fnOnMoveStartX: A function which will be called when the Node starts moving along the X axis. Default: null.
  • fnOnMoveStartY: A function which will be called when the Node starts moving along the Y axis. Default: null.
  • fnOnMoveStart: A function which will be called when the Node starts moving along any axis. Default: null.
  • fnOnMoveEndX: A function which will be called when the Node stops moving along the X axis. Default: null.
  • fnOnMoveEndY: A function which will be called when the Node stops moving along the Y axis. Default: null.
  • fnOnMoveEnd: A function which will be called when the Node stops moving along both axis. Default: null.
  • bSaveRelocationInCookie: If true, the new position after relocate was called will be saved in a cookie. Note: Setting this value to false doesn't delete a cookie if it had been set previously. To delete the cookie, you must explicitly call the method deleteCookie. Default: false.
  • iCookieExpirationHours: If bSaveRelocationInCookie is true, this specifies the number of hours during which the Node's new location will be saved in a cookie. If the value is set to 0, this is a session cookie (non-persistent). Default: 0.
Methods

A PositionedNode has the following methods:

  • relocate( iPositionX, iPositionY ): Relocates the Node to a different position on the screen using the repositioning effect.
    The parameters iPositionX and iPositionY specify the new position along the X, resp Y axis. Note: this is the position relative to the left of the visible area, not taking the position of the scrollbars in account. If null, no relocation is done along that axis.
    Depending on the value of bSaveRelocationInCookie and iCookieExpirationHours, the new position will be saved in a cookie, and restored if the page is refreshed.
  • relocate( iPositionX, iPositionY ): Relocates the Node to a different position on the screen.
    The parameters iPositionX and iPositionY specify the new position along the X, resp Y axis. Note: this is the position relative to the left of the visible area, not taking the position of the scrollbars in account. If null, no relocation is done along that axis.
    Depending on the value of bSaveRelocationInCookie and iCookieExpirationHours, the new position will be saved in a cookie, and restored if the page is refreshed.
  • pin( bPinNode ): Pins the Node to its current position. When pinned, the node won't reposition itself.
    The parameters bPinNode, if true, pins the Node. If false, it is unpinned.
  • pinX( bPinNode ): Pins the Node to its current position on the X axis. When pinned, the node won't reposition itself.
    The parameters bPinNode, if true, pins the Node. If false, it is unpinned.
  • pinY( bPinNode ): Pins the Node to its current position on the Y axis. When pinned, the node won't reposition itself.
    The parameters bPinNode, if true, pins the Node. If false, it is unpinned.
  • setOptions( oOptions ): Sets new options for this instance. See the Options definition above.
  • deleteCookie(): Deletes the cookie used to save the position after the method relocate has been called.
Live demo

Here is an example showing two positioned DIVs. Both PositionedNodes are created with default options; the controls underneath allow to modify the options on one or the other DIV.

GalaSoft logo

 DIV 1     DIV 2
New position (X, Y) 


 Pin
Options:
 Reposition along X
 Reposition along Y
 Timer milliseconds (moving)
 Timer milliseconds (not moving)

Downloads

Click to see the code.
Right-click and "Save as..." to save locally.
After saving, remove the ".txt" extension to execute the code in your web browser.

  • JavaScript code for gslb.PositionedNode (full / minimized)
  • Example contained in this file (HTML file)
History
Date Version Description
17.11.2007 V1.2.2
  • Clean-up, cosmetic changes, bug corrections
16.02.2007 V1.2.0
  • Added method "setLocation".
31.01.2007 V1.1.0
  • Modified to work with any CSS unit (em, pt, px, etc...).
  • Modified to work also with styles set in external files.
  • The new position after calling relocate( iPositionX, iPositionY ) can now be saved to a cookie.
  • Refactored to facilitate future development.
  • Extended options: fnOnMoveStart, fnOnMoveEnd, bSaveRelocationInCookie, iCookieExpirationHours.
  • Extended interface: isMovingX(), isMovingY(), isMoving(), dispose(), deleteCookie().
14.01.2007 V1.0.0
  • First official version
05.01.2007 V0.0.0
  • Created