Javascript Dhtml. Clip & Slide: The Complete 36 Slice And / Or Slide Layer Animations

»»» shrink text ««« ««« enlarge text »»»

OBJECTIVE: provide all the possibile dynamic ways to slice (clip) and/or slide a layer of an html web page onto another layer.  
 
This is a whole family of scores of functions: each of them emulates a class.  
You do not need them all: you may pick only the one(s) that you really mean to run on your actual pages:  
 
 
 
INPUTS: for all the functions these rules apply:  
 
id mandatory.  
This argument must be the id assigned to the layer.  
 
speed optional, defaults to 100 milliseconds.  
This argument is a number representing the speed in milliseconds of the clipping animation.  
 
amount optional, defaults to 1 (pixel).  
This argument is a number and determines how many pixels must be clipped at every round of the animation.  
 
size optional, defaults to half the width or height of the layer.  
This argument is a number and affects only the slicing clippers.  
 
onExitOptionalFunction optional, defaults to nothing.  
This argument is either number zero to bypass it, or number 1 to use a built in function that upon exiting firstly makes the layer invisible and then restores its original clipping values, or a function crafted by yourself.  
In this last case such function must be passed not as a string (that is, not in between quotes) but as the name of the function without the ending round brackets. If passed as such, this function crafted by yourself will be automatically invoked upon exiting the animation, and it accepts one argument - such argument will be passed to your function as the object that the method you used created upon initialization so that you can call from it all the properties such object holds as described in the next section, for instance you could craft a function like:  
function myFunction(object){//an example custom function  
object.setClip( object.originalClip ); //reset!  
alert( object.layer.style.visibility );  
}  
For the clippers that make a layer appear, the built in function merely returns false, because I presume that if a layer has been clipped so to make it appear rather than disappear, you do not want it to be to be set to invisible and restored to its original clip values once the process is completed.  
 
stop1: an optional value to determine at which width to stop.  
If you want to bypass this argument, please do not use zero but the Javascript keyword false  
 
stop2: an optional value to determine at which height to stop.  
If you want to bypass this argument, please do not use zero but the Javascript keyword false.  
 
PROPERTIES:  
 
id: it is the layer id.  
 
layer: it is the layer node itself as an object, grabbed via getElementById.  
 
amount: a number representing the amount that is clipped at each iteration.  
 
size: a number, for the sliced layers, representing the size the slice must have (if the clipper clips top bottom, this size will represent a height, or if the clipper clips left right, this size will be a width).  
It defaults to half the width of the layer for the slicers that slice (clip) horizontally and to half the height of the layer for the slicers that slice (clip) vertically.  
 
speed: a number representing the milliseconds assigned to the animation speed.  
 
originalClip: the original clip of the layer as an array of four numbers:  
[top, right, bottom, left]  
 
originalLeft: the original left position of the layer (parseFloat it before use).  
 
originalTop: the original top position of the layer (parseFloat it before use)..  
 
getClip: a built in function: it returns the clip values.  
 
setClip: a built in function: it clips.  
 
stop: a built in function.  
 
timer: a variable holding the timer upon which a Javascript setInterval is assigned.  
 
stop1: an optional value to determine at which width to stop.  
If you want to bypass this argument, please do not use zero but the Javascript keyword false  
 
stop2: an optional value to determine at which height to stop.  
If you want to bypass this argument, please do not use zero but the Javascript keyword false.  
 
last: a string representing the name of the last clipper function run on it (it might be useful to know).  
 
onExitOptionalFunction: this is a function, crafted by yourself (although there is a default one as you will see) that will be called upon exiting the animation (that is, when the ending condition is met). It can be useful if for instance upon exiting you want the layer to be set to invisible and its clipping values restored to the initial ones. By the way, the css visibility property of a layer will be automatically set to visible every time an animation starts.  
RETURN: nothing.  
CAVEATS: Each layer that is meant to be clipped must have an ID declared.  
Upon running any of these functions onto a layer, the function will create (or recreate) a global (that is, window scoped) variable for each layer whose name will be in the shape: layerID_clipper whereas layerID will be the id assigned to the layer.  
 
