The Dynamic Duo - The Dynamic Layer Object API [Clip Methods]



loc = "../"






document.write(toccss)
document.write(tochtml)

Clip Methods

The clip methods give you a simple way to clip your DynLayers in the same manner that I used the clip functions in the Clipping Layers lesson. Just as the slide methods have an initialization command, the clip methods do as well.

Initialize The Clip Methods:

There are 2 different situations when applying the clip methods.

Situation 1: Clipped to the default values

This occurs when you have either a) have defined no clip values in your CSS, or b) the values you have defined in your CSS are equal to that of the width and height of the layer. In either case, to use the clip methods you must define the width and the height of the layer in your CSS. To initialize the clip methods in situation 1, you can use:


objectName.clipInit()


Situation 2: Clipped to arbitrary values

If you have clipped your layers other than that of the default values you must initialize the clip methods in a different manner. For example if your layer has a width of 100 and a height of 50, but you have clipped your layer to (-10,-10,60,110), then you must pass those values to the clipInit() method:


objectName.clipInit(clipTop,clipRight,clipBottom,clipLeft)


Example:


mylayer.clipInit(-10,-10,60,110)


This is necessary because IE cannot initaially determine the clip values, the clipInit() function will re-clip the layer to those values so that they can be determined thereafter.

Once you have initialized the clip methods, the DynLayer adds 3 additional methods by which you can retrieve or change the clip values.

The clipValues() Method:

The clipValues() method is used to retrieve the current clip value for any of the 4 edges.


objectName.clipValues(which)


For the which argument, you pass the letter in quotes signaling which of the edges you want to find the value of. So there are four different ways of calling the method:


objectName.clipValues('l') // clip left value
objectName.clipValues('r') // clip right value
objectName.clipValues('t') // clip top value
objectName.clipValues('b') // clip bottom value


The clipTo() Method:

The clipTo() method will clip the edges of the layer to the specified values:


objectName.clipTo(t,r,b,l)



Where:
t - new clip top value
r - new clip right value
b - new clip bottom value
l - new clip left value


For any of the values which you do not want to change pass null for the value.

Examples:


mylayer.clipTo(0,25,50,0)
mylayer.clipTo(null,50,null,null)


The clipBy() Method:

The clipBy() method clips the edges based on their current value (as moveBy() is to moveTo()). The usage is the same as clipTo():


objectName.clipBy(t,r,b,l)


IE 5.0 Notes:

Unfortunately in IE 5.0, there is no way for the DynLayer to retrieve the initial clip values. So therefore if you want to do any complex clipping (like in the exmple below) you must manually send the clip values when calling clipInit().

Clip Methods Demo:

View dynlayer-clip1.html for an example using variations of the clip methods.

Warning: IE works differently with respect to clipping. When you clip outside of it's original boundaries (0,width,height,0) the background will not show. The layer will still clip however (inwards), better to view with both browser to see what I'm talking about. If you need to extend the width/height of a layer when it has been clipped you must also change the css.width and css.height values of the layer as well (only for IE because Netscape cannot change the true dimensions on the fly).

The Dynamic Layer Object API

Initialization
DynLayerInit() Function
Properties
Using Layer-based Events
Hide, Show, Move Methods
Slide Methods
Clip Methods
Write Method
css() and DynLayerTest() Functions
Download: dynlayer.js
View Source: dynlayer.js



Home
Next Lesson:
Geometric Objects


copyright 1998 Dan Steinman