CLIPPING A LAYER
|
|
ULMA dynamic clipping of a layer
|
These scripts rely on a library known as ULMA, linked further on. However if you want the same scripts as entirely self sufficient units of code that rely on no additional library of codes, you can find them at:
Self Sufficient Css Clip Functions
All the clippers you can conceive are here. I am not aware of another website that provides you with so comprehensive scripts, documentation, and bug warnings for so complex scripting procedures, subroutine, algorithms, or GUIs. Always keep the website commented Url and you're safe from possible copyright issues. They all rely on my ULMA approach: therefore you need to load somewhere after your body tag either an external javaScript files which holds all the ULMA functions, or you have to paste all of them inline with a <script> tag soon after the tag body (and also after you've defined your layer): for all the detail and the ULMA codes, please refer to my ULMA [Universal Layer Management] Procedures: you can neither understand nor use these scripts if you are not using ULMA procedures. Once you have pasted these scripts and you have loaded also your ULMA procedures, all you have to do is:
- Initialize a global var for each layer you want to manage (be sure you've defined your layers, with a consistent set of Css properties), such as
var foo; whereas foo is a placeholder for whatever name you want to give to your layerManager
- Initialize the new layerManager:
foo=new layerManager('foo', 'layerName'); You can add arguments if you want - see the ULMA documentation.
- Abilitate it:
foo.abilitate()
- Given a method (a function, that is) you want to use, such as (to pick one among the ones I feature here) offBLTR, you must initialize it like a new method for the given layerManager prior to run it:
foo.enable("offBLTR")
Such call to the ULMA built in method enable() when obviously performed upon an exisiting and abilitated layer Manager, initializes each function string name/s passed as argument/s as new manager Methods.
- To run:
foo.offBLTR.run()
- Method names assigned by and large as follows: B=bottom, T=top, L=left, R=right.
When two capitalized letters are met, means from X to Y (LR means from Left to Right); when a lot of four letter are involved, they pinpoint corners: from BR (=Bottom/Right corner) to TL (Top/Left corner).
- To change parameters: you can set prior to call to run:
- modify speed: statement example:
foo.myCLIPMethod.speed=500 (500, or whatever)
- modify amount of clippings:
foo.myCLIPMethod.setAmount(18); (18, or whatever).
Or, alternative: you declare the amount foo.myCLIPMethod.amount=18;
- modify size: it affects only methods that include the word slice in their names; statement example:
foo.myCLIPMethod.size=50 (50, or whatever)
- Once performed and finished a clipping that made your layer shrink, its dimensions are changed. Upon exiting the scripts they won't be reset to their original status. Do keep this in mind, for a layer that shrank, is no longer visibile, and if you try to manipulate it, you won't see it until you restore it to its wholesome dimensions.
Anyway, if you want to resize automatically your layers to their original dimensions as soon as your functions have been performed, pass the following parameter (case sensitive) as number 1:
foo.myCLIPMethod.resizeOnExit=1;
- foo.myCLIPMethod.invisibleOnExit=1; makes your layer invisible upon finishing the clipping process.
- property foo.myCLIPMethod.showSoon: leave it unaffected. If set to zero, does not toggle on the layer visibility. In all other cases (which implies not to set it at all, neither as zero!) toggles on visibility by default:
foo.myCLIPMethod.showSoon=0 //doesn't toggle automatically on the visibility
If you do not set it at all or set it to something different than zero, toggles on. It's a feature you're not likely to use, just keep in mind it's there!
- now you can call run() onto your method.
Remember, when you call in these methods, you always have to set amount and speed prior to run (example: foo.methodName.speed=200), and this because both their defaults are very small/slow (default amount: 1 pixel a second!): remember, when you set the amount, to do it either by calling in foo.methodname.setAmount(20) with an argument or, if you first do foo.methodname.amount=20 then you do have to call in foo.methodName.setAmount() without arguments anyway. If you're running a method that implies a slice (has the word slice in it) set also foo.methodName.size=30 or whatever value for its default is 1! Then you run. So on the whole:
- You initialize the method as a new managerMethod.
- You set the amount, preferably by setAmount; example:
foo.methodName.setAmount(20)
- You set the speed; example:
foo.methodName.speed=250
- You set the size; example:
foo.methodName.size=30
- You can set as well the
foo.methodName.resizeOnExit=1 or the
foo.methodName.invisibleOnExit=1 or both, or none: it entirely depends upon your plans. The default values of these properties are anyway the most likely to suit most needs.
- Now you run:
foo.methodName.run().
Alternatively, the more convenient way is to set all your properties by using the setAttributes ULMA built in function: here's the formula for your convenience, just change the numerical values you want to change (personal suggestion: change only speed, amount, size), and obviously modify the placeholders foo and myCLIPMethod
foo.myCLIPMethod.setAttributes(
"speed", 250 ,
"amount", 10 ,
"size", 30 ,
"invisibleOnExit", 0 ,
"resizeOnExit", 0 ,
"showSoon", 1 ,
"startClipBottom", 0 ,
"stopClipBottom", 0 ,
"startClipLeft", 0 ,
"stopClipLeft", 0 ,
"startClipTop", 0 ,
"stopClipTop", 0 ,
"startClipRight", 0 ,
"stopClipRight", 0 /*no comma here!*/
);
//when ready: foo.myCLIPMethod.run()
Do not be mistaken: some clipping behaviors are not issues: clippings as their standard has been set just follow a logics that might not be so obvious. Don't know much about history - don't know much about biology - don't know much about clippings? Rulez of thumb:
- TOP: adding value X to top would make the layer invisibile from top to value X (from top 0 until X: invisible)
- RIGHT: adding value X to right would increase the visibility of the layer from left to right (from left 0 until X: visible).
- BOTTOM: adding value X to bottom would increase the visibility of the layer from top to bottom (from top 0 until X: visible).
- LEFT: adding value X to left would make the layer invisibile from left to value X (from left 0 until X: invisible)
Known issue: in Opera (at least till version 7.23) we have a twofold issue: firstly, javascript statements in Opera should not carry navigation to anchors or they won't be executed (yeah), thus since this form automatically scrolls to the test section upon running a test, Opera won't comply. Besides, Opera would corrrectly clip the layer, yet will still show its imprint even after it has clipped it, with the effect the border of the layers will clip gradually, but its "ghost" imprint will persist - clearly enough dowright a couple of Opera bugs.
|