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: 2138
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.

lamouch0310
 
 
Posts: 6
Joined: Fri Apr 08, 2011 5:17 am

Re: Showing and scrolling layers

Post by lamouch0310 » Wed Feb 29, 2012 12:00 pm

great but please send more info or exemples i kant use (pn)

User avatar
[RZ]
 
 
Posts: 2138
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: 2138
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.

lamouch0310
 
 
Posts: 6
Joined: Fri Apr 08, 2011 5:17 am

Re: Showing and scrolling layers

Post by lamouch0310 » Wed Feb 29, 2012 2:33 pm

Thank you for the quick response and for the sample file
Now everything is clear and ok
Thank you for this really useful extension

User avatar
[RZ]
 
 
Posts: 2138
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: 103
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: 2138
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: 246
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: 2138
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: 2138
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: 2138
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.

zotekW7
 
 
Posts: 76
Joined: Sat Oct 01, 2011 12:45 am
Location: san diego

Re: Showing and scrolling layers

Post by zotekW7 » Thu Mar 01, 2012 7:42 pm

why do we need this? you can use event options right??

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

Re: Showing and scrolling layers

Post by [RZ] » Thu Mar 01, 2012 8:02 pm

zotekW7 wrote:why do we need this? you can use event options right??
yes, you are right, so don't download and don't use this extension. fortunately other users already got the point.
just curious, wanted to know what you will be doing if you need to change manually a lot of code or a lot of options in order to change the behavior or just to add a few data...
have a nice day.
regards.

p.s: by the way, can you do it better? i think many users may be waiting for your new, fresh and smart ideas like this one: http://wysiwygwebbuilder.com/forum/view ... =5&t=45555

zotekW7
 
 
Posts: 76
Joined: Sat Oct 01, 2011 12:45 am
Location: san diego

Re: Showing and scrolling layers

Post by zotekW7 » Thu Mar 01, 2012 11:26 pm

why do you get offended verry easy? i love your extensions..! i was just sayin!!..and plus i about my other topic...im asking about wordings!,,and not copying the whole website design!!! im not that stupid to copy the whole site design.!!by the way..its not all of your ideas.. its someone else and you just improve it!!

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests