Showing and scrolling layers *** UPDATED Aug-26-2012 ***

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
Post Reply
User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Showing and scrolling layers *** UPDATED Aug-26-2012 ***

Post by [RZ] » Tue Feb 28, 2012 2:38 pm

[rz] Layers v1.6.5

This set of extensions allows to scroll layers and play a bit with them.
You can have a set of layers as a widget/s like and easily show/hide/scroll them.
Sample project file included.

DEMO

HTML 4.01 Transitional
W3C compliant


* NEW in version 1.6.5:

General:
- Improved mouse and keyboard handling to "onfocus", "onblur", "onmouseover" and "onmouseout" events with tab and enter keys (includes workarounds for Chrome and IE).

New behavior in Open/Close synchronized:
- Improved "open on hover" and "deactivate close" sequences.
- Move the opened layer on top of the screen elements.
- Move the open/close icons on top of the opened layer.
These features allow to build sophisticated menus! (also separated ones in the same page - and can be placed in masterpages.)

Loop:
- Improved sequence handling "onstop" and "onplay" events.

* NEW in version 1.6.0:

New behavior in Open/Close synchronized layers:
- open on hover: triggers the open sequence when the mouse is over the open icon; no click required.
- deactivate close: this option implies that the only way to close the current opened layer is opening another synchronized layer.
Now the scrolling layers may act as a sophisticated menu!
(at this stage I must thanks to supersonicct and bendigo, for their patience and their fresh and advanced ideas that contributed to make these extensions set what they are today; please forgive me if forgot to mention someone else that for sure in a way has contributed as well.)

New easing effect (with 30 variations) added in each extension for visual bouncing/elastic movements.
The following chart may be useful to understand these variations: http://jqueryui.com/demos/effect/easing.html

* NEW in version v1.5.0:

Hover event fixed (minor visual issue when other jQuery objects are present in the same page).
User-events support added.
Automatic/manual start-up property deprecated (improved start-up process).
(lib-1) and (lib-2) extensions were deprecated and excluded, now centralized in one (lib) extension.
Images preloading for smoother navigation.
The extensions with go-previous and go-next features, now include the onfirst and onlast behavior; i.e: on first, go last or stay on first; on last, go first or stay on last.
New extension was added: "loop".

New available functions for events in standard text links:

MyObject_play(): starts a "loopable" layers cycle.
MyObject_stop(): stops a "loopable" layers cycle.

MyObject_paused: read/only, indicates the current status of a "loopable" layers cycle.

* NEW in version v1.4.0:

"Pushed button" 3D effect (also works in Internet Explorer).
New extension: [rz] Button, the complement for the [rz] Layers extensions scheme.

* NEW in version v1.3.0:

