Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Adaptive Framework

This extreme lightweight yet powerful extension allows you to convert a multi-page project into an adaptive single page with multiple resizable frameworks with ease.

Each framework is dynamically full-sized to fit the browser size preventing the objects overlap in the case that the scheme has objects/layers with relative position and size.

There is no need to add bookmarks manually, it connects with [rz] Go To Bookmarks extension with no additional work for the designer.

Each framework can have its own [rz] Full Size/Proportional Background instance and all resizable and relocatable objects react according to their context.

Sample project included.
It is advisable to spend some time studying how layers work in order to get the full advantage of this tool.

HTML 4.01 Transitional
W3C compliant


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

* New in version 1.4.2

- Smoother scroll on navigation (when using the dots).
- Smoother scroll on auto-scroll (when selected).
- Improved startup with auto-scroll enabled (auto-scroll mistakenly(?) triggered on page refresh).
- Auto-link feature detects automatically links/bookmarks to the sections and scrolls smoothly to them.
- Fixed a wrong reposition on auto-scroll when the dots navigation is not enabled.
- Fixed opacity value when auto-opacity mode is not enabled.
- Fixed a visibility issue on older browsers during startup when the instance is within a layer.
- Minor code improvements.

* New in version 1.4.1

- Dots are now placed within a highly customizable panel with colors, borders, idle/active transparency levels,
  optional pattern and more.
- Auto-opacity feature that specifies if the panel (with the "page map") changes automatically its status from idle
  to active also on scroll.
- Selectable time to enter to idle mode for the panel.
- Improved dot styles with shadows.
- Prevention for events collision resulting in a "jumping scrolling" on iOS and some Android devices when the
  'Auto-scroll' feature is enabled.

* New in version 1.4

- Each dot in the "page map" can have its image that identifies the different site areas.
- The "page map" dots can have their own size and radius also on "mouseover".
- Smooth transition effect for the dots when changing colors and sizes.
- Optional breakpoint to disable the "page map" dots; useful for small touch devices.
- Added global opacity for the "page map" (besides the opacity for dots statuses).
- Improved "within layer" handling and fixed an unstable backward issue.

* New in version 1.3.2

- The "page map" dots can have their own size and radius for the current area that is being displayed.
- Minor code tweaks.

* New in version 1.3.1

- Now the page can be horizontally centered and will not interfere with the objects not embedded within the instance
  (more design freedom for advanced schemes!).
- Fixed an events collision with the [rz] Elegant Scroll extension v1.0.5.
- Improved embedded objects alignments.

* New in version 1.3

- New improved core for better overall performance.
- New instance context detection; allows a global instance for the browser and multiple instances when
  placed within different layers.
- Extended expand modes for the embedded objects.
- Code moved to external library file.

* New in version

- Improved backward/cross-browser compatibility and faster startup.
- Each area can have margins.
- Added improved support for [rz] Block Framework.

* New in version 1.2.1

- Background color and pattern for each section.

* New in version

- Improved backward focus control compatibility.
- Improved "page map" backward compatibility.
- Improved cross-browser compatibility with [rz] Elegant Scroll.
- Improved compatibility when using a navigation menu to link to the embedded pages.

* New in version 1.2

- Auto-scroll to find the best position and scroll to after a browser resize, is now optional.
- An optional "page map" with highly customizable dots has been added to scroll quickly to a specific area of the page.
  ([rz] Elegant Scroll is recommended for additional scrolling effects).
- The "page map" has six position with custom horizontal and vertical offsets.
- The dots have size/color/space/transparency/border/radius for every status.
- Each area can be named, this name is used as the tooltips for the dots.
  ([rz] Tooltip is recommended to replace the default system tooltips and use styles that fits the design).

* New in version

- Improved startup mode (optional, prevents possible flickers in some webkit-based browsers under certain page schemes).
- Faster code.
- Fixed a sporadic vertical scroll/alignment bug in Chrome when refreshing the browser.

* New in version 1.1

- Added support for RWD.
- Unused properties were removed.

How to use?

1. Design each page of your project as you usually do.

index (your main page, will be empty as for now)
main (perhaps a header with nice images and catchy messages)
portfolio (here you show us your work)
about (tell us about you)
contact (how we can contact you, open hours, mail, phone, etc)

(each page can have resizable layers, movable objects, etc...)

2. Go to the empty index page.

3. Add a masterobject (formerly masterpage) for each page you made and point to them.

mobj_Main (this masterobject points to the main.html page, as shown in the project manager panel)
mobj_Portfolio (points to portfolio.html)
mobj_About (points to about.html)
mobj_Contact (points to contact.php)

Each masterobject instance can be placed vertically one below the other.

4. Finally, drag and drop this extension and enter the masterobjects names, in our sample are: mobj_Main, mobj_Portfolio, mobj_About and mobj_Contact. If you have resizable and/or relocatable objects, you should setup the 'expand embedded object' feature. In case you are not using resizable objects in a masterobject instance, you can setup a specific alignment with additional/optional offsets.

5. Preview or publish.


Using a navigation menu - link to the embedded pages:

1. Open the properties/dialog box of the navigation menu.
2. Enter the options names that will point to each embedded page.
3. For each option, enter the link; if applies, select "external link" so as you can type in the link to the embedded page; in  that entry, enter #rzAFW_ followed by the name of the masterobject (or the layer), i.e:
#rzAFW_MasterObjects1 or #rzAFW_Layer1,  just replace MasterObjects1 or Layer1 by the actual name of these objects.


All names are for sample purposes.
You can use layers instead of masterobjects; however, with masterobjects you can test individually each page and will be easier to maintain the whole project.
You can have objects in the index page that are common for all the other embedded pages, such as a background or a fixed menu on top or wherever you want.
If you are working with breakpoints, remember to untick the 'Include Visibility (RWD)' option to the embedded masterobjects.
w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with