[rz] "Slidable" fullsize ad on top *** UPD 2018-Jun-06 ***
Posted: Mon Apr 02, 2012 8:58 pm
[rz] Advertisement v1.3.1
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.
* New in version 1.3.1
- Added support to work also in floating layers schemes.
- Minor tweaks in the code.
* 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.
* 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
- 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:
You programmatically can 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.close(); 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.
DEMO
HTML 4.01 Transitional
W3C compliant
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 - select masterpage as the type of object that the extension points to.
* 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!
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.
* New in version 1.3.1
- Added support to work also in floating layers schemes.
- Minor tweaks in the code.
* 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.
* 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
- 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:
You programmatically can 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.close(); 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.
DEMO
HTML 4.01 Transitional
W3C compliant
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 - select masterpage as the type of object that the extension points to.
* 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!