SCRIPTING:
Victoria Fuller
CASCADING TILED LAYERS
Given whatever amount of layers, cascade and tile them in a powerful way by setting:
Where to dispatch them
Whether to show them slowly or all of a sudden
How to overlap and tile them
Which direction they must cascade
January 2002
{ @ }
The model above is Victoria Fuller
LOADS OF VICTORIA FULLER ON THE NET

INITIALIZING STEPS
How to:
1] Initialize the function to display the cascading the way you prefer
2] Initialize layers
3] Initialize the script and include it in the page
A powerful script, which runs on all browsers, from Gecko to NS4 to NS6 to IE, maybe with the exception of Opera.
Chagall
With this script you can cascade layers and dispatch whatever amount of them on the coordinates you prefer, making them tile: you can achieve this goal either:
  • Instantly
  • By a timeout, so that each layer will appear at its own time (you could custom whatever type of milliseconds, since timeouts are counted in milliseconds thus 1000= a layer at a second: but remember that timeouts lower than 250 milliseconds would eventually crash Netscape 6, at least until current subversion which is 6.2)
You can thus provide a lot of features on a page like a cascade of tips: if fact once a cascade of layers has been produced, you could add to them another feature: you can make them moveable by mouse dragging using active corners like outlined in DRAG A LAYER BY AN ACTIVE SPOT.
If you are to cumulate both approaches to get an impressively strong feature, please remember:
  • All this stuff is for free but you have to keep the commented string which quotes this web domain in your script: users won't see it unless they visualize the script. I find it a fair deal considering you pay nothing.
  • The DOM detection procedure used in the drag-a-layer file is more comprehensive than the DOM detection procedure used here so you can use that one up there, if you're including also the drag-a-layer feature: in fact it is compatible (that is, in the DRAG A LAYER BY AN ACTIVE SPOT there is a section in the script in between a comment that says: //DOM detection build up:, as there is one here: you can swap the one here with the one there, and use here the DOM detection as outlined in the Drag a Layer By an Active Spot file)
