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] Align Object


This lightweight extension is focused on adaptive designs and allows you to align multiple objects with different parameters and within a same dynamically sized layer.
Sample project included.

- Supports nine alignments with margin bounds and offsets.
- Automatically detects the parent object/container sizes when the browser is resized and
  accommodates the affected child objects.
- Each object can define minimum sizes for its parent container; when multiple objects
  are contained within a same layer, the layer will take the best boundaries selection.
- Multi-instance, crossbrowser, crossplatform and backward compatibility.


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in version 1.2

- Improved elements centering/handling based on a better detection of the container parameters.
- Improved behavior with [rz] Position Object Size when both instances has same targets.

* New in version 1.1.1

- Smoother startup.
- Improved center alignment on complex scenarios.

* New in version 1.1

- New 'breakout' alignment modes to support layers with their variants and their own formats (useful to have a default
  container alignment and manipulate only the needed elements; allowing a better performance).
- Improved min-width and min-height properties; now applies also to the body (there is no need to create a layer and
  move into it the involved elements to align).
- Improved image elements handling that workarounds pixels gaps on some browsers.
- The produced mark-up has been optimized.
- The core has been moved to an external file for a faster navigation between pages.
- Minor core improvements.

* New in version 1.0.0.3

- Workaround for iOS and Android refresh issues causing misalignments.
- Workaround for an unstable Chrome issue aligning centered objects in complex scenarios.
- Improved hidden objects handling.
- Minor performance tweaks.

* New in version 1.0.0.2

- Faster alignment startup.
- Improved complex objects alignment (like nested layers and/or other objects with scrollable content).
- Improved text objects alignment when using an external font source (like Google fonts).
- Improved stretchable texts alignment.
- Fixed an implementation bug in Firefox, Chrome and Opera browsers.

* New in version 1.0.0.1

- Added support for css-based objects/breakpoints scenarios.



How to use?

1. Design a resizable layer as you usually do with its contained objects.


   - This is the context and it can be: layers, masterobjects, body.
   - The objects can be: almost whatever you want.


2. Drag and drop the extension.
3. Open the extension dialog box and setup the parameters for the objects you want to align.
4. Preview or publish.

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with