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] Stretchable Border


This extension allows you to have a smart and stretchable border around the page like a framework.
Can be used as just a frame or as a multipurpose-placeholders for advertisements, plain info, or the like.
Tested on mobiles, IEquirks, IE7, 8, 9, 10, 11, Edge, Chrome, Firefox, Opera, Safari, Maxthon and Lunascape.
Sample file included - resize your browser to see it in action.


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in version 1.2

- Added RWD support.
- Improved asymmetric positioning calculations.
- Added multi-instance support (for advanced designs).
- Added external access to force a refresh, show or hide objects in case of complex schemes interactions
  (read "Available functions" section).
- Visibility handling option for a smoother startup (useful for Chrome and similar browsers).

* New in version 1.1

- Less and optimized code for smoother performance and improved backward compatibility.
- Some properties were removed for an (even) easier setup.
- Improved objects/contents positioning.
- Automatic crossbrowser and backward compatible min-width/min-height/min-left/min-top values for all the stretchable areas.



How to use?

You need "nine queens": four elements for the corners, four elements for the stretchable border areas and one content area.
Those elements can be layers, shapes, images, etc...
The content area can be a simple text object, an image, a shape, a layer, or even a content place holder as in page-frames!
Please refer to the wb's help files and documentation on how you can build masterframes, masterpages and layers.
Once you have designed the structure and its contents, drag and drop this extension and just enter the involved objects IDs.
You can isolate and test individually the structure page, then reuse it as you want, i.e. as a masterpage, masterframe or even as a standalone/main one!

Available functions:

In some specific advanced schemes or complex interactions, external access may be needed, if this is the case, the following are the available functions calls:
MyStretchableBorder.refresh(); to recalculate the objects positioning and their sizes.
MyStretchableBorder.show(); to make visible all the objects that belong to the instance.
MyStretchableBorder.hide(); to hide all the objects that belong to the instance.
(replace "MyStretchableBorder" with the actual instance name).

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


new shop with