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] SAO


Browser Size Activated Object (aka "SAO").

This extreme lightweight extension allows you to activate and deactivate objects based on the visitor's browser size.
Redirection is also supported; so, it can be used as mobile redirection based on the device's screen resolution.
Show alerts based on the page design/scheme (portrait/landscape).
Multi-instance supported, this allows many configurations in the same page.
Of course, it is limited by your creativity!


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New inversion 1.2

- Width and height parameters can be calculated based on the browser size or the physical screen size.
- The visitor can optionally be prompted prior to the redirection.
- The prompt feature automatically detects a [rz] Confirm() instance.

* New in version 1.1.0.2

- Fixed an introduced bug detecting some type of devices.
- Improved code.

* New in version 1.1

- Object deactivation.
- Can activate (show) or deactivate (hide) more than one object in the same instance and under the same conditions;
  if this is your case, just enter each object id separated by commas, i.e. Layer1, Layer2, etc.
- Event(s) on activation and on deactivation; user defined function call in javascript format: myfunction();
- Matching events can be triggered (or not) when the page is loaded or when the condition is reached.
- Improved code; all events are triggered only once, this means, when the browser's conditions are changed instead of in
  each resize.
- Device condition (based on the user agent string); can be: determinant - this means no matter what the other conditions are,
  i.e. useful for mobile redirection), must match - the conditions must match with the device in order to trigger the proper
  activations, deactivations and events; this option can even be excluded.
- Improved screen size and orientation calcs.



How to use?

- Design your page as you usually do.
- Add an object (often a layer with the appropiate legend) as the last object (the topmost position).
- Finally, add the extension; must be over the layer or the object to be shown
  (if you use a layer, due to technical reasons, it is advisable to put the extension within it).
- Open the extension properties dialog and set-up the parameters;
  properties with their descriptions are self-explanatory.
- You can use a redirection link instead of display an object;
  this can be useful i.e. to redirect to a mobile version of your site according to the device's resolution.
- Run a preview and resize your browser to see it in action.

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


new shop with