[rz] Browser Size Activated Object *** UPD Jul-26-2014 ***
Posted: Sun Feb 02, 2014 5:17 pm
[rz] SAO v1.2
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!
DEMO
HTML 4.01 Transitional
W3C compliant
* 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 tiggered 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!
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!
DEMO
HTML 4.01 Transitional
W3C compliant
* 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 tiggered 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!