magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Layers  (also called "[rz] Scrolling Layers" has been deprecated and replaced)

         and

       [rz] Layers II  (more info will soon be available)


This set of extensions allows you to easily manage layers and play a bit with them.
You can have a set of layers "widgets-like" and easily show/hide/scroll them.
Sample project file included.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* NEW in version 2.0.0.1

This minor update resolves an unstable IE7 bug in nested hidden layers.
Fixed an introduced bug in hover/out handler.
The final HTML output is even smaller.
Loop extension is automatically shown/hidden/stopped when it is attached to OCM, OCPN.
Loop extension has an improved method to play/stop when it is attached to OCM, OCPN, PN, PND, PND2.
Advanced: new structure "object-period-function" for functions: MyObject.related_function(); (see below).
Advanced: new structure "object-period-value" for parameters: MyObject.related_status; (see below).
Advanced coding for custom startup: MyObject_some_startup_value = X; (see below).

* NEW in version 2.0

All library files were optimized and moved to external and centralized files; only small setups are in the final html. This means: faster loading, less bandwidth, smaller final html.
Optimized images preloading for smoother navigation.
Push icon images (you can leave them blank, but they will be required in next versions; however, you can always reuse the same image also within the same extension).
Three exit modes in modal layers: a) By programming (see the instructions below), b) Clicking anywhere outside the modal layer or c) Pressing [Esc].
Improved sequences and steps in loops.
Direction for backward or forward cycles in grouped layers.
Optimized [rz] Button extension included in the pack, reducing the page loading by reusing common code.
Based on jQuery 1.9 with jQuery 1.7 backward compatibility.
[rz] Layers (lib) optimizes the library files loading, with an optional alert in the case that some file is missing.
Full backward compatibility with [rz] Layers 1.5+ free version.
Deprecated properties were removed.

Attention:
The [rz] Layers II free test version has a small banner, you can contact here: www.magnawebstudio.com for removal.
You can downgrade to v1.5+ whenever you want, just keep a copy of your previous zip file for reinstall purposes.

* NEW in version 1.6.6

New options in Open/Close synchronized:
- "Pseudo" modal open mode according to its z-order stack, this allows modal or relative modal layers.
- The possibility to close a modal layer by clicking outside its boundaries (this feature can be enabled or disabled).
- Resizable icons feature when possible (the extensions that have only one icon such as oc, oc2, etc).
- Clip and blind effects added in open/close sequences.
- Customizable tooltips; requires [rz] Tooltips v1.0.6+
- The option to get or not the focus when the button is clicked (when possible, depends on the browsers/versions).
- The images used for the buttons now aren't draggable (when possible).

* NEW in version 1.6.5

General:
- Improved mouse and keyboard handling to "onfocus", "onblur", "onmouseover" and "onmouseout" events with tab and enter keys (includes workarounds for Chrome and IE).

New behavior in Open/Close synchronized:
- Improved "open on hover" and "deactivate close" sequences.
- Move the opened layer on top of the screen elements.
- Move the open/close icons on top of the opened layer.
These features allow to build sophisticated menus! (also separated ones in the same page - and can be placed in masterpages.)

Loop:
- Improved sequence handling "onstop" and "onplay" events.

* NEW in version 1.6

New behavior in Open/Close synchronized layers:
- open on hover: triggers the open sequence when the mouse is over the open icon; no click required.
- deactivate close: this option implies that the only way to close the current opened layer is opening another synchronized layer.
Now the scrolling layers may act as a sophisticated menu!
(at this stage I must thanks to supersonicct and bendigo, for their patience and their fresh and advanced ideas that contributed to make these extensions set what they are today; please forgive me if forgot to mention someone else that for sure in a way has contributed as well.)

New easing effect (with 30 variations) added in each extension for visual bouncing/elastic movements.
The following chart may be useful to understand these variations: http://jqueryui.com/demos/effect/easing.html

* NEW in version 1.5

Hover event fixed (minor visual issue when other jQuery objects are present in the same page).
User-events support added.
Automatic/manual start-up property deprecated (improved start-up process).
(lib-1) and (lib-2) extensions were deprecated and excluded, now centralized in one (lib) extension.
Images preloading for smoother navigation.
The extensions with go-previous and go-next features, now include the onfirst and onlast behavior; i.e: on first, go last or stay on first; on last, go first or stay on last.
New extension was added: "loop".

New available functions for events in standard text links:

MyObject_play(): starts a "loopable" layers cycle.
MyObject_stop(): stops a "loopable" layers cycle.

MyObject_paused: read/only, indicates the current status of a "loopable" layers cycle.