If you want to start the clipping process on a layer that is already partially clipped at the beginning of the animation, this would cause no malfunction. However, you must define this clipping starting setting within the style property of the HTML tag, and not in any external style sheet.  
 
Your functions should not be called if your html layers are not fully parsed into the browser memory already.  
 
Example of use, with suitable html:

<div style="position:relative;width:406px;height:206px; border:#ff0000 3px solid; background-color:#dddddd;">
Container layer (relatively positioned) 400 x 200
	<div id="layerID" style="position:absolute; top:0px;left:0px; width:400px;height:200px; z-index:2; background-color:#ff3a0c; color:#000000; border:#000000 1px solid;padding:2px;">
	<span style="float:right; width:50px; height:200px;background-color:#0000ff;"></span>
	Contained layer (absolutely positioned) for css clip animation testing.<br />
	Dimensions: width 400px, height 200px
	</div>
</div>

<script>
/*do INCLUDE your function of choice here, in our case here would be psliceTB2 and then:*/

psliceTB2( 'layerID', 50/*speed*/, 3/*amount*/, 0/*size*/, 1/*or a function pointer*/, false, false ); 
</script>

Remove colors This text is protected by Copyright and cannot be reproduced, either in totality or in part, without the consent of the author. Also derivative works cannot be produced without the consent of the author.  
Minor excerpts may be quoted as long as a clearly readable link leading to this file is put in place soon after or soon before the quotation. Only the author has the right to reproduce in its totality this work on other servers.

Browse by category? » Select All topics Arts and Literature Freemasonry History In english In italiano Internet Philosophy Politics Psychology Religion Science Sociology

This subscriber has snippets too: Read the snippets. Shoutbox: 103 reviews: 153 Visitors: 5,238
Overall visits to all the topics: 665,519
Daily average (Calculated from the website subscription day): 273.09 Optional sorting commands:
Normal order: click here
Order by amount of visits: click here
Order by most recently commented (attention: this will exclude from the returned results all the entries that have no comment): click here
Order by highest amount of comments (attention: this will exclude from the returned results all the entries that have no comment): click here
Order by vote (attention: this may exclude from the returned results all the entries that have no votes): click here
Current order: normal Showing topics: 1, 10
Available total (with or without comments): 57

Javascript Dhtml. Clip & Slide: The Complete 36 Slice And / Or Slide Layer Animations Visitors: 5,238 Comments: 0 Temi In Classe: Il 42esimo Parallelo Del Giovane Holden. Un Adolescente Scrive Sull' Avvenire Delle Nostre Scuole. Visitors: 6,118 Comments: 0 Il Sangue Del Premier: Berlusconi E L' Episodio Tartaglia Visitors: 6,541 Comments: 0 FPOS: First Person On Scene: Meanings And Worth. Visitors: 9,414 Comments: 0 Whose Oil Lust? A Lack Of Stones: The End Of The Oil Age And Its Convulsions Visitors: 13,199 Comments: 0 La Democrazia Forte E La Confindustria Inesistente: Linee Programmatiche Di Conflittualita' Lobbistica Visitors: 8,814 Comments: 0 Beni E Diritti: Analisi Critica E Un Possibile Modello Di Entitlement Failures E Paradosso Martinez In Ralph Dahrendorf Visitors: 15,070 Comments: 0 THE MEPHISTOPHELEAN + 0.1: SPECULATIVE FREEMASONRY AND OPERATIVE FREEMASONRY IN THE SQUARED DECLENSION Visitors: 12,613 Comments: 0 IL MEFISTOFELICO + 0,1: MASSONERIA SPECULATIVA E MASSONERIA OPERATIVA DECLINATE AL QUADRATO Visitors: 12,942 Comments: 0 FROM HANS DRIESCH AND ERNST HAECKEL TO FREUD: POLITICS NEGOTIATION CORRUPTION: A TRUE POLITICIAN NEVER LIES OR CORRUPTS Visitors: 16,641 Comments: 1