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

[RZ] · Post by **[RZ]** » Sat Apr 07, 2012 5:26 pm

i'm sorry, i'm not familiar with the photoslider extension.
please give it a try and tell me.

supersonictt · Post by **supersonictt** » Sat Apr 07, 2012 7:07 pm

The extension is called Bcastr Slideshow (viewtopic.php?t=13803)
It is working fine with the layers extensions. In the extension, all you need to do is to add the images, and the links these images will take you to when you click on them (the links will not work in the preview mode, the page should be published to the server in order for these links to work). Upon publish the page to the hard drive, two files related to the extensions are generated (bcastr.swf and bcastr.xml). Inside bcastr.xml, there is this code:

Code: Select all

<?xml version="1.0" encoding="UTF-8" ?>
<data>
	
	<channel>
      
<item>
<link>http://www.wysiwygwebbuilder.com</link>
<image>Website.jpg</image>
<title> </title>
</item>
<item>
<link>http://www.wysiwygwebbuilder.com</link>
<image>Network.jpg</image>
<title> </title>
</item>
<item>
<link>http://www.wysiwygwebbuilder.com</link>
<image>Computer.jpg</image>
<title> </title>
</item>
<item>
<link>http://www.wysiwygwebbuilder.com</link>
<image>Smartphone.jpg</image>
<title> </title>
</item>

	</channel>

<config>
		<isShowTitle>false</isShowTitle>
    <titleBgColor>0x000000</titleBgColor>
    <titleTextColor>0xFFFFFF</titleTextColor>
    <titleBgAlpha>0.75</titleBgAlpha>
    <titleMoveDuration>1</titleMoveDuration>
    <titleFont>Arial</titleFont>
		<roundCorner>4</roundCorner>
    <isShowBtn>false</isShowBtn>
		<btnDefaultColor>0x000000</btnDefaultColor>
		<btnHoverColor>0x666666</btnHoverColor>
		<btnTextColor>0xFFFFFF</btnTextColor>
		<btnFocusColor>0x666666</btnFocusColor>
		<btnAlpha>0.7</btnAlpha>
		<transDuration>1</transDuration>
		<transform>breathe</transform>
		<blendMode>normal</blendMode>
		<scaleMode>exactFit</scaleMode>
		<btnSetMargin>auto 5 5 auto</btnSetMargin>
		<btnDistance>20</btnDistance>
    <autoPlayTime>4</autoPlayTime>
    <changImageMode>click</changImageMode>
    <windowOpen>_blank</windowOpen>
    <isHeightQuality>true</isHeightQuality>
    <isShowAbout>true</isShowAbout>
	</config>
</data>

As you can see, the <link> tag has the a URL, is it possible to change it to an event? (such as onclick="Extension7_goto(2);"). I searched google, but couldn't find it exactly as I want!
[RZ], I will search more about that, if it is possible to have events in xml file, so please don't waste your time on this thing

Thanks a lot.

[RZ] · Post by **[RZ]** » Sat Apr 07, 2012 9:40 pm

Hello; an update is available to download.

* NEW in version v1.4.1:

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

Enjoy!

supersonictt · Post by **supersonictt** » Sat Apr 07, 2012 11:29 pm

Thanks [RZ]

Great update

[RZ] · Post by **[RZ]** » Tue May 01, 2012 4:20 pm

Hello; an update is available to download (please see the first post).

* NEW in version v1.5:

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

Once again, thank you all for all these downloads.
Enjoy!

supersonictt · Post by **supersonictt** » Tue May 01, 2012 7:44 pm

Thanks a lot for the update

The project am working on is all built on your extensions, and replaced the old ones with those new ones, works perfectly.
The site will be published very soon, so I really would like you to see what your extensions added to my website

so, THANKS A MILLION

[RZ] · Post by **[RZ]** » Tue May 01, 2012 7:49 pm

thanks again for your kind words (as usual).
glad to know that all is working fine and hope to see your site online soon.

[RZ] · Post by **[RZ]** » Mon May 07, 2012 7:04 am

thank you saer for your kind and encouraging words!
feedback is always highly appreciated.

[RZ] · Post by **[RZ]** » Tue May 08, 2012 1:16 pm

* NEW in this Pre-release:

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!

DOWNLOAD AVAILABLE HERE (*** link removed - this update is obsolete ***)

(at this stage I must thank to supersonictt 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.)

