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.
- 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.
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.
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.