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] Bottom to Top


This extreme lightweight extension allows you to move a layer from the bottom of the browser screen to the top of the active area and fix it there.


You can setup a margin for the bottom position and another margin for the top position; also a minimum vertical position can be entered for the layer when the browser is resized, allowing an initial minimum "readable" area.

Cross-browser and backward compatible!


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in version 1.3

- New 'progressive full width' mode.

* New in version 1.2.1

- The target object position can be calculated from the bottom or from the center.
- The core has been moved to an external file for a faster navigation between pages.
- Minor code tweaks.

* New in version 1.2

- New 'Fixed mode' allows to handle the full-width behavior that preserves horizontal offsets or overrides them.
- Improved startup process to workaround an address-bar gap on mobiles.
- Reduced rendering issues on older/slower mobiles.
- Fixed an introduced width issue on some RWD schemes.

* New in version 1.1

- New 'lean-out from bottom' feature.
- More viewport offset variants.
- Auto box-model support/calculation.
- Improved RWD support with enhanced object resize.
- Improved object handling (can be a text, an image, a layer or almost any other object - depending on its functionality).
- Fixed an inconsistency when the fixed layer on top is released and the page has horizontally been scrolled.



How to use?

1. Design a layer as you usually do; this layer will be used for the bottom and top areas.
2. Drag and drop this extension and enter the layer id.
3. Optionally, you can setup additional properties such as margins and the virtual min-top feature.
4. Preview or publish.

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


new shop with