www.wysiwygwebbuilder.com

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

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

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)

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

Hi RZ,

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

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!).

Thanks RZ
its very usefull.
Cheers
Joe

thank you stamjoe.
feedback appreciated!

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

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.

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

[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

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.

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

*** EDIT ***
Ok, I'm curious... I just took a look on it.
You can do it with this extension...

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

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?

supersonictt wrote: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?

It all depends on how you design the layer and its content... that's all.
You can do the same using the open/close extension.
Instead of the icons provided, you can design your own ones, with mixed words/images, something like "[v] open" and "[^] close", then select the slide effect from the top side.
And, of course, don't forget the layer itself, which can contain images, links, texts, etc, etc...

Thanks for the tip, I will try to do that

Well, it seems that I will wait for the next update as I can't seem to accomplish it with the current extension

the ms menu is an image link that opens/closes the layer (with the slide effect).
please see the sample included.

Thanks again for that
I will check it out tomorrow and let you know

thank you all!
after many downloads... an update is available (also a new extension was added: layers "pagination").
please check the first post, there is a new download link and also a small sample.

[rz] Button v1.0.0

The complement for the [rz] Layers extensions scheme.
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.
Sample project file included.

[rz] Layers v1.4.0

"Pushed button" 3D effect (also works in Internet Explorer).
Sample project file included.


HTML 4.01 Transitional
W3C compliant

Please see the first post for links and demo.
Enjoy!

[RZ]

The button extension is amazing! Actually a few days ago I was searching the internet about how to do that for the "Submit" button inside the form. The only solution I found is to add "margin-bottom: 1px" in the css file for this submit button.
But the extension does this for an image button.
Is it possible to develop the extension to link the object ID in WWB to do the effect?

Thank you.

a few hours ago i definitely removed the image button extension for forms.
there are a few bad side effects. i'm sorry. i don't recommend to use a graphical send button, unless you redesign from scratch your forms instead of use the ease of wb forms...
there are some ideas over the forums about the "push effect", really nice css snippets, but don't work in internet explorer, so what i did is something that works in almost all browsers and also in quirks mode!
i will think about your suggestion.
thank you for your kind words, your feedback is really appreciated.

Thank you for the quick reply [RZ]

Well, you are right, what I added in css for the "submit" button in the form I have did the job on Chrome, but in Firefox and IE the text also shifts as the button moves down! So I guess these stuff related to forms should stay simple.

And thanks for taking what suggested into consideration, but please do not bother, you might have some other things to focus on

the purpose of the Button extension is to have the same "focus/hover/push" scheme as in the other buttons in the Layers extensions set. hope the users can find them useful. enjoy!

[RZ]
Hello again.
I am trying the opnc extension, everything is working perfectly, but I faced something:
I have 4 layers (Layer1, Layer2, Layer3 and Layer4) with a base Layer0.
Inside Layer1, I placed another layer (Layer5) with "oc" extension, and inside this layer (Layer5) I placed a jquery accordion, but it seems not work (the accordion shows only as text).
I guess there is a conflict, I recall this exact problem with PrettyPhoto gallery and I solved it using jquery nconflict, but that was last year and I really forgot how I did that!
According to your knowledge, is there a way to fix this problem? If by using the the noconflict sentence, could you please give me a hint?
By the way I am still looking for the proper noconflict sentence to add, but I said to myself, if [RZ] is around he might provide a hint

Thank you.

*****EDIT******
By the way, adding jquery accordion in the page where the extension is also disables the function of the accordion, so it doesn't have to be inside any layer.

supersonictt wrote:[RZ]
Hello again.
I am trying the opnc extension, everything is working perfectly, but I faced something:
I have 4 layers (Layer1, Layer2, Layer3 and Layer4) with a base Layer0.
Inside Layer1, I placed another layer (Layer5) with "oc" extension, and inside this layer (Layer5) I placed a jquery accordion, but it seems not work (the accordion shows only as text).
I guess there is a conflict, I recall this exact problem with PrettyPhoto gallery and I solved it using jquery nconflict, but that was last year and I really forgot how I did that!
According to your knowledge, is there a way to fix this problem? If by using the the noconflict sentence, could you please give me a hint?
By the way I am still looking for the proper noconflict sentence to add, but I said to myself, if [RZ] is around he might provide a hint

Thank you.

*****EDIT******
By the way, adding jquery accordion in the page where the extension is also disables the function of the accordion, so it doesn't have to be inside any layer.

Something strange is happening here! The accordion is working now!!

hello supersonictt.
please post your project, i want to take a look at it.
i didn't experiencing any issues.
btw, are you using the last release?

[RZ] wrote:hello supersonictt.
please post your project, i want to take a look at it.
i didn't experiencing any issues.
btw, are you using the last release?

Hello [RZ]
As I mentioned in my last post, everything worked fine. I don't know what exactly was happening but I noticed that WWB wasn't publishing the jquery accordion theme, then it did!
I will send you the project of course, but I have one question, I am using the "ocpn" extension, with 4 layers, I guess there is a way to do what am looking for which is:
When I click the open button to open the layers, then let's say I scroll to the third layer then I close it, then open it again, it shows the third layer. How can it return back to the first layer when I click the open button again?
I think the solution is in the "Advanced" section in the extension, but I was in a hurry today and I couldn't look into it carefully.
Oh by the way, the project is in your original project, I mean I made a page within your project and did everything there, so shall I put it in a separate project or send you this one?

you can post your project here if you want, or post just a link to your site.
anyhow, i want to see your web, i mean your final work! want to know how it worked for you in a real site.
and about your question, i will think on adding a new option to the ocpn extension, maybe something like this:
[√] go to first layer when opening.
what do you think?

ps:
currently, if you want to go to the first layer, you can do it right now but via links with events.
on click / javascript -> MyObject_goto(1);MyObject_open();
replace MyObject with the real name, of course.

I published the work to a temporary address, as it is not final. So here it is:
http://www.racketreaction.com/new
Please have a look and let me know what you think.
Am planning on converting my whole site to layers system using your extensions, it really added a professional value to it.
And about my question, it would be really great to have this option, I think you will get exactly why I want that when you see the site I provided before.
I will try what you suggested about going to the first layer using events and will report back.

One last question please. When you go to the link above, there is a (+) on the top right side of the first image after you click the button "WHAT WE DO", please click on it, another layer will appear. On the right, there is a text and in the end the text has a link (here), I want this link to close "WHAT WE DO" layer and open a "CONTACT US" layer (it is not yet ready in the demo site I provided), is this possible? Actually this question came out from another thing I wanted to as you about, in your demo site of the your layer extensions, clicking on "PANEL [A]" open the layer, how can I do that? I mean there is no option to do this exact thing in the properties of the extension, so I guess I have to it manually, or maybe in another way?

there is a text and in the end the text has a link (here), I want this link to close "WHAT WE DO" layer and open a "CONTACT US" layer (it is not yet ready in the demo site I provided), is this possible?

whatwedo_close();contactus_open(); (replace whatwedo and contactus with be the real layers names)

there is no option to do this exact thing in the properties of the extension, so I guess I have to it manually

you can use the oc2 extension (synchronized open/close), but i think there is no need to do this, for your case, will be a far simpler to add these two events in your link.
hope this helps.

the option to go to the first layer in the ocpn extension will soon be available, stay tuned.

As you can see in the demo site, "WHAT WE DO" has a fixed layer (layer0). Now I added another ocpn extension with layer prefix pop, and I added another layer (pop1), so for the "here" link, shall I do it using events? onclick - javascript - Layer0_close();pop_open(); ... This way?

And for what you are going to add in the new features, THANKS A LOT FOR THIS

forget the layer0, layer1, layer2, etc...
you must point to the extension name, the name given in the object manager, and the _action().
let's say whatwedo is the extension (the object name).
let's say the whatwedo object manage the layer0 and the layer1, or just the layer1, or whatwedo_1, or whatwedo_0, whatwedo_1, whatwedo_2, etc, etc, etc.
forget the whatwedo_X layers. just point to the extensionname_action().

from the first post or from the info attached file:

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

hope this helps.

(ps: think simple, don't overcomplicate yourself.)

Hehe yeah, I always think things are complicated! Plus, I didn't read the first post fully! My fault

Thanks a lot [RZ] for your generous help waiting for the new update

didn't read the first post fully

nor the attached info file...

waiting for the new update

BETA already available (look at the "advanced" category).

*** EDIT ***
link removed - the fix is obsolete and is no longer available

AMAZING

I really appreciate your quick response

Thanks a million [RZ]

[RZ]
It would be great if you provide an example in the next project for oc2 to see how synchronization work
Thanks

It would be great if you provide an example in the next project for oc2 to see how synchronization work

again, from the first post:
DEMO

open the oc-2 extension.
take a look at the property "group" from the "general" category (and its description).
you can enter the group name that the set of layers belongs to:
"main", "group a", "group b", or the name you want, just type in the name.
if you open a layer that belongs to "group a", the other layers that also belong to the "group a" will automatically be closed and the clicked will be opened.
if you set "belongs to all groups" no matter what layer is currently open, all of them (except the "don't synchronize"d ones) will automatically be closed and the selected will be opened.
just play a while with them and in a snap you will understand by yourself.

I didn't miss that one this time
And yes, I am currently playing with this oc2, because I think my website will have three tabs: "ABOUT US", "WHAT WE DO" and "CONTACT US", so when clicking on "HOME" it will show the home layer, and when clicking "WHAT WE DO" while home layer is showing, I want to get closed and "what we do" layers to show and so on. So I guess oc2 is the best choice for that, right?

that's right, and this is how it works.

Thanks a lot, I will test it, and try to implement my work to it and show you the result.

[RZ]
Hello again

I worked on oc2 as I said before which this extension matches what I need, but I bumped into something!
I have 3 oc2 extensions: "Home", "What we do" and "Contact us". In the properties of each one of them, under general section, I set "Group" to "belongs to all groups".
"Home" and "Contact us" working great. Now "What we do" should have something like the one in the demo site I provided before (4 layers with next previous), and since oc2 extension can have one layer, here is what I tried to do as a workaround:
When clicking "What we do" button it opens the base layer and a transparent layer. Inside this transparent layer I placed the pagination extension with the 4 layers I want. Until this point, everything is working perfectly.
Now, if -for the oc2 extension which belongs to "What we do"- I change the base layer open/close effect to slideup, the extension crashes! What exactly happens is if I click "What we do" button which opens the oc2 extension, it takes me to white page with the down button of the pagination on the top left of the page, and that's it! Weird ha?!! And any other effect (EXCEPT "Fade") will do the same crash!

I can post the project here with if you would to have a closer look about what happens.

please post a link to the site, and zip your project here, i'll take a look into it.

Here is a simple demo.
In the demo, there are only 2 oc2 layers, the second extension the one that has transparent layer, and inside this transparent layer there is a pagination extension with 3 layers.
Working fine for the fade effect for the base layer in the second oc2, but crashing when changing this effect to anything else.

By the way I found out something:
It seems that the crash happens because the pagination extension is inside the base layer of oc2, if it is placed outside it, then the effects work properly.

thanks for the project.
although mine works fine, with the same logic than yours, i will look into it and be back with a solution as soon as i can (hope in less than two hours, i must go right now).

Thanks a lot and take your time on that

@supersonictt
well, i'm back and really sorry for the delay.
there was a conflict with the jquery when sliding instead of fading, and when the pagination extension is deep nested, this was because of the dynamically added buttons.
the suggested improvements and the fix are here [*** link removed: the fix is obsolete and is no longer avaiable ***].
also i attached your project here [*** link removed ***]; i named the layers in a more easy way to understand the scheme's logic behind all this stuff.
a final release will soon be available with some new improvements.
enjoy!