Please someone help me identifying this script

In this section you can share self-made extensions with other users of WYSIWYG Web Builder.
There is a dedicated section for commercial extensions.
Post Reply
supersonictt
 
 
Posts: 398
Joined: Sun May 15, 2011 10:27 am

Please someone help me identifying this script

Post by supersonictt »

Hello all

While I was previewing some jquery masonry sites, I landed into:
http://www.beyonce.com/i-was-here
And there, I found something I searched the internet for but didn't know the exact name for this script; it is the arrow located on the left, as you click on it, a panel opens AND the arrow direction changes.
Now I am aware of Adendum extension "Tab slide out", but it doesn't do the "arrow direction change" trick.
To make it clear, let me describe:
I want to add an image, lets say 600x400. At the bottom of the image and in the middle of it, I want to add an arrow pointing up, when it is clicked, an initially hidden panel from the bottom slides up to the half of the image width and the arrow changes to down direction. Now when the arrow is clicked again, the panel slides down and becomes hidden and the arrow is back to up direction.
I tried to do that with events but it didn't look so good!
I guess the one on the page I provided is the one am looking for, so could some one please help me with script name as I want to do it as an extension after trying it.

--> Using Adendum Tab slide out extension, I inserted an image, and on another page I inserted the extension and modified its settings, then on the image I inserted an iFrame and called that other page. It worked well but again, there is no way to change the arrow direction.

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

Re: Please someone help me identifying this script

Post by supersonictt »

Well, I managed to do what I wanted with events (it took me a while till I figured it out), but still, there are some drawbacks in some cases.

I also found javascripts on the internet which does the job, BUT, 99% of them slides the panel up to down, and changing it down to up needs to change the css code generated by WWB (actually I couldn't manage to do it properly!).

Anyways, the attached file contains 2 pages: index.html which contain a script, I had to hide the sliding layer by white shape, BUT that's not a solution, because if the background has a gradient then it is impossible to hide it. So are there any ideas to hide the layer initially and upon the first click it shows, then on the second click it hides again? Doing it with event is possible but will result in an awkward hide effect!
The second page is done by events. Now the drawback occurs in Google Chrome; preview page1.html in Chrome, then zoon once, you will see a small gap between "Shape2" and the layer. Plus, if you zoom more, the sliding effect gets weird!

So, javascripts GURUS, PLEASE HELPPPP!!
Post Reply