[rz] Align Object *** UPD 2019-Apr-17 ***
Posted: Fri Aug 22, 2014 6:54 am
[rz] Align Object v1.3.2
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.
DEMO
HTML 4.01 Transitional
W3C compliant
* New in version 1.3.2
- Added support to cssmenu object with submenus.
- Fixed an instability in "min-size" parameters.
- Minor code improvements.
* New in version 1.3.1
- Added support to panel-layers.
* New in version 1.3
- Minor code tweaks.
- New extension: [rz] Align Object (RWD); it allows to align objects in their containers and supports different alignments in different breakpoints.
* 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: 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!
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.
DEMO
HTML 4.01 Transitional
W3C compliant
* New in version 1.3.2
- Added support to cssmenu object with submenus.
- Fixed an instability in "min-size" parameters.
- Minor code improvements.
* New in version 1.3.1
- Added support to panel-layers.
* New in version 1.3
- Minor code tweaks.
- New extension: [rz] Align Object (RWD); it allows to align objects in their containers and supports different alignments in different breakpoints.
* 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: 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!