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.
Note: although the clip methods are now automatically assigned to all DynLayers, you may still have to call the clipInit() method to initially clip the layer so that IE will have base clip values to work from. I will be looking into this further to hopefully remove this necessity.
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)
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:
Example: dynlayer-clip1.html [source] - fvariations 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).
| Home | Next Lesson: Write Method |