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)
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)
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 it is somewhat difficult to understand what's going on so I recommend using Netscape to get an idea of what's going on.
| Home | Next Lesson: Geometric Objects |