[rz] Browser Size Activated Object *** UPD Jul-26-2014 ***

[[RZ]]

[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!

[haakoo]

Nice and did I say Nice

Hans

[[RZ]]

thanks haakoo!

[haakoo]

RZ

Could you add a function call to the script
Or even better call wb events.

Hans

[[RZ]]

i'm currently working in an update
can you explain your post better, perhaps i can add this new feature with the new release

[haakoo]

Now you can open a subpage or show/hide layer(element)
But if you could add a field to call a self defined javascript function it would be great.

One could call jquery functions to resize/rotate,.... htmlobjects within a single page depending on landscape/portrait mode.
Hence creating live updating elements in mobile browsers

Hans

[[RZ]]

well, i thought about an user defined function call (when the defined sizes are reached, a sort of event) but for a reason that i cannot remember right now, i removed it -- it seems that this feature is very important, and i agree with you
i'm checking out if some specific mobile extra feature can be added, but you know, mobiles are better and better every day (read: minute), so i removed from my scripts the traditional mobile detection and i work only based on screen resolutions
in just a few words i got your idea, thank you for your suggestion, will see what can be done
hope i can release the upgrade by today

[haakoo]

Thanks,I'll see it when you're done

Hans

[[RZ]]

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

[haakoo]

Hi RZ,

Thanks for the update.
There seems to be a script error in the deactivate option(but it works)
Simply entered Layer2 in deactivate field and it gave the error below.
When removing Layer2 from field, error is gone too

Hans

Code: Select all

Timestamp: 3-2-2014 21:47:28
Error: TypeError: document.getElementById(...) is null
Source File: file:///D:/TestMap/index.html
Line: 50

[[RZ]]

from the attached info file:

"- Finally, add the extension; must be over the layer or the object..."

in order to reduce the code and make it to work faster and smoother at startup, i removed some validations, apologies for that
please move the extension and be sure it is on top of all of the involved objects that points to

[haakoo]

Yup that's it,
Overlooked that part of the txt file.
Must say it's a great piece of coding,so once again thanks.

Hans

[[RZ]]

thank you for clearing this up
enjoy

[[RZ]]

* New in version 1.1.0.2

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

[Patrik iden]

Hello, How can i download your extensions?

Thank you.

[[RZ]]

hello
have you read the first post?
"how can i get a legal copy?"
there is a link with up-to-date information

[Patrik iden]

hello
have you read the first post?
"how can i get a legal copy?"
there is a link with up-to-date information

OK, Thank's

[[RZ]]

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