Cleaner code.
Better calculations for slow animated layers.
New "[rz] Layers (oc2)" extension (see the description below).
Deep nesting support.
Automatic layers startup option.
Simplified startup mode (open-icon and close-icon visibility properties were deprecated, now is centralized in one property).
New onfocus/onblur implementation for a better keyboard experience when opening/closing layers (when an open/close button get the focus via the tab key and the user press enter -so the proper event/action is triggered-, this button won't get the focus).
New extension was added: "pagination".

* NEW in version v1.2.0:

Normal and hover images for the controls (open/close/previous/next/default/shake).
When a control (open/close/previous/next/default) receive the focus (via the [Tab] key), you can decide for the dotted box (it means the default browser's indicator) or not (only the hover image).

Available functions for events in standard text links:

MyObject_open(): open an individual layer or a layer from a group.
MyObject_close(): close an individual layer or a layer from a group.
MyObject_switch(): open or close an individual layer or a layer from a group - if a layer is opened, then will be closed and viceversa.
MyObject_goto(n): go to a specific layer number from a group (pagination).

MyObject_curr_layer: read/only, indicates the current shown/hidden layer.
MyObject_opened: read/only, indicates the opened/closed layer(s) state.
MyObject_default_layer: indicates the start-up/go-to default layer.

Note: Due to internal changes, (only) open-normal/hover and close-normal/hover icons must be reentered.

* NEW in version v1.1.0:

Now the "open/close" and the "open/close/more" extensions can have a base layer or "fixed", also called "Layer #0".
It can receive particular open/close behavior; once opened, remains fixed until the close icon is clicked.
This may be useful when you want to have scrollable layers (some transparency is required) with a fixed background; and, of course, this background with its particular open/close behavior.
New extension was added: "open/close/previous/next" with the new base layer included!


How to use?

Depending on the selected extension (ocn/pn/pnd/pnd2/ocpn), you must have all the layers named with a common prefix, that identifies the group they are belonging to, then, numerated consecutively as follows:
group-a-1 (prefix 'group-a-', with 3 layers)
group-a-2
group-a-3
group-b-0 (prefix 'group-b-', this group has a fixed background and 2 layers)
group-b-1
group-b-2

Then, if applicable (if the selected extension manages a group of layers), indicate the number of layers that be managed.
For an optimal effect, the set of layers belonging to the same extension/purpose should be at the same x/y coordinates and have the same size.

[rz] Layers (oc)
Open/Close
This extension allows you to open and close a layer.

[rz] Layers (oc2)
Open/Close (extended version)
This extension allows you to open and close a layer synchronously within a group.
Just name the group to which the layer belongs to.

[rz] Layers (ocm)
Open/Close/More
This extension allows you to open and close a group of layers.
Once you click and make visible the first layer, you can scroll through the other layers.

[rz] Layers (pn)
Previous/Next
This extension allows you to go to the previous or the next layer (belonging to the same group).

[rz] Layers (pagination)
Pagination/Previous/Next
This extension allows you to go to the previous or the next layer (belonging to the same group).
Also has direct links to each page (like a panel showing access to the available layers).

[rz] Layers (pnd)
Previous/Next/Default
This extension allows you to go to the previous or the next layer (belonging to the same group), clicking on the "go default" icon, the first layer is shown.

[rz] Layers (pnd2)
Previous/Next/Default (extended version)
This extension allows you to go to the previous or the next layer (belonging to the same group), clicking on the "go default" icon, the first layer is shown.
Also an object belonging to the first/default layer is shown or hidden when it is active or not.

[rz] Layers (ocpn)
Open/Close/Previous/Next
This extension allows you to open and close a group of scrollable layers.
You can go to the previous or the next layer (belonging to the same group).

[rz] Loop
This add-on converts "go to previous/next layer" extensions to a "loopable" cycle.
Can automatically or manually start the cycle. Just point to the extension to be "converted".

[rz] Layers (shake)
This extension allows you to shake a layer when you click on an icon or the mouse is over it.
It is useful when you need the user's attention.

[rz] Button
This lightweight extension allows you to setup an image button with ease.
Similar to the rollover extension; no jQuery effects, but this image button can receive focus, support events and many link options.

[rz] Layers (lib)
This extension must be included in the page you are using the listed extensions.
That's all.

All these extensions allow you to customize the images, positions, tooltips, etc.
You can see a few live examples here:
http://www.***.com
go to portfolio (click on the [^][v] images, put the mouse pointer over the [<] image or click on it)
go to publications (similar examples)
go to curriculum vitae -> education / experience / training / others / personal references (click on the [+] images)
from main, click on the link to news image (you will see at top right a clock image).

Hope you can find them useful.
Enjoy!
Last edited by [RZ] on Mon May 18, 2015 12:59 pm, edited 19 times in total.

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Wed Feb 29, 2012 12:46 pm

@lamouch0310
thanks for your post.
i'm really sorry you are experiencing issues with this extension.

please do the following:
read carefully the original post.
read carefully the rz-layers-info.txt file.
read carefully the description of each property (in the extension properties dialog).
see the live examples that you can rich via the links i provided.

if you still can't make them work, please post your project file here so i can see what you did, and in the meanwhile i will prepare an additional sample project file as soon as i can.

best regards.

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Wed Feb 29, 2012 2:11 pm

despite the links showing the use of this extensions in a real website, a sample file is now attached.
hope this helps.
regards.

*** EDIT ***
attached file removed (for less wb's bandwidth use).
now the extensions with sample file(s) are included in the mediafire download link.
(first post updated)
Last edited by [RZ] on Thu Mar 01, 2012 10:40 am, edited 1 time in total.

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Wed Feb 29, 2012 2:35 pm

@lamouch0310
glad to know is now working fine for you.
only one thing i'll ask you: please post a link to your site when it is ready. want to see how you did it!
regards.

User avatar
Pascal-Gilles
 
 
Posts: 83
Joined: Tue Apr 05, 2011 8:06 pm
Location: France
Contact:

Re: Showing and scrolling layers

Post by Pascal-Gilles » Wed Feb 29, 2012 4:20 pm

Hi RZ,

Nice ones. Thanks for sharing as it significantly simplifies the display process set up :wink:

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Wed Feb 29, 2012 4:24 pm

crochepattes wrote:significantly simplifies the display process set up
that is the point!
i know it is not THE solution you searched for, but in my humble opinion is compact and neat.
thanks for your feedback.

ps: if you take a look into the generated code, you will see that also prevents repeated calls and messed effects (in more than one instance as well!).

User avatar
stamjoe
 
 
Posts: 235
Joined: Sat Feb 09, 2008 10:32 am
Location: GREECE

Re: Showing and scrolling layers

Post by stamjoe » Thu Mar 01, 2012 9:43 am

Thanks RZ
its very usefull.
Cheers
Joe

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Thu Mar 01, 2012 10:23 am

thank you stamjoe.
feedback appreciated!

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Thu Mar 01, 2012 5:55 pm

@cp.abel.leon
thank you for your feedback.

the layers you can't see in the workspace are marked as not-visible in the object manager.
make them visible one-by-one, changing their content as per you need.

i.e. if you use the open/close extension, usually you use it in this order: open (to make it visible) and then close (to make it hidden). this means the layer is closed (not visible) by default. note that this extension also allows you to change this order (close/open instead of close/open).

the prev/next extension, works in a similar manner. clicking next, hides the current layer, and makes visible the next layer, and now the "next" layer is the "current" layer.

don't try to understand the logic behind the scenes, just enjoy the extensions in your website!

p.s: there are a few advanced tricks, but there are reserved for a second stage! :lol:

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Thu Mar 01, 2012 7:32 pm

yes, you can combine/nest them, i only made a few examples.
you can use them as menu/links, as info/news, add images, set your preferred scrolling direction, etc... bounded only by your imagination.
thank you for your encouraging feedback. highly appreciated.

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers

Post by [RZ] » Sat Mar 03, 2012 11:48 pm

@iwon2b
please follow this link: http://wysiwygwebbuilder.com/forum/view ... 42&t=46020
an extension is ready.

supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Showing and scrolling layers *** UPDATED MAR-08-2012 ***

Post by supersonictt » Thu Mar 08, 2012 9:23 pm

[RZ]

Amazing update!
I like the hover addition, it really makes sense :)

Just out of curiosity, by playing with the extension for a while, it is possible to make all the layers as Header/Footer and let them fill the full width of the page, which means a full website can be done like this IF there is a possibility to use -let's say- navigation images to link to each layer. In other words, Contact us button will take you to the Contact us layer and so on... Is that possible?

By the way, what is the technique used in microsoft website? (where is says "For Home", "For Work", "For IT Pros" and "For Developers")

Thanks :)

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers *** UPDATED MAR-08-2012 ***

Post by [RZ] » Thu Mar 08, 2012 10:09 pm

supersonictt wrote:[RZ]

Amazing update!
I like the hover addition, it really makes sense :)