supersonictt · Post by **supersonictt** » Tue May 08, 2012 11:05 pm

[RZ],
Thank you very much for your time in updating and improving this extension

I simply LOVE IT.
Thanks a lot for your kind words, I am always ready to try and give my feedback in order to improve your extensions and other members' extensions.
And as I said before, my whole site is built on your extension... I went through three designs before, and when this extension showed up I decided to change everything in the past designs and implement your extension... The feedback from everybody around me (especially my graphic designer friends) was like "WOW!!". The site now is in its final graphical touches phase, and I cannot wait to show you what your extension made to my site

Concerning the pre-release, I will -for sure- try the new features and give my feedback as soon as am done publishing my site.

By the way, by trying the extensions you made, and those other great extensions other members' made, you all gave me the courage to start building some useful extensions though am not talented as you guys, but I will try and give it a shot

A million thanks [RZ]

[RZ] · Post by **[RZ]** » Wed May 09, 2012 9:51 am

gzagone wrote:Hello, congratulations and many thanks for your excellent work. I am a good web designer, but a bad programmer! In your beautiful example "scrolling layers" I saw that to open the layers do not use only the "icons" but the text line. How can I do this? Where do I write the functions? Could you post an example of using the text function? Thank you very much for the answer you could give.
Congratulations again for your wonderful work!

thank you for your kind words; your feedback is highly appreciated.
well, the info file lets you know about it.
anyhow, here are a few simple steps:
1. type in your text as you usually do in a standard text object.
2. mark a link as you usually do.
3. select the events tag.
4. add an event, onclick -> javascript
5. now the "heavy part": write the ID you entered for the extension that manages the layers you want to open or close, let's say "MyObject", so, the method to open/close is: MyObject_switch();
simple right?
now for your info, MyObject_open(); starts the open sequence, MyObject_close(); starts the close sequence, but you have a simpler way: MyObject_switch(); that automatically closes if opened or opens if closed.
hope this helps.
let me know if you need further assistance.

supersonictt · Post by **supersonictt** » Wed May 09, 2012 1:00 pm

[RZ] is my teacher

he helped me a lot with this extension, so I might be able to help you as well.
Whet is the specific extension you are using?

supersonictt · Post by **supersonictt** » Wed May 09, 2012 1:08 pm

Your welcome

So is it the open/close extension? or opern/close/default? ...
Which is the exact one you are using?

[RZ] · Post by **[RZ]** » Wed May 09, 2012 1:12 pm

to open and close synchronously, use OC2 instead of OC, the properties are the same, only one concept was added, "group" -> don't synchronize or belongs to all groups.
1. don't synchronize: open and close individually
2. belongs to all groups: close all and open the selected layers

if you need to refine this, you can type in the group name instead of select "don't" or "belongs to all".
let's say, "panel_1" is the group name.
all the layers belonging to "panel_1" will be closed and then the open sequence is triggered for the selected layers.

hope this helps and THANKS for your kind words.
also THANKS to supersonictt for the help on this topic.

supersonictt · Post by **supersonictt** » Wed May 09, 2012 1:14 pm

So I understand from you that you are using more than one open/close extension on the same page, right?

*****EDIT*****
[RZ] is faster then me

supersonictt · Post by **supersonictt** » Wed May 09, 2012 1:45 pm

Try the onLoad event for the page, and set the javascript function as [RZ] mentioned in his last post.

[RZ] · Post by **[RZ]** » Wed May 09, 2012 1:48 pm

use the visibility property.
read the properties descriptions... this is also helpful.
hidden: the layers are closed when the page loads.
visible: the layers are automatically opened when the page loads.

(@supersonictt: mmm... dont need onload events... i mean dont need to add code.)

[RZ] · Post by **[RZ]** » Wed May 09, 2012 1:53 pm

sorry for repost, but seems to me that events in this case are not needed.
the startup process does it for you.

supersonictt · Post by **supersonictt** » Wed May 09, 2012 7:41 pm

[RZ] wrote:use the visibility property.
read the properties descriptions... this is also helpful.
hidden: the layers are closed when the page loads.
visible: the layers are automatically opened when the page loads.

(@supersonictt: mmm... dont need onload events... i mean dont need to add code.)

I totally agree, but what if someone wants the layer (oc2 extension) to open after 5 seconds from page load? I think it needs the code you gave me before about timed events, right?

[RZ] · Post by **[RZ]** » Wed May 09, 2012 7:45 pm

