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] Paired Half Scheme


Organizes the page in two areas, side panel-content and header-content depending on the screen size.
Converts a set of layers into "floating" set of structured information.

Some features:

- Simple standard layers in the workspace are converted in an organized scheme.
- Header and panel can be different layers or even just one layer.
- Layers sizes are automatically uniformed according to their contents.
- Smart fixed layers for side panel or -optionally- the header to prevent hidden content.
- Smart fixed layers for the content when it is shorter than the side panel and/or the browser size.
- Just one scrollbar does all the work in case of overflowed content (no doubled scrollbars!).
- Min-width/height sizes gotten from the workspace with breakpoints support.
- Max-width/height sizes supported for both the side panel and the header.
- Horizontal and vertical alignments.
- Optional fixed header or fixed.
- Selectable 'left' or 'right' position for the side panel.
- Layers contents alignment (can be different when in landscape or portrait modes).
- Vertical expand option for the embedded content-layers (can be different when in landscape or
  portrait modes).
- Specific (exceptions) objects alignments in their holders (can be different when in landscape or
  portrait modes).
- RTL support.
- Lightweight, browsers compatibility, no jQuery needed.

...and more!


HTML 4.01 Transitional
W3C compliant


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

* New in version 1.1

- Footer handling that "pushes-up" the side panel progressively when it becomes viewable on scrolling the page content.
- Selectable horizontal alignment for the footer.



DEMO


How to use?

1.a. Design the side panel for each breakpoint, taking into account that this will be the default min-size
      for that element.
1.b. Design the header for each breakpoint, taking into account that this will be the default min-size for
      that element.
1.c. The header and the panel can optionally be the same element (just change the orientation/design
      for the selected breakpoint).
2.a. Design the layers for the contents as you usually do, taking into account that this will be the
      default min-size for them.
2.b. All the layers should be standard ones, the extension does all the work to accomodate them
      as floating layers.
3.   Drag and drop this extension and enter accordingly the names of the elements.
4.   Optionally select the alignment for all the involved elements.
5.   Optionally select how will them be resized, the max-size, the units for the paired areas and
      the scheme.
6.   Select the breakpoint to change scheme (side-panel-contents, header-contents).
7.   Preview or publish.

Enjoy!

Notes:

- IE5: not supported.
- IE7 RTL mode: not supported.
- IE7: not recommended.
- IE8 and later: supported.
w3c compliant
© 2012-19 by MAGNA web studio • all rights reserved


new shop with