* NEW in version 1.4

"Pushed button" 3D effect (also works in Internet Explorer).
New extension: [rz] Button, the complement for the [rz] Layers extensions scheme.

* NEW in version 1.3

Cleaner code.
Better calculations for slow animated layers.
New "[rz] Layers (oc2)" extension (see the description below).
Deep nesting support.
Automatic layers startup option.
Simplified startup mode (open-icon and close-icon visibility properties were deprecated, now is centralized in one property).
New onfocus/onblur implementation for a better keyboard experience when opening/closing layers (when an open/close button get the focus via the tab key and the user press enter -so the proper event/action is triggered-, this button won't get the focus).
New extension was added: "pagination".

* NEW in version 1.2

Normal and hover images for the controls (open/close/previous/next/default/shake).
When a control (open/close/previous/next/default) receive the focus (via the [Tab] key), you can decide for the dotted box (it means the default browser's indicator) or not (only the hover image).

Available functions for events in standard text links (
DEPRECATED, SEE BELOW):

MyObject_open(): open an individual layer or a layer from a group.
MyObject_close(): close an individual layer or a layer from a group.
MyObject_switch(): open or close an individual layer or a layer from a group - if a layer is opened, then will be closed and viceversa.
MyObject_goto(n): go to a specific layer number from a group (pagination).

MyObject_curr_layer: read/only, indicates the current shown/hidden layer.
MyObject_opened: read/only, indicates the opened/closed layer(s) state.
MyObject_default_layer: indicates the start-up/go-to default layer.

Note: Due to internal changes, (only) open-normal/hover and close-normal/hover icons must be reentered.

* NEW in version 1.1

Now the "open/close" and the "open/close/more" extensions can have a base layer or "fixed", also called "Layer #0".
It can receive particular open/close behavior; once opened, remains fixed until the close icon is clicked.
This may be useful when you want to have scrollable layers (some transparency is required) with a fixed background; and, of course, this background with its particular open/close behavior.
New extension was added: "open/close/previous/next" with the new base layer included!



How to use?

Depending on the selected extension (ocn/pn/pnd/pnd2/ocpn), you must have all the layers named with a common prefix, that identifies the group they are belonging to, then, numerated consecutively as follows:

  group-a-1 (prefix 'group-a-', with 3 layers)
    group-a-2
    group-a-3
  group-b-0
(prefix 'group-b-', this group has a fixed background and 2 layers)
    group-b-1
    group-b-2


Then, if applicable (if the selected extension manages a group of layers), indicate the number of layers that be managed.
For an optimal effect, the set of layers belonging to the same extension/purpose should be at the same x/y coordinates and have the same size.


[rz] Layers (oc)
Open/Close
This extension allows you to open and close a layer.


Advanced/custom programming available functions (i.e. for events in standard text links - or any other object that supports events):
MyObject.open() - open the layer
MyObject.close() - close the layer
MyObject.toggle() - open the layer if it is closed or close the layer if it is opened
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.opened - read-only: if its value is true, the related objects are opened; if false, the related objects are closed

[rz] Layers (oc2)
Open/Close (extended version)
This extension allows you to open and close a layer synchronously within a group.
Just name the group to which the layer belongs to.


Advanced/custom programming available functions (i.e. for events in standard text links - or any other object that supports events):
MyObject.open() - open synchronously the grouped layer
MyObject.close() - close the layer
MyObject.toggle() - open synchronously the grouped layer if it is closed or close the layer if it is opened
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.opened - read-only: if its value is true, the related objects are opened; if false, the related objects are closed

[rz] Layers (ocm)
Open/Close/More
This extension allows you to open and close a group of layers.
Once you click and make visible the first layer, you can scroll through the other layers.


Advanced/custom programming available functions:
MyObject.open() - open the layer
MyObject.close() - close the layer
MyObject.next() - open/slide the next layer
MyObject.toggle() - open the layers set if it is closed or close the layers set if it is opened
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.opened - read-only: if its value is true, the related objects are opened; if false, the related objects are closed
MyObject.curr_layer - read-only: indicates the current shown layer

Programatically custom startup:
MyObject_start_layer - the layer to be first opened

[rz] Layers (pn)
Previous/Next
This extension allows you to go to the previous or the next layer (belonging to the same group).


Advanced/custom programming available functions:
MyObject.prev(force_loop) - open/slide the previous layer
MyObject.next(force_loop) - open/slide the next layer
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.curr_layer - read-only: indicates the current shown layer
Optional parameter "force_loop": you can startover the cycle also when you selected "stay on last" and/or "stay on first"; if the loop extension is attached, it also won't be affected unless this parameter is empty.


Programatically custom startup:
MyObject_start_layer - the layer to be first opened

[rz] Layers (pag)
Pagination/Previous/Next
This extension allows you to go to the previous or the next layer (belonging to the same group).
Also has direct links to each page (like a panel showing access to the available layers).


Advanced/custom programming available functions:
MyObject.prev(force_loop) - open/slide the previous layer
MyObject.next(force_loop) - open/slide the next layer
MyObject.goto(layer_number) - open/slide the specified layer
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.curr_layer - read-only: indicates the current shown layer
Optional parameter "force_loop": you can startover the cycle also when you selected "stay on last" and/or "stay on first"; if the loop extension is attached, it also won't be affected unless this parameter is empty.
Required parameter "layer_number": programmatically go to the specified layer.


Programatically custom startup:
MyObject_start_layer - the layer to be first opened

[rz] Layers (pnd)
Previous/Next/Default
This extension allows you to go to the previous or the next layer (belonging to the same group), clicking on the "go default" icon, the first layer is shown.


Advanced/custom programming available functions:
MyObject.default() - go fast to the default layer
MyObject.prev(force_loop) - open/slide the previous layer
MyObject.next(force_loop) - open/slide the next layer
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.curr_layer - read-only: indicates the current shown layer
Optional parameter "force_loop": you can startover the cycle also when you selected "stay on last" and/or "stay on first"; if the loop extension is attached, it also won't be affected unless this parameter is empty.


Programatically custom startup:
MyObject_default_layer - indicates the start-up/go-to default layer, usually is the first opened
MyObject_start_layer - the layer to be first opened

[rz] Layers (pnd2)
Previous/Next/Default (extended version)
This extension allows you to go to the previous or the next layer (belonging to the same group), clicking on the "go default" icon, the first layer is shown.
Also an object belonging to the first/default layer is shown or hidden when it is active or not.


Advanced/custom programming available functions:
MyObject.default() - go fast to the default layer
MyObject.prev(force_loop) - open/slide the previous layer
MyObject.next(force_loop) - open/slide the next layer
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.curr_layer - read-only: indicates the current shown layer
Optional parameter "force_loop": you can startover the cycle also when you selected "stay on last" and/or "stay on first"; if the loop extension is attached, it also won't be affected unless this parameter is empty.


Programatically custom startup:
MyObject_default_layer - indicates the start-up/go-to default layer, usually is the first opened
MyObject_start_layer - the layer to be first opened

[rz] Layers (ocpn)
Open/Close/Previous/Next
This extension allows you to open and close a group of scrollable layers.
You can go to the previous or the next layer (belonging to the same group).


Advanced/custom programming available functions:
MyObject.open() - open the layer
MyObject.close() - close the layer
MyObject.prev(force_loop) - open/slide the previous layer
MyObject.next(force_loop) - open/slide the next layer
MyObject.toggle() - open the layers set if it is closed or close the layers set if it is opened
MyObject.busy() - if returns true, the object is busy triggering other sequences
MyObject.opened - if its value is true, the related objects are opened; if false, the related objects are closed
MyObject.curr_layer - read-only: indicates the current shown layer
Optional parameter "force_loop": you can startover the cycle also when you selected "stay on last" and/or "stay on first"; if the loop extension is attached, it also won't be affected unless this parameter is empty.


Programatically custom startup:
MyObject_start_layer - the layer to be first opened

[rz] Layers (loop)
This add-on converts "go to previous/next layer" extensions to a "loopable" cycle.
Can automatically or manually start the cycle. Just point to the extension to be "converted".


Advanced/custom programming available functions:
MyObject.play() - start the looping sequence
MyObject.stop() - stop the looping sequence
MyObject.toogle() - start the layers set looping if it is stoped or stop the layers set looping if it is started
MyObject.curr_layer - read-only: indicates the current shown layer

Programatically custom startup:
MyObject_start_layer - the layer to be first opened

[rz] Layers (shake)
This extension allows you to shake a layer when you click on an icon or the mouse is over it.
It is useful when you need the user's attention.

[rz] Layers (btn)
This lightweight extension allows you to setup an image button with ease.
Similar to the rollover extension; no jQuery effects, but this image button can receive focus, support events and many link options.

[rz] Layers (lib)
This extension must be included in the page you are using the listed extensions.
Just enter which code you want to include or remove.
You can disable the missing-library alert in your final site.
That's all.

All these extensions allow you to customize the images, positions, tooltips, etc.

Hope you can find them useful.
Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with