[Pro] Protaculous - can I do this . . .

Using the test page I have here using the Protaculous Action - is it possible to add more instances of the menu item “we love this image” to create more sliding elements that will open and close on click? Even better if that click would change the image behind it?

Thanks

Trevor

http://www.trevormckay.co.uk/test1/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s possible to make all kinds of new elements appear and disappear, but without a clearer idea what you mean by “more instances”, it’s going to be hard to explain what to do next.

Can you either write this up in prose (as if you were describing it to a blind person), or make a mock-up that does one instance of what you’d like it to do multiple times? If you make a small set of pages, where each page is a duplicate of the previous, except it has the one new element added manually that the page you clicked from lacks, and you write up some steps like “first you visit this page, then you click on X, then Y appears, then you click on Z and A appears”, then maybe I can suggest some magic to make it all happen in a single page, rather than the set of separate pages.

Walter

On Mar 7, 2014, at 3:47 AM, t50ufo wrote:

Using the test page I have here using the Protaculous Action - is it possible to add more instances of the menu item “we love this image” to create more sliding elements that will open and close on click? Even better if that click would change the image behind it?

Thanks

Trevor

http://www.trevormckay.co.uk/test1/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter

Sorry I was not too clear what I am trying to do!

my test page is here:
http://www.trevormckay.co.uk/test1/

If you imagine the menu items are in the position
where my “we love this image” button is

I would have something like

HOME

ABOUT US

MENUS

GALLERY

CONTACT US

on clicking a menu item the panel pops out with text etc. as per my example
and an image relating to that panel appears in the background.

On selecting the next menu item the panel for that item slides out and it would be cool if the previous one slid back in and was replaced with the new one! and again an new image in the background relating to the pop out panel.

and so on for each of the menu items.

my client would like me to emulate this site to some degree

I know the background there is a slideshow but that is not really important.

http://theblackcatrestaurant.com/

so hope that explains a wee bit better.

Thanks

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Walter did you have a chance to look at this?
Under pressure now from client! If I had something basic to work on.

Thanks

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, very full weekend here. I did a sample of this years ago, and Dave did a version of it more recently, with a newer version of Freeway. Here’s my example, hopefully Dave can post his in this thread.

http://scripty.walterdavisstudio.com/ttt

The Freeway file from mine can be downloaded here:

http://scripty.walterdavisstudio.com/ttt/ttt.zip

Note that this is using older versions of Prototaculous, you would do well to add the PrototypeUpdate Action on top of this, just to get your Prototype and Scriptaculous up to a version that will work with the latest browsers.

Walter

On Mar 10, 2014, at 8:03 AM, t50ufo wrote:

Walter did you have a chance to look at this?
Under pressure now from client! If I had something basic to work on.

Thanks

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not a problem Walter - Just have to meet with the client later today!

Much appreciated and I will take a look.

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter

This looks very promising

How do I add another colour element under Blue?
I don’t see where the trigger for the new element is.

If I can get that I think I can make this work for me.
Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry, I missed something here. What do you mean about a trigger for a new element? Do you want to be able to insert a completely new “pane” on the fly in the page? If you do that, what would happen if the same person returned again later or reloaded the page in her browser?

You see, it’s trivially easy to “clone” an object on the page into a new instance of itself, and make that element appear and disappear. But that’s all done in the browser, in memory, and never persists anywhere. Just reloading the page would make the clone disappear unless you had some persistence layer somewhere to store it.

Where you store it depends on your application and what it does. If the pane only ever needs to be seen by a single person/browser, then you could use HTML5 local storage to save it in the browser. Only that person would ever be able to see it. If you need to be able to add a pane and share it with all visitors to the site, then you would want a server-side storage solution, either flat files or a traditional database.

On the other hand, if all you’re trying to accomplish here is to add a fourth tab in place of the three already there, that’s done by duplicating the pane in Freeway, and noting how the panes are identified. The script in this example uses the ID of the pane (which is set in the Name/ID field of the Item Inspector in Freeway, and you would need to rewrite the JavaScript (set in the Protaculous Action) to recognize that new element.

Walter

On Mar 10, 2014, at 10:19 AM, t50ufo wrote:

Hi Walter

This looks very promising

How do I add another colour element under Blue?
I don’t see where the trigger for the new element is.

If I can get that I think I can make this work for me.
Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter

Yes - all I want to do is add a fourth Tab. (another colour box under the blue one called - majenta)
I duplicate the “button” element with the Observer action attached to it and
I enter a new element in the shell in this case I am calling it magenta but I don’t understand where I “rewrite the JavaScript (set in the Protaculous Action) to recognize that new element”

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Make sure the Actions palette is open, then click on the button graphic and look in the palette. You should see a set of events that the script will listen for, and a button right of each one which will open the code editor. Locate the one you just added, and see what it is set to do (should be set to open the pane you duplicated it from). Change any references to the original pane, and substitute your ‘magenta’ ID (case-sensitive!). Close the dialog, preview in a browser, and see if it works. If it doesn’t work, please post it somewhere public, and send us a link where one of us can help you debug it.

Walter

On Mar 10, 2014, at 12:33 PM, t50ufo wrote:

Thanks Walter

Yes - all I want to do is add a fourth Tab. (another colour box under the blue one called - majenta)
I duplicate the “button” element with the Observer action attached to it and
I enter a new element in the shell in this case I am calling it magenta but I don’t understand where I “rewrite the JavaScript (set in the Protaculous Action) to recognize that new element”

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ahh! Now I see - I will have a go later when I get a bit of time.

Thanks.

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not there yet! Missing something!

I duplicated the blue button - changed its colour to majenta
and called it majentatab.
I added another pane under the blue one and called it majenta.
On the Button - I click on the observer Function Body and change the references there to majenta
on publish I get

JavaScript Error message box

Observer
file has no properties

red arrow pointing to:
scriptTag.src=fwQuote((!file.match(scriptaculous") ? file : file+scriptyLibs));

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Post a link so we can see the code.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi David

Sorry - I can’t publish the page. I get an error saying
Action has JavaScript Error.
Action: “Observer”, Page: Untitled"

The test page I am working on is called “Untitled”

Sorry but don’t know what to do.

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you want to copy the page into a new FW doc and email it to me I will have a look.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Check your ‘majenta’ observer

You appear to have duplicated “duration:0.4” on the 4th line

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks David

for pointing me to change the Protaculous Action to Protaculous2 Action via email on checking my file. All is looking much better now but there is still a little problem.
If you have a look at my test page here:
The buttons are aligned to the left to clarify: On clicking a few sequences the buttons move the the right a couple of times before settling down - any idea why this is?

http://www.trevormckay.co.uk/salley/

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The script assumes the buttons (the coloured squares) are 55 pixels from the left edge of the browser window. Until they move beyond this point the script moves them out but never back again.
Either change the line of code in the markup to suit your button left offset like this;

if(elm.positionedOffset().left > 0) 

or position your buttons 55 pixels from the left edge of the page.
Regards,
Tim.

On 10 Mar 2014, at 21:47, t50ufo wrote:

The buttons are aligned to the left to clarify: On clicking a few sequences the buttons move the the right a couple of times before settling down - any idea why this is?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Tim

I just figured it out as your message notified me!

I see now where I went wrong.

Trial and error on my part!

Many thanks for your reply and taking time to do so.

Regards

Trevor


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options