MAGNA web studio • Developers' Corner

BS"D

magna

web studio

Loading.
Please wait...

WB-Developers' Corner

       [rz] Drag Layers

This extension allows you to manage and drag floating layers synchronously in your page.

Some features:

Custom images, colors, fonts and sizes for the caption bar.
Keyboard handled layers: tab / focus, arrow keys / move.
You can have as many layers you want in the same page, all of them will automatically be stacked!
Tested in Chrome, FireFox, Opera, Safari, Maxthon, Lunascape, IEquirks, IE6, IE7, IE8 and IE9, iPhone and Android tablets;

...and more!

HTML 4.01 Transitional
W3C compliant

DEMO

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

* New in version 1.0.0.2

- Added RWD support.
- Improved bidirectional support.
- Bar orientation for caption and close button location.
- Deprecated and removed the [rz] Drag Layers (lib) extension; it is not needed anymore and now all is centralized in
just one instance.

* New in version 1.0.0.1:

- The core was optimized and improved for (even) better performance.
- Push colors added to the close button.
- Solved an IE10+ background issue.
- Added "external accessibility", see the available functions at the bottom of this document.

How to use?

- Design your layer (or all the layers you need) as you usually do.
- DEPRECATED and removed: Drag and drop the extension core: [rz] Drag Layers (lib).
(Doesn't matter in which part of the page.)
- Now, for each layer you want to convert it to float and draggable, add the [rz] Drag Layers on top
of their objects.
- Open the object properties dialog, enter the layer id that contains the extension, optionally, you can
set up your desired customization.

Extended functions for layers:

document.getElementById('MyLayer').open();        to open/show a stacked layer.
document.getElementById('MyLayer').close();      to close/hide a stacked layer.
document.getElementById('MyLayer').restore(); open/show the layer on top of
                                              the stack and in its original position.
document.getElementById('MyLayer').moveTop(); move the layer on top of the
                                              stacked layers.

just replace 'MyLayer' with the actual object id.

Enjoy!

new shop with