You can fully arrange and custom this cascade, and you can custom the direction your layers have to tile: the main function will have the following appearance (6 arguments to pass to it, highlighted):
cascadeLayers(engagedLayers, startTop, startLeft, overlapTop, overlapLeft, overlap)
you'd have to pass 6 arguments.
Since in case you use a timeout arguments cannot be passed to a function (yeah: if you didn't know, they would not survive when the timeout runs) I have devised a method such that also some variables equivalent to the arguments you see above can be initialized in within the body of the function, so that you can custom those variables inside: variables inside a function (and not passed as arguments to it, would all survive a timeout). Whatever the case, here is how you can obtain by the function all the possible tilings:
TILING SETTINGS
engagedLayers=array of the names of the layers to tile
startTop = top position 1st layer
startLeft= left position 1st Layer
Vertical straight
set overlapLeft=0
Horizontal straight
set overlapTop=0
top left » bottom right
set both overlapLeft & overlapTop to a positive number
bottom right » top left
set both overlapLeft & overlapTop to a negative number
top right » bottom left
set overlapLeft to negative number
bottom left » top right
set overlapTop to negative number
overlap = (optional) if none, digressive overlap; if 1 progressive overlap
Quite obviously, before running the script you must have built up your own layers, that is usually <DIV> tags with a style property or a class property where you define a position:absolute, a left, a top, and I need you set also a z-index and a visibility and, most of all, an unique id. Here is a mere example code for a layer with a bit more properties that the essential ones (they all have to be initialized soon after the <BODY> tag):
<div id="layerName1" style="position:absolute;left: 0;top: 0;z-index: 3;visibility: hidden;width: 300;background-color: #ff33cc;background-layer-color: #ff33cc;color:#0000ff;padding: 2;border-style: solid;border-width: 10;border-color: #000000;font-size:20pt;font-weight:bold;">bla bla</div>
Salvador Dali
All the script goes after the <BODY> tag as well, preferably after you have set your layers; failing doing so, failing putting this script after the body tag, would cause errors.
Here is the script (don't be intimidated: it does is streamlined, much more than its appearances might suggest: could have been 7 lines long, but I wanted to take care of as many exceptions as possible before run, and I wanted it to be one script for all, for single calls to this function as well as timeout calls as well as even calls without arguments:

STARTING THE CASCADING
How to start the cascading
After you've made the steps above, you're almost done. There is now one step: you have to populate the involvedLayers array with the names of your layers: I have passed it to you in this script with some foo-foo place holders names to make you understand you have to populate it. Basically, all you have to do is this:
involvedLayers= new Array("yourLayer1name" , "yourlayer2Name")
which means:
  1. include in the array in between quotes all the names of the layers you want to cascade (their id, that is)
  2. each name separated by a comma.
If you don't want to cascade with a timeout, you're done: you just have to call the function in some fashion like below:
cascadeLayers(involvedLayers, startTop, startLeft, overlapTop, overlapLeft, overlap)
where for:
startTop, startLeft, overlapTop, overlapLeft, overlap
you have to include numbers like in the table we introduced to you above.
Or even:
cascadeLayers()
which defaults to a vertical straight cascading, with a overlapTop=60.
Rene Magritte

HOW TO CASCADE WITH A TIMEOUT
How to start A TIMED-OUT cascading
A timeout cascading requires a couple more steps or considerations:
  1. Set the global variable named isATimeoutOn to something different than -1, such as 0 or 1 or 2 or whatever but not -1:
    var isATimeoutOn=2
  2. Your timeouts must be setInterval built in method: do not use setTimeout. So, a possible call:
    var myTimer=setInterval("cascadeLayers()",1000)
    Note here that:
    • You have assigned the interval to a variable, here called myTimer.
      You do have to initialize intervals giving them a name.
    • You could not include arguments, would vanish in thin air.
    • 1000 means one second, 2000 two seconds, 250 a quarter of a second and so on
  3. Since you cannot pass arguments, you can anyway custom the values inside the function in the section after the comment: //CUSTOM SECTION: below such comment you will find all your overlapTop overlapLeft and so on inner variables: custom them there if you're running a timeout, for you cannot pass arguments in such case.
  4. Last step: assign to the variable named currentIntervalName the name of your interval timer in between quotes (in our example case such name was myTimer): it will take care of clearing your timeout when all the layers have been cascading (otherwise they would go on cascading forever or yielding errors). Example:
    currentIntervalName="myTimer"
    If you assign a value to currentIntervalName but you still keep isATiemoutOn=-1, the script would let you call one single interval. This means that you have got 3 possibilities (also if our exaple, for semplicity, provides only the first two):
    1. All layers at once
    2. One layer at a time (interval)
    3. All layers at once but after some time has elapsed before deploying them.
    All this just depends on your desire. Can you see now why my scripts are longer?
The script will take care of all the rest, including offsets of the page in case the user has scrolled (beware: this won't locate the cascade to a specific position, but to the specified position plus the page level where the user has scrolled. If you want to avoid this behavior 8that is: you want to position regardless of the level where the user has scrolled), delete the segments:
+offX
+offY
which have been highlighted in light purple in the script for this purpose!

WORKING EXAMPLE
Try cascading out
APPEARING LAYERS CAN BE DRAGGED (mouse down on their active links)
a David Perry picture
a David Perry picture
StartTop:
StartLeft:
an Arturo Jauregui picture
an Arturo Jauregui picture
OverlapTop:
OverlapLeft:
with Timeout?
no: yes:
Overlap (optional)
timeout speed:

A FEW COMMENTS ON THE INNER WORKINGS
If you wannna know more
For those who want to have a few hint on the inner workings:
  1. I first try to take care of a few exceptions: I verify if there is no first argument passed, and if no such argument is present, I try to locate automatically an array named involvedLayers whose presence is presumptive to the script: if also such array is not present, the script would get an error (means you put in place a script without any idea of what it was meant for, bud!). If involvedLayers is found, if by chance it is a string instead of an array, I set the function so that it can work also if one layer name is passed as a string (in such case would just display it to the startTop startLeft positions).
    Could the script have been shorter without this? yes. Is a shorter script a merit? maybe in someone's else house, where you save one char in the same way you would treasure one lousy penny.
  2. I then check whether isATimeoutOn higher than -1, for in such case means there is a timeout: I thus check if there is some currentIntervalName in action: that is, an interval (remember: only setInterval -not setTimeout- would work).
    If no currentIntervalName is in place I exit the function
  3. I set isATimeoutOn to zero if it was higher than -1, for if I will use it for counting purposes in the function, and I need it to start from zero. So if you set it to 300, it is ok to me, the script will take care to adjust it.
  4. We calculate the offsets and store them in the variables offX offY
  5. If no timeout is active, we engage an object, we set its z index (stack position of a layer, that is the z index) accordingly to the overlap argument: if no such argument the first layer will get the higher z index (for the global var cascadingZindex is equal to the length of the array: therefore we can provide increasing or decreasing brand new z indexes for each layer by progressively incrementing or decreasing cascadingZindex variable after the kind of overlap argument passed -zero or a positive number) and assigning such progressively changing number to the currently engaged layer.
    6. We then move the layer to the top and left specified positions (defaults to 0 and 0): each subsequent layer will be located at a position that shifts from the first top and left assigned positions by an amount equal to offestTop/offsetLeft, therefore it is enough to add to the original startTop and startLef these latest values to get the right drift.

    To make such calculation faster, we multiply by cascadeLevel the overlapTop and overlapLeft arguments: since cascadeLevel is at first equal to the array length and then increased or decreased by one at each loop to give the z index, the fact we involve it also to perform the calculations for the top and left positions assigned to each newly engaged layers, means that each subsequent layer position will result shifted by one magnitude (multiplication) degree each time, depending on the value yielded by the cascadeLevel argument

  6. If an active timeout is present we do exactly the same as above, but this time it is the same variable isATimeoutOn that makes the agency of the cascadeLevel variable involved in the previous case.

LAST THING
To tell it all
I do not want to make an already long document unduly longer.

Test the cascading layers with the machinery above. Just take notice that on each layer I added not just the drag feature as introduced at top section of this document, but also an onMouseOut and onMouseOver event handler which when the mouse is hovered above the active link of a layer, it stacks it to the foreground even if no click to engage the drag process gets preformed: in this fashion each layer can show its full contents once a mouseOver occurs, and gets back its old stack position as soon as the mouse leaves the layer active section.

We can discuss it at a later time, since it is just a simple and trivial snippet.
I bet we've both got a strong headache by now, haven't we? Let's go together to the bar to get a stronger one, then.