Just out of curiosity, by playing with the extension for a while, it is possible to make all the layers as Header/Footer and let them fill the full width of the page, which means a full website can be done like this IF there is a possibility to use -let's say- navigation images to link to each layer. In other words, Contact us button will take you to the Contact us layer and so on... Is that possible?

By the way, what is the technique used in microsoft website? (where is says "For Home", "For Work", "For IT Pros" and "For Developers")

Thanks :)
Thanks for your kind words.
Your feedback is really appreciated.

Well, I'm planning to make the extensions work with standard links as well, not just images.
Anyhow you can manage the layers you want, and combine the extensions with instances of themselves in the same page, because YOU design the layers that belong to the extension.
Your limit is your imagination.
I will post here about the next updates.
Thanks again.

User avatar
[RZ]
 
 
Posts: 2150
Joined: Tue Nov 04, 2008 12:08 pm

Re: Showing and scrolling layers *** UPDATED MAR-08-2012 ***

Post by [RZ] » Thu Mar 08, 2012 10:12 pm

supersonictt wrote:By the way, what is the technique used in microsoft website? (where is says "For Home", "For Work", "For IT Pros" and "For Developers")
Sorry, I forgot this point.
I don't know the ms-site. I didn't see it. Anyhow I'm sure they already overcomplicated the stuff... :lol:

*** EDIT ***
Ok, I'm curious... I just took a look on it.
You can do it with this extension... ;)
Last edited by [RZ] on Thu Mar 08, 2012 10:15 pm, edited 1 time in total.

supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Re: Showing and scrolling layers *** UPDATED MAR-08-2012 ***

Post by supersonictt » Thu Mar 08, 2012 10:15 pm

Great news {RZ}, that would really be a wonderful extension if you managed to do so, I really appreciate your hard work.

And about microsoft website, you are right, they always complicate things :D

Thanks a lot

**EDIT**
That's what I thought it would be, the extension behaves almost the same as microsoft uses, but maybe with more than just Previous/Next buttons, right?

Post Reply