I totally agree, but what if someone wants the layer (oc2 extension) to open after 5 seconds from page load? I think it needs the code you gave me before about timed events, right?

100%

supersonictt · Post by **supersonictt** » Wed May 09, 2012 8:03 pm

I tried it with times events in my project, works like a charm

Thanks a lot [RZ]

[RZ] · Post by **[RZ]** » Thu May 10, 2012 8:14 pm

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

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

Please see the first post for download links.
Thank you all!

supersonictt · Post by **supersonictt** » Sun May 13, 2012 8:48 pm

Hello [RZ]

There is something weird happened to my saved project!
After updating the software to version 8.1.5, the layers no longer open in synchronize mode (I mean synchronized layers)!
Just wanted to point this out for you to know

[RZ] · Post by **[RZ]** » Sun May 13, 2012 9:29 pm

the demo that is online, is working fine for me.
are you using other code? other extensions?

supersonictt · Post by **supersonictt** » Sun May 13, 2012 9:35 pm

In which WWB version did you use for the demo?
My project works fine with WWb 8.1, but I updated WWB to version 8.1.5 (the latest which was released a few hours ago) and the synchronized layers are not working anymore!
Let me double check that and get back to you.

Thanks a lot [RZ] for your quick reply.

[RZ] · Post by **[RZ]** » Sun May 13, 2012 9:40 pm

i tried the last version 8.1.5
it seems there is an issue loading the new jquery version... but not in all projects!
i tested locally the demo online and is working fine.
i will see to make a workaround for this as soon as i can. please note that the issue is not a my end.

supersonictt · Post by **supersonictt** » Sun May 13, 2012 9:48 pm

Well, I am very sure that the issue is not with your extension. I also get a missed stuff showing in timed event script you provided me earlier with this version.
I posted these issue in the "General" section for Pablo to know, and here is the link if you are interested to know what Pablo would say about it:
viewtopic.php?f=5&t=47807
And please [RZ] don't waste your time to make workarounds for this issue, especially for ME, I can live with version 8.1.0 until Pablo finds out the fix for this issue.

Again, thank you so much for clarifying things

[RZ] · Post by **[RZ]** » Sun May 13, 2012 10:15 pm

well, i have a fix in my hand, but there is a minor minor really minor issue in the generated code by 8.1.5
post a workaround, then re-post a rollback will be time wasting.
i think pablo will fix it really soon.
there are a lot of extensions that depend on this.

supersonictt · Post by **supersonictt** » Sun May 13, 2012 10:19 pm

Thanks [RZ].

I read your post in the thread I provided. So yes, no need for the workaround at all

will be waiting for Pablo to make this fix

Thanks you

[RZ] · Post by **[RZ]** » Mon May 14, 2012 6:25 am

i think pablo is working on the reported issue.
anyhow, i did a temporary fix for the mean time.
just download the fix here: (***link removed*** the fix is now obsolete)
install it, and drag and drop it as a normal extension, once the issue is solved, you can remove it from your page, uninstall and delete it.
best regards to you all.
this fix may also be a temporary solution for all my extensions (if you are experiencing troubles).

*** EDIT ***
good news!
fortunately, i've read the issue was already fixed by pablo.
anyhow, once i receive feedback that all is working normally, i will be removing the fix as it will become obsolete.

*** EDIT #2 ***
link removed, now it is obsolete and all is working fine!
just be sure you redownloaded the *last* version.

supersonictt · Post by **supersonictt** » Mon May 14, 2012 10:19 am

Hello [RZ],

I didn't download the fix you mentioned, but installed WWB 8.1.5 after I read your post in the thread there where you mentioned that Pablo fixed the issue, and YES, everything is working as before

Thanks a lot for helping and giving some of your time to discover the issue and come up with a temporary solution

supersonictt · Post by **supersonictt** » Thu May 17, 2012 12:59 pm

Hello [RZ], am back

