Carousel Action Beta .5

Legacy ActionsDev
1

The Carousel Action has been cleaned up for Windows. It’s been tested on IE7/XP, but I would appreciate some more coverage if you have other browsers handy.

http://freewaypro.com/actions/downloads/protaculous.fwactionb.zip

Known limitations: Only one carousel per page.

Here’s a quick run-down of how to use it:

Draw an HTML box the size you want your carousel area to be. If you want to have a border or other decoration, be sure to add it to this element. We’ll refer to this box as a ‘Pane’ as we go along. A carousel is made up of multiple panes, which slide horizontally to reveal one pane at a time. (Prime example would be http://panic.com/coda )

Using either Inline or Child elements, draw the content for your first pane within the HTML box.

Select the HTML box and duplicate it in place (0,0 offsets).

Change the duplicate content to create your second pane, directly on top of the first. Repeat as necessary to create all of the panes of your carousel.

Drag a selection rectangle around the corner of your stack of panes to select all of them. Group the stack. With this group still selected, apply the Carousel Action.

If you would like the panes to scroll on their own using a timer, add a number of seconds into the AutoGlide Interval field in the Actions palette.

To add previous/next controls, draw a graphic box for each control, and apply the Carousel Button action to each. You may only have one previous and one next button on a page.

To add direct navigation (to select individual panes), draw a graphic box and apply the Carousel Tab Action to it. You will be able to choose which pane each tab targets using a picker in the Actions palette. And you will probably wish you had given each pane a distinctive name at this point.

More later, and examples, once I have a few moments.

Walter

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

2

Walter

I cant get this to work for me at all - very frustrating.

Does the page level html have to be at a certain level?

Or more likely I just cant be following some simple instructions properly.

Maybe I should just wait for a sample freeway doc.

David

PS You spoil us!

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

3

Try the following:

  1. Make a page, set it to XHTML Strict (just because you can!)
  2. Draw a single HTML box on the page. Make it as big as you want your carousel window to be.
  3. Give it a 1px border and a white fill.
  4. Click on the HTML box tool again, and start drawing another box, clicking inside the first box to start, and finishing your drag still inside the box. This creates a child element to the first box. Give this second box a green fill.
  5. Create a third box inside the first box, and type some text in it.
  6. Drag a selection rectangle around the corner of the first box, and select Edit > Duplicate from the main menu.
  7. Choose 3 copies, 0, 0 offset.
  8. Drag a selection around all of the boxes, and group them (Item > Group).
  9. Apply the Carousel Action to the group, and set the AutoGlide to 2.
  10. Preview in a browser.

You should see the carousel element scroll right, right, right, then allthewayleftandstartover.

Walter

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

4

New version, minor update to the Tabs Action, making the references to the targets truly dynamic. (Thanks, Weaver!)

Walter

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

5

Okay, I have revved the example page. This is now entirely built with Freeway and the Carousel Actions – no Source Code Snooper etc.

http://scripty.walterdavisstudio.com/carousel.html

You may download the Freeway file here:

http://scripty.walterdavisstudio.com/coda.freeway.zip

One thing that’s missing from the tabs, but very nice about the Coda site, is the way that the tabs change to show the current state. I am thinking about how to implement this in a Freeway-centric way, but no brainstorms just yet.

Walter

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

6

One thing I noticed while making the example was this:

If you want to make a child of an HTML box, you can’t just start drawing the child over the parent and get the child behavior. It seems that you have to have the parent selected, and then start drawing the child. Then you get the blue highlight inside the parent, and the square cursor [+] indicating that you are making a child.

You can force the issue, as always, by enabling Show Items or showing the page rather than the site in the Site panel, and then dragging and dropping elements to put them into the appropriate hierarchy.

Dave, if you were having trouble getting the basic effect to happen, it could be that you were not creating your panes as nested elements, for the reason that it’s not immediately obvious how to do that in Freeway.

Walter

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

7

Yes Walter you were exactly right with that assumption.

Now that I have seen your example FW doc it is all clear and I have it working - and I hope to have a live version on a Photographer friend’s site very soon.

As usual you show great patience with us all.

We do appreciate it.

David

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

8

One other thing - is it possible to add links and/or actions to the panes

I am particularly thinking about Weaver’s moo tools Lightbox or even just a Link to new window.

David

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

9

I believe you can do whatever you like within the panes. The Action
just wraps each pane in an additional DIV element. Everything else
about the Action is external to the content.

Walter

On Nov 10, 2007, at 4:53 PM, DeltaDave wrote:

One other thing - is it possible to add links and/or actions to the
panes

I am particularly thinking about Weaver’s moo tools Lightbox or
even just a Link to new window.

David

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

10

The only thing that does NOT play well is Flash. It tends to “leak”
out of the hidden container, because of the way that Flash chops
through everything else on the page. It may look fine at first, but
start scrolling it around and you will see ickyness.

Walter

On Nov 10, 2007, at 4:53 PM, DeltaDave wrote:

One other thing - is it possible to add links and/or actions to the
panes

I am particularly thinking about Weaver’s moo tools Lightbox or
even just a Link to new window.

David

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

11

I have tried Pic to new window and Weavers lightbox action on different panes (actually on the picture boxes within the frames)
PTNW on pane1 and WLB on the other 3 in this example at: http://www.tardiffphotography.com/carousel2.html

While PTNW works WLB doesn’t and shows the pics as if there is no javascripting going on

“It appears you have Javascript disabled.
Please enable for a richer browsing experience.”

Any ideas?

David

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

12

Weaver’s action might be installing another version of prototype and MooTools may be conflicting with scriptaculous. Not sure what else might be going on here. There are a few slideshow scripts that work with prototype, maybe that would be the thing to try.

Walter

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

13

Thanks Walter
I will look at that
David

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

14

That pest again

I can’t get Carousel to wortk on a page that has the Menu Bar (1.4.1) action on it.
Any ideas

David

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

15

What exactly happens? Could you post an example link?

Walter

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

16

Hi Walter

Nothing happens - see

http://www.tardiffphotography.com/menubarcarousel.html#

D

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

17

BTW this is the same page without MB action

http://www.tardiffphotography.com/chris.html

D

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

18

The MenuBar action is moving parts of the JavaScript around after
Protaculous has written them to the page. As a result, the call to
one of the functions is happening before the script that contains it
is even loaded into the page. I am moving things around in
Protaculous to make them publish sooner in the page, perhaps that
will fix it. I will let you know.

Walter

On Nov 12, 2007, at 9:41 AM, DeltaDave wrote:

Hi Walter

Nothing happens - see

http://www.tardiffphotography.com/menubarcarousel.html#

D

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

19

Efficient as ever.

Thanks Walter

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

20

Okay, download the latest. Carousel is now version 0.5.1 – make sure
that’s what shows up in your Actions palette (bottom right corner)
when you have something selected that uses that Action. There are
minor changes in Carousel Tabs, but no new functionality. I have laid
the foundation for creating the rollover and selected tab states, but
none of that is working yet.

Walter

On Nov 12, 2007, at 9:53 AM, DeltaDave wrote:

Efficient as ever.

Thanks Walter

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