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


This extension allows you to have a fullsize "slideable" advertisement (or a multi-purpose layer) on top of the page, that also works on centered pages!
Sample project included.


HTML 4.01 Transitional
W3C compliant


DEMO


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

* New in version 1.3

- The virtual 'onslide' event is more sensitive to programatically allow better objects relocation or
  changes on advanced responsive/fluid schemes.
- More button alignments.
- Improved button image customization.
- Improved core and moved to external library.

* New in version 1.2.0.2

- Improved keyboard navigability behavior when the advertisement object leans out.
- Added optional image-size definition to allow a better implementation in Retina-based devices.
- Fixed a sporadic pixels gap at some breakpoints.

* New in version 1.2.0.1

- Improved support for iOS based devices.
- Improved RWD support.
- Improved button behavior.
- The "open" image is mandatory, the other ones are optional.

* New in version 1.2.0

- Added support for RWD.
- Added optional push images.
- Added lean out property; the size in pixels that the advertisement object leans out when it is (partially) closed.
- Now all the images are optional (at least one must be entered to open the layer; in that case, the same image
  will be used to open and close it).
- Improved objects order for a better keyboard-based navigation.
- Improved backward compatibility for older browsers.
- Fixed a bug in 3D push effect.
- Improved during-sliding events call.

Functions added:

MyExtension.open(); to open the layer on top.
MyExtension.close(); to close the layer on top.
MyExtension.toggle(); to open the layer on top if it is closed, or close it if it is opened.

* New in version 1.1

-Compatibility with [rz] Tooltips.
-Improved navigability with the keyboard.
-Improved focus behavior.
-jQuery is not needed (less code!).
-A separated masterpage for the ad is not required anymore.
-Delayed auto-open once the page is fully loaded (optional).
-User-events: custom onclick support added.
-Fixed: some jQuery-based code crashes at startup.

* New in version 1.0.1

-This version fixes a minor issue with some jQuery objects.



How to use?

* With a masterpage:

1. open a [new] project.
2. add a new page, i.e: "my_advertisements", add a layer and design on it your advertisement banner.
    recommended settings:

   Location and size:

   Mode -> Default

   [ ] Relative horizontal position
   [ ] Relative vertical position
   [√] Relative horizontal sizing
   [ ] Relative vertical sizing

   Alignment -> Center


3. add a new page and design your main page as you usually do.
4. add a masterpage pointing to "my_advertisements", open its properties and set the following:

   [√] Master Page is a layer

    (then, you can hide the object in the Object Manager panel)

5. add the "[rz] Advertisement" extension, open its properties dialogs, and setup its few properties.

* Without masterpage:

1. open a [new] project.
2. add a layer or any other object to be used as an ad.
3. add the "[rz] Advertisement" extension, open its properties dialogs, and setup its few properties - select layer as the type of object that the extension points to.


As you can see, there is mainly one rule:
You can have your advertisement design in a separated masterpage or in a layer, or any other object even in the same page.
Then, you point to it with the extension, indicating the object type such as masterpage or layer.
Now you have an interesting advertisement presentation for your web-page.

Enjoy!


Notes:

Can programmatically open, close and toggle the layer on top.

MyExtension.open(); to open the layer on top.
MyExtension.close(); to close the layer on top.
MyExtension.toggle(); to open the layer on top if it is closed, or close it if it is opened.

Replace "MyExtension" by the actual instance name.
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with