Just wanted to inform you about something (I don't know if it is an issue or this is how this thing works) which was there from early versions of your extension.
I have "oc" extension with a base layer, and the main layer is transparent. Now inside this transparent layer, there are two layers on top of each other which are connected to the "pagination" extension.
If I drag a text as an example inside one of those two layers (basically the one on top) the text gets separated from its border, and this happens to any other objects I try to drag inside the layer.
I am currently on version 8.1.5 of WWB and 1.6.0 of layers extensions. (The above issue also happened with older versions of WWB and layers extensions).
I attached a ready-to-test sample, all you need to do is to drag the "DRAG ME...." text object inside the green layer and see what happens.

Thanks

*****EDIT*****
Well, I know this has nothing to do with your extension, as I tried something without your extension; it seems nesting 3 or more layers inside each others generates this issue!

[RZ] · Post by **[RZ]** » Thu May 17, 2012 1:30 pm

i didn't download yet your project file, i will see at it, nesting layers in edit mode, you may get strange behaviors, this is well explained by pablo.
anyhow, you can deep nest layers with my extensions, but be extremely careful on how you edit your project, nest them visually only, but hide the base layer while you are positioning the layers that will be over the container in order to not nest them. layers are a concept in wb, are objects containers, not simple divs...
i will be back in two hours with an answer about your posted project.

[RZ] · Post by **[RZ]** » Thu May 17, 2012 1:41 pm

if you want to nest layers, lets say because you have visual structures that want to hide/show simultaneously, don't worry, move these layers to be nested to a masterpage, and include this masterpage into the layer container.

[RZ] · Post by **[RZ]** » Thu May 17, 2012 1:48 pm

i looked at your project, it has a visually issue, but behaves well in run time.
this is because of the layers nesting, but as i told you this is well explained by pablo.
move the layers to blank pages and include them as masterpages, this will solve all of these issues.
and know that the project you posted is working really fine, as expected.

supersonictt · Post by **supersonictt** » Thu May 17, 2012 2:06 pm

Yes, this is well mentioned by Pablo but I just wanted to make sure. And thanks a lot for the masterpage solution, I will try it.
The project works well as you mentioned, it has only this visual thing in design mode... Thanks a lot for helping

supersonictt · Post by **supersonictt** » Thu May 17, 2012 4:08 pm

[RZ]
Managing the project with masterpages is much easier, so thank you so much for this tip

[RZ] · Post by **[RZ]** » Thu May 17, 2012 4:11 pm

so glad to know it works better for you now.
thanks for give feedback on the matter.

supersonictt · Post by **supersonictt** » Thu May 17, 2012 5:55 pm

Hello again [RZ]

Well, I just want to ask this to see if it is easy to do, if not, then please let me know... Here is the case:
I put some objects (images and text) inside a layer. These objects will perform some CSS3 transitions and they work %100. These transitions take around 16 seconds to finish, and upon the finish, I set a timed event (just like the one you provided me) to open the first "oc" extension (which will be on second 17).
Since the 16 seconds transition is long, I added a text "Skip Intro". On clicking this text, the layer containing all the objects will hide and open the "oc" extension. BUT, since there is a timed event at second 17, this "oc" layer will close and open again! And here comes the question:
Is there any easy way to disable the timed event on second 17 when clicking "Skip Intro"?

Hope I described everything well.

Thanks

[RZ] · Post by **[RZ]** » Thu May 17, 2012 6:06 pm

the OC extension has a prevention to not re-open itself.
you can trigger 1000 times the opening sequence, but only the first one will take place.
try it by yourself:
add a dummy text to be used as a link
in that link add an event like: MyObject_open();
preview and click repeatedly on that event/link...

so, don't worry about re-re-re-opening...

supersonictt · Post by **supersonictt** » Thu May 17, 2012 6:12 pm

Thanks a lot for replying that quick

As I need to leave the PC right now, I will try it when I get back home and let you know

Thanks a million

[RZ] · Post by **[RZ]** » Thu May 17, 2012 6:14 pm

...and about the timed sequence interruption, i need to know how you implemented that intro.
but i think it may be resolved with relative ease...

supersonictt · Post by **supersonictt** » Thu May 17, 2012 10:12 pm

[RZ]
Shall I attach a sample project to show you what I exactly need?

*****EDIT*****
Yes [RZ], you are right, clicking "Skip Intro" will trigger the javascript to open the first "oc" extension (Extension1_open();), and the timedEvent to open the same extension after 17 seconds will not take effect.
BUT, I forgot something to mention (sorry

), if there are 2 "oc2" extension synchronized together, and clicking on "Skip Intro" will open the first "oc2" extension, then I click on the second "oc2" extension (which will open), on second 17, the second "oc2" will close and the first "oc2" will open again... That's why I am trying to find a way to disable this timed event on second 17 as I click "Skip Intro".

I prepared a sample, I can attach it here if you want.

Thanks

[RZ] · Post by **[RZ]** » Fri May 18, 2012 4:33 am

just an idea.
it seems you are using an intro in the same page you have the main site.
so, i suggest you to do a small change.
make your intro, while you have the [rz] Preloader (http://wysiwygwebbuilder.com/forum/view ... 42&t=46020).
set the preloader to 17 seconds.
if the user clicks on the skip intro, that is the link to the main page, will be redirected to your main site.
if the user doesn't click, anyways will be redirected once the intro is ended.
i think this way you can get rid of more complex procedures.
besides this, after the intro, the user will be redirected to the main site, and because it was loading itself while the intro is shown, will see the main site shown in a snap.

[RZ] · Post by **[RZ]** » Fri May 18, 2012 5:52 am

well, in my previous post i forgot to mention something...
sorry, i didn't neglect your intention to post a project, i think there is no need for that.
you can follow the method i posted as an alternative.
but you may insist on how to cancel a timed event, like some time ago i told you how to trigger them...
there are some reasons to get rid off from more complex procedures, the preloader extension gives you a first solution, anyhow, the way to cancel a timed event is as follows:

1. "register" the timed events (just an example, values may vary of course):
var proc1 = setTimeout('myfunction1();', 1000);
var proc2 = setTimeout('myfunction2();', 5000);
and so on...
2. lets say if a condition is true in myfuncion1(), and want to cancel the event called myfunction2, just do this:
clearTimeout(proc2);

i suggest you to use the first alternative, you can easily mess up the things with this method.
took me a lot of time all the required testings to fine tune the timed hide/show process in nested hidden/visible layers (explain all this stuff is far beyond of this humble extension/thread).
and on the other hand, my first suggestion will free up the computer's resources of your potential visitors, especially on mobile devices...
just my cent.

supersonictt · Post by **supersonictt** » Fri May 18, 2012 12:18 pm

[RZ], thanks a lot for the new suggestion, I really believed that I have to use your preloader extension, but now I think it is a must

Also, I will try the other solution... Well, actually, all my site is on the same page organized by your layers extension, so that's why I would like everything (even the intro) to be on the main page.
Anyways, here is the a sample project of what I intend to do, just for you to know how I would like it to be.
Thanks a million for the last two posts, I will read them carefully and let you know how it goes.

[RZ] · Post by **[RZ]** » Fri May 18, 2012 12:32 pm

the method you implemented, "seems" to be fine.
BUT unfortunately you will run into many downsides.
you have a transparent shape over the two OC2 extensions.
well, you cannot make any click... seems ok, right?
but what about the tab key and the enter key? your method falls...
this is only one of the reasons i said you that you may be messing up many things...
let's say you have properties like "locked" or "inactive", anyhow you must handle too many things.
so... to make the things simpler, i would make the intro and the site in two individual pages; of course, with the preloader.

(ps: don't try to make a flash-like site, also flash sites sometimes has individual sections that are loaded on-demand)

supersonictt · Post by **supersonictt** » Fri May 18, 2012 12:36 pm

[RZ] wrote: you have a transparent shape over the two OC2 extensions.
well, you cannot make any click... seems ok, right?

Yes, I put that because I want the transitions to finish first, then the transparent shape disappears so visitors can now click the links. And, the only way to click them is to click "Skip Intro".
And I guess the Tab and The Enter keys work fine after that shape disappears.

But, I didn't really get what you mean about the "locked" and "inactive"! If it is not really important then forget about it

[RZ] · Post by **[RZ]** » Fri May 18, 2012 12:45 pm

forget for now the locked or inactive.
although the extension has strong preventions here and there, nobody can guess what will be in your intro, and where it will be... also what, when, where, how many, etc, OC layers...
and open a layer while the intro is running, may get strange behaviors more like bugs in your page.
try for yourself, while the intro is running, press the tab key until the extension receives the focus and press enter...
again, the extension itself has been carefully planned, but always may be a "but"...
just my cent.

supersonictt · Post by **supersonictt** » Fri May 18, 2012 12:47 pm

[RZ] wrote: (ps: don't try to make a flash-like site, also flash sites sometimes has individual sections that are loaded on-demand)

Hehe no, am not trying to do that, actually my friend is a senior art director in an international graphic design company and he suggested an intro to explain the logo (once it is published I will post it here).
Personally I don't like flash sites, but those CSS3 animations are suitable (in my opinion) for I want to try to do.
Thanks