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] Rollover Layers


The lightweight solution to rollover layers.
Similar to the rollover extension, this one allows you to rollover almost any object!
It can also be fully handled only by the keyboard (tab keys and so on) and solves the lack of the mouseover event in touch devices.
Sample project file included.

Some features:

- Move your mouse over the slideshow panels to see it in action or press the tab key until objects
  get the focus.
- Fully keyboard support with smart mouse/keyboard detection and handling.
- Touch devices are supported to workaround the lack of mouseover event.
- The "over" layer can even have advanced scripting such as slideshows or images with effects.
- Multi-instance.
- Multi-objects-couples of ids for even easier setup.
- Automated startup.


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in version 1.2.1

- Improved core.
- Added optional blur to the effects.

Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.

* New in version 1.2.0.4

- Workaround for iOS 9 refresh issues.

* New in version 1.2.0.3

- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.

* New in version 1.2.0.2

- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.

Please note: Some browsers may not support or may partially support the above mentioned features.

* New in version 1.2.0.1

- Improved iPad time/cycle handler.
- Smoother overall performance.

* New in version 1.2

- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.

(no jQuery required)

* New in version 1.1

- Added support for RWD.

* New in version 1.0.2

- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.

* New in version 1.0.1

- Now the z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling!
  Please note: In that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.


How to use?

1. build your 'base' layer as you usually do; it can have an images, texts, slideshows and so on...
2. build your 'over' layer as you usually do; it can also have links!
3. drag and drop this extension.
4. setup the required parameters:
    a) Layer1: is the 'base' layer.
    b) Layer2: is the 'over' layer that will be shown over the 'base' layer.
5. setup the optional parameters if you want to customize some behavior details...

Enjoy!


Notes:

You can setup chained layers entering their ids separated by commas; in that case, you must enter the same number of 'base' and 'over' layers ids.

Layer1: MyBaseLayer
Layer2: MyOverLayer

or
Layer1: MyFirstBaseLayer, MySecondBaseLayer, MyThirdBaseLayer
Layer2: MyFirstOverLayer, MySecondOverLayer, MyThirdOverLayer
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with