Carousel Action Beta .5

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.

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

quote

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!

quote

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

quote

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

Walter

quote

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

scripty.walterdavisstudio.com/carousel.html

You may download the Freeway file here:

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

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

quote

Thanks Walter I will look at that David

quote

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

quote

What exactly happens? Could you post an example link?

Walter

quote

Hi Walter

Nothing happens - see

www.tardiffphotography.com/menubarcarousel.html#

D

quote

BTW this is the same page without MB action

www.tardiffphotography.com/chris.html

D

quote

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

www.tardiffphotography.com/menubarcarousel.html#

D

quote

Efficient as ever.

Thanks Walter

quote

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

quote

The Carousel works perfectly with WebYep. Keeping everything editable, resizable and flexible if you delete all the div heights.

David Owen Printline Advertising :: Freeway Friendly Web hosting and Domains :: www.printlineadvertising.co.uk/freeway/

quote

Moo and scriptaculous definitely do not play well together as I’ve been down that road with other things and Weaver has also confirmed this.

Todd

On Nov 10, 2007, at 9:42 PM, waltd wrote:

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.

quote

It would be entirely possible to re-write this effect with Moo, I have published this as an open-source Action so if Weaver takes up the torch, he could do that. Otherwise, it’s sort of a Canon or Nikon kind of thing. Scriptaculous and Moo do very similar things, but you can’t share lenses between them!

Walter

On Nov 12, 2007, at 10:34 AM, Todd wrote:

Moo and scriptaculous definitely do not play well together as I’ve been down that road with other things and Weaver has also confirmed this.

Todd

quote

Sometime around 12/11/07 (at 10:39 -0500) Walter Lee Davis said:

it’s sort of a Canon or Nikon kind of thing. Scriptaculous and Moo do very similar things, but you can’t share lenses between them!

Unless you’re a hard-core panorama photographer! I know a number of high-end Canon-using people with this interest, but one of the very best lenses for this kind of work is the Nikon 10.5mm fisheye. Using an adaptor, it is possible to use this lens on a Canon body, and people do.

Me, I think this is rather perverse. Okay, for pano shooting everything must be in manual mode - which is unavoidable with the adaptor. But you also have to set the aperture physically, using cut-off Q-tips or similar things. Yes, people really do go this far! But then, it is an absolutely lovely lens. For panorama work.

My feeling is that if you want to use a Nikon lens you should use a Nikon body, for example the D70, the D80, the D300, the Fuji S5Pro… (ahem: uses a D200 body…)

;-)

k

quote

On 12 Nov. 2007, 4:16 pm, thatkeith wrote:

Sometime around 12/11/07 (at 10:39 -0500) Walter Lee Davis said:

it’s sort of a Canon or Nikon kind of thing. Scriptaculous and Moo do very similar things, but you can’t share lenses between them!

Unless you’re a hard-core panorama photographer! I know a number of high-end Canon-using people with this interest, but one of the very best lenses for this kind of work is the Nikon 10.5mm fisheye. Using an adaptor, it is possible to use this lens on a Canon body, and people do.

Me, I think this is rather perverse. Okay, for pano shooting everything must be in manual mode - which is unavoidable with the adaptor. But you also have to set the aperture physically, using cut-off Q-tips or similar things. Yes, people really do go this far! But then, it is an absolutely lovely lens. For panorama work.

My feeling is that if you want to use a Nikon lens you should use a Nikon body, for example the D70, the D80, the D300, the Fuji S5Pro… (ahem: uses a D200 body…)

;-)

k

Okay, next you’ll tell me that it’s possible to put Porsche heads on a BMW engine, and get that last little extra bit of performance that you need for your rally car!

Walter

quote

We digress.

It would appear that the Menu Bar action issue is sorted - thanks Walter.

But…

The Current Date action appears to break it as well!

www.tardiffphotography.com/chris.html

Now I am not expecting you to jump in with a fix every time there appears to be a conflict. I am really just letting you know.

As long as users are aware that there are limitations - it is still in beta after all.

David

quote

And BTW I believe you can stick a Porsche engine into a Beetle - probably a closer analogy.

quote

These are important, believe it or not. Beta is how it gets fixed, not an excuse for it not playing well with others! I have revved it again, and this fixes both problems at once. Hopefully this will be the last such action-interaction problem. (Fingers crossed.)

Walter

On Nov 12, 2007, at 2:31 PM, DeltaDave wrote:

We digress.

It would appear that the Menu Bar action issue is sorted - thanks Walter.

But…

The Current Date action appears to break it as well!

www.tardiffphotography.com/chris.html

Now I am not expecting you to jump in with a fix every time there appears to be a conflict. I am really just letting you know.

As long as users are aware that there are limitations - it is still in beta after all.

David

quote

Sorted!

Thanks Walter - where do you find the time?

D

quote

Sometime around 12/11/07 (at 14:59 -0500) DeltaDave said:

Thanks Walter - where do you find the time?

Shhh… Walter is a Time Lord.

k

quote

On 12 Nov. 2007, 7:31 pm, thatkeith wrote:

Sometime around 12/11/07 (at 14:59 -0500) DeltaDave said:

Thanks Walter - where do you find the time?

Shhh… Walter is a Time Lord.

k

Doc Walter? o.O

quote

Actually my wife is a doctor, I just get to borrow the TARDIS when she’s not using it.

Walter

On Nov 12, 2007, at 7:42 PM, chuckamuck wrote:

Doc Walter? o.O

quote

Hi Walter

just wondering if you managed to sort out the rollover/highlight functionality for the “Tabs”?

Thanks,

Tony

quote

Not yet, but that’s because I’ve been very busy with other things. I have an idea how to do it, it’s just that I need to clone myself first…

Walter

On Jan 9, 2008, at 1:41 AM, Tony Lyons wrote:

Hi Walter

just wondering if you managed to sort out the rollover/highlight functionality for the “Tabs”?

Thanks,

Tony

quote

well, you’ve done a great job so far that I’m sure everyone appreciates – Thanks!

On 9 Jan. 2008, 1:42 pm, waltd wrote:

Not yet, but that’s because I’ve been very busy with other things. I have an idea how to do it, it’s just that I need to clone myself first…

Walter

quote

Hi Walter, I can’t seem to get your example freeway File “coda.freeway” to work. Every time I attempt to load the file within seconds Freeway hangs with a permanent beachball spin. I have tried uninstalling and reinstalling the action with no joy. I am using Freeway pro 4.4.2

Any idea what could be wrong?

Thanks, Richard

On 9 Nov. 2007, 7:59 pm, waltd wrote:

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.

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

quote

Try making a new document. The fact that all of those high-res images aren’t available on your mac could be the problem. It might also be a font issue. I will try to put up a more generic version with fewer bells and whistles at some point.

Why not start from scratch. The directions:

1. Draw an HTML box the size of your carousel area. Style it how you like, borders, background color, whatever you like.
2. Either click inside the box and enter inline content, or carefully draw child boxes within the carousel area to design the first pane of your carousel. Add images or type — whatever you like.
3. Select the HTML box, and duplicate it in place (0,0 offsets). Change the content to create your second pane. Repeat until you have stacked up all of the panes of your carousel.
4. Select all of the panes and group them together. With the group selected, apply the Carousel action to the group.
5. Draw your forward and back buttons, or design them in Photoshop. (These controls must be images.) Apply the Carousel Button action to each one, and select which direction you would like it to scroll.
6. (Optional) Draw tabs to select individual panes directly. Apply the Carousel Tab Action to each one, and choose the layer you would like to show from the picking list of panes. (At this point you may smack your forehead and go back to clean up the layer names, either using the Inspector or the Site panel.)
7. (Even more optional) Create a single CSS style named ‘active’ and add a border or some other bit of style to set off the currently selected tab from the others. Apply this style to a non-layered element on the pasteboard so that Freeway will publish it.
8. Select the entire package — the grouped stack of panes, the tabs, and the forward/back buttons — and group them all together. It is not necessary to apply any further Actions to this group.
9. Repeat as many times as you like, to add additional carousels to the page.

Walter

On Jan 21, 2008, at 11:03 AM, pixelart wrote:

Hi Walter, I can’t seem to get your example freeway File “coda.freeway” to work. Every time I attempt to load the file within seconds Freeway hangs with a permanent beachball spin. I have tried uninstalling and reinstalling the action with no joy. I am using Freeway pro 4.4.2

Any idea what could be wrong?

Thanks, Richard

On 9 Nov. 2007, 7:59 pm, waltd wrote:

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.

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

quote

on 21/1/08 16:03, pixelart at email@hidden wrote:

Hi Walter, I can’t seem to get your example freeway File “coda.freeway” to work. Every time I attempt to load the file within seconds Freeway hangs with a permanent beachball spin. I have tried uninstalling and reinstalling the action with no joy. I am using Freeway pro 4.4.2

Any idea what could be wrong?

I know this does not help, but it works fine here and I can preview the sample page in Safari, albeit with an error about missing graphics source files.

Best wishes Peter

================================ Peter Tucker, Oxford UK email@hidden

quote

on 21/1/08 17:27, Peter Tucker at email@hidden wrote:

on 21/1/08 16:03, pixelart at email@hidden wrote:

Hi Walter, I can’t seem to get your example freeway File “coda.freeway” to work. Every time I attempt to load the file within seconds Freeway hangs with a permanent beachball spin. I have tried uninstalling and reinstalling the action with no joy. I am using Freeway pro 4.4.2

Any idea what could be wrong?

I know this does not help, but it works fine here and I can preview the sample page in Safari, albeit with an error about missing graphics source files.

Oh … FW 4.4.2 (5472) on PPC

Best wishes Peter

================================ Peter Tucker, Oxford UK email@hidden

quote

PLEASE HELP! I would love for this Carousel action to work for me, but it doesn’t “slide” the panes back and forth- it just jumps to the next pane, without any type of smooth transition. What am I doing wrong? Is there some kind of code that I am missing? I have followed the “tutorial” step by step, and my project still jumps instead of transitioning from one pane to the next. Any information will be greatly appreciated. Thanks.

quote

Can you please publish your result to a public Web server somewhere, and post a link? I can probably figure this out in that case. Also, please be sure that you have set the More Readable/More Efficient picker to More Readable (in the Document Setup dialog, Output pane) before you do this.

Walter

On Feb 9, 2008, at 11:58 PM, twb716 wrote:

PLEASE HELP! I would love for this Carousel action to work for me, but it doesn’t “slide” the panes back and forth- it just jumps to the next pane, without any type of smooth transition. What am I doing wrong? Is there some kind of code that I am missing? I have followed the “tutorial” step by step, and my project still jumps instead of transitioning from one pane to the next. Any information will be greatly appreciated. Thanks.

quote

Also, please be sure that you have followed the steps posted here:

scripty.walterdavisstudio.com/carousel/carousel.html

Things have changed somewhat since I first posted instructions on this list, in order to support more than one Carousel per page. If you are following the instructions from this thread, then it probably won’t work at all.

Walter

quote

Walter,

Thanks so much for the reply! The steps that I followed are indeed the ones that you linked to. I will post a public file this afternoon so that you can have a look. Thanks again.

Best,

Todd

quote

I’ve actually figured this out now- the problem was that I hadn’t grouped all of the items together at the end before publishing. One more question, however: I can’t figure out how to add the “Selected” state to the tab using the CSS style that you recommended. How is this accomplished? Thanks.

Todd

quote

In my example, I created a style manually, mostly using Extended attributes in the Edit Style dialog. If you download that example file, it’s all in there. The style has to be a class name, and it has to be called active. If you make this style, and force it to publish, then it will just work. Whatever tab is currently associated with the visible pane will be given the classname active. So as long as that class is set up in CSS, you will see the effect.

Walter

On Feb 11, 2008, at 3:57 PM, twb716 wrote:

I’ve actually figured this out now- the problem was that I hadn’t grouped all of the items together at the end before publishing. One more question, however: I can’t figure out how to add the “Selected” state to the tab using the CSS style that you recommended. How is this accomplished? Thanks.

Todd

quote

Thanks, Walter. I will take a look and keep you “posted”. Is there a CSS tutorial for Freeway around anywhere that you know of?

TB

quote

Heather has written a really thorough one, available from Softpress.

Walter

On Feb 11, 2008, at 6:33 PM, twb716 wrote:

Thanks, Walter. I will take a look and keep you “posted”. Is there a CSS tutorial for Freeway around anywhere that you know of?

TB

quote

How do I find it?

quote

On 12 Feb. 2008, 1:59 am, twb716 wrote:

How do I find it?

Go to the Softpress site under Support menu/Resources. softpress.com/support/usermanuals.php and look at the description for the Complete Reference Manual. CSS Primer is one of the sections.

quote

Thanks. I will look into it. I am just looking for more information than was in the original user manual.

TB

quote

waltd,

I’ve looked through the downloaded demo file that you’ve so graciously offered, and can’t find an “active” style anywhere. Are you sure it’s included in the file?

TB

quote

Hi Walter, This looks like a great action and I’ve tried to use it with mixed results. If I set the Carousel action to auto-glide then it works great. However, if I try to set next/previous buttons by applying the Carousel Button action (v0.5b) to a graphic they don’t do anything! Clicking on them just gives a # after the URL, no link to the pane name or anything.

Any suggestions would be welcomed!

Thanks, John

quote

After you set up your previous/next buttons and the central carousel, select all of them and group them. That’s the step you are missing.

Walter

On Mar 5, 2008, at 6:29 AM, johnrob wrote:

Hi Walter, This looks like a great action and I’ve tried to use it with mixed results. If I set the Carousel action to auto-glide then it works great. However, if I try to set next/previous buttons by applying the Carousel Button action (v0.5b) to a graphic they don’t do anything! Clicking on them just gives a # after the URL, no link to the pane name or anything.

Any suggestions would be welcomed!

Thanks, John

quote

Thanks Walter, this was the step though I had to play with checking/unchecking layers to get this work properly.

Slightly off topic but related to this and something I’ve never found an answer to: if I have a bunch of content for the various panes all on top of each other, how can I easily edit the content of panes underneath the top one? I can select the correct HTML box but I cannot click inside to edit the content - at the moment I have to delete all the boxes on top of it!

Sorry if this is basic but I can’t find the answer in the Freeway manual.

quote

Use use the site panel and toggle to show items. Click/Select an item in the panel, and hit return or enter to put the curser inside the item.

(it helps if you named all the items logically)

David

On 6 Mar 2008, at 09:25, johnrob wrote:

at the moment I have to delete all the boxes on top of it!

David Owen Freeway Friendly Web hosting and Domains :: www.printlineadvertising.co.uk/freeway www.ineedwebhosting.co.uk

quote

Thank you as ever. Now I’m working my way through the forums to find an answer as to how (if at all) to get lightbox to work within the carousel action, to click on a pic and bring up a larger image.

John

quote

Sometime around 6/3/08 (at 05:32 -0500) johnrob said:

Thank you as ever. Now I’m working my way through the forums to find an answer as to how (if at all) to get lightbox to work within the carousel action, to click on a pic and bring up a larger image.

Have you seen Cabel Sassar’s FancyZoom script? That is really, really clever and cool stuff. Other Lightbox and related things are too, and there’s a Freeway action-ified Lightbox thing too, from Max I believe. But this is a really well-implemented visual treat.

www.cabel.name/

k

quote

Hi Keith…..I would love to lay claim to the light box action but alas it isn’t me… I think you may be thinking of Weaver’s excellent Mootools action which does have a lightbox.

Unless I did do something and I cant remember any more… :o)

kindest regards max

quote

Sometime around 6/3/08 (at 07:18 -0500) max said:

I think you may be thinking of Weaver’s excellent Mootools action which does have a lightbox.

Doh! My apologies to you both. This shows why I should always, always check facts. :-)

k

quote

Sadly, MooTools-based effects won’t work within Carousel. Look for a lightbox effect based on Prototype (there are several) and you should be fine. Protaculous will help you set up the page for the effect.

Walter

quote

Hi David, When you say Carousel works fine with WebYep how do you get WebYep elements to work with Carousel Tab or Carousel Button actions as WebYep Items don’t seem to work as inline items within a graphic item? If you have a work around I’d love to know.

Regards, Richard

On 12 Nov. 2007, 2:24 pm, ineedwebhosting wrote:

The Carousel works perfectly with WebYep. Keeping everything editable, resizable and flexible if you delete all the div heights.

David Owen Printline Advertising :: Freeway Friendly Web hosting and Domains :: www.printlineadvertising.co.uk/freeway/

quote

I don’t imagine that you could get the tabs or buttons into WY, although I haven’t tried. There’s a chicken-or-egg problem in that those elements have Actions applied to them, and I don’t think one action can swap the content out of an image box underneath another action.

But you could certainly make a Carousel with N number of panes, each of which was a WY container, and each of which was populated by the CMS rather than being hard-coded. Once you step inside the individual panes, the actual content of those panes is immaterial to the Carousel working properly (as long as whatever you inject into it fits within the bounds of the pane, that is).

Walter

On Apr 23, 2008, at 8:15 AM, pixelart wrote:

Hi David, When you say Carousel works fine with WebYep how do you get WebYep elements to work with Carousel Tab or Carousel Button actions as WebYep Items don’t seem to work as inline items within a graphic item? If you have a work around I’d love to know.

Regards, Richard

On 12 Nov. 2007, 2:24 pm, ineedwebhosting wrote:

The Carousel works perfectly with WebYep. Keeping everything editable, resizable and flexible if you delete all the div heights.

David Owen Printline Advertising :: Freeway Friendly Web hosting and Domains :: www.printlineadvertising.co.uk/freeway/

quote

Hi Walter, I have tried out your suggestion - placing WebYep images items inside the panes. For some reason I can’t fathom why it only works with carousel tabs. Using Carousel Buttons when I login to WebYep to add images everything works fine - the images scroll by o.k. etc, but as soon as I logout of WebYep things become broken and the previous/next buttons don’t work so I can’t scroll the images by. However when I use Carousel tabs everything works fine. Should there be any difference?

Richard

On 23 Apr. 2008, 12:55 pm, waltd wrote:

I don’t imagine that you could get the tabs or buttons into WY, although I haven’t tried. There’s a chicken-or-egg problem in that those elements have Actions applied to them, and I don’t think one action can swap the content out of an image box underneath another action.

But you could certainly make a Carousel with N number of panes, each of which was a WY container, and each of which was populated by the CMS rather than being hard-coded. Once you step inside the individual panes, the actual content of those panes is immaterial to the Carousel working properly (as long as whatever you inject into it fits within the bounds of the pane, that is).

Walter

On Apr 23, 2008, at 8:15 AM, pixelart wrote:

Hi David, When you say Carousel works fine with WebYep how do you get WebYep elements to work with Carousel Tab or Carousel Button actions as WebYep Items don’t seem to work as inline items within a graphic item? If you have a work around I’d love to know.

Regards, Richard

On 12 Nov. 2007, 2:24 pm, ineedwebhosting wrote:

The Carousel works perfectly with WebYep. Keeping everything editable, resizable and flexible if you delete all the div heights.

David Owen Printline Advertising :: Freeway Friendly Web hosting and Domains :: www.printlineadvertising.co.uk/freeway/

quote

Sorry, I was meaning the ‘content’ of each Carousel Pane works fine. Just design the WebYep content within each carousel pane, then construct the carousel.

WebYep won’t do anything with the tab or buttons.

On 23 Apr 2008, at 13:15, pixelart wrote:

Hi David, When you say Carousel works fine with WebYep how do you get WebYep elements to work with Carousel Tab or Carousel Button actions as WebYep Items don’t seem to work as inline items within a graphic item? If you have a work around I’d love to know.

Regards, Richard

David Owen Freeway Friendly Web hosting and Domains :: (Test Drive a web hosting account for Free) www.ineedwebhosting.co.uk www.printlineadvertising.co.uk/freeway

quote

Hi - can I jump in here please. I’m working on a new site, very early days and it’s pretty rough but wondered if the .swf was causing problems with the carousel on this page:

www.rogerburton.co.uk/fway/printing.html#

anyone any ideas please ?

Regards Roger

quote

On 3 Jun 2008, 7:42 am, Roger Burton wrote:

Hi - can I jump in here please. I’m working on a new site, very early days and it’s pretty rough but wondered if the .swf was causing problems with the carousel on this page:

www.rogerburton.co.uk/fway/printing.html#

anyone any ideas please ?

Regards Roger

Select the carousel area and the two control buttons (previous and next) and group them together. Then re-publish and everything will work. I suspect you are using the old directions, which stopped being valid when I updated the Action to work on more than one carousel per page.

Walter

quote

Thanks Walter that did it - and apologies - I just (reading through again) spotted your response to another poster about this. Regards Roger

quote

Hi Dave Thank you for your ACTION CAROUSel that works perfectly. It’s a real pleasure. I meet a difficulty: I cannot associate to the TAB A rollover FUNCTION to get a bright signal when the mouse goes over it. Can you help me with this? Thank you…

quote

I haven’t cracked this particular nut yet. As you may have found, it’s not currently possible to apply the Rollover Action to the same element as the Carousel Tab Action. You can add the Actions, but the result is invalid and doesn’t work as a rollover.

The issue here is that both Actions try to build a link around the image, and neither one is aware of the other.

Walter

On Jun 11, 2008, at 9:35 AM, max wrote:

Hi Dave Thank you for your ACTION CAROUSel that works perfectly. It’s a real pleasure. I meet a difficulty: I cannot associate to the TAB A rollover FUNCTION to get a bright signal when the mouse goes over it. Can you help me with this? Thank you…

quote

I have a problem with the Carousel function, and I need your help, please. I created two functions on the same page, being careful that the two don’t touch each other. When I try a vertical slide for one, and a horizontal for the other, the background function takes over for both actions (vertical for both, for example). Its impossible to get the two slides working together, yet differently, at the same time. On top of that, I have noticed that the function in the forground is always the one that is interfered with, and its always the background that takes over. The objects that shouldn’t be involved move around without any reason, and the problem is inversed when the forground and background are inverted.

Here an exemple : www.mailbigfile.com/c57b178100a078eb242dbc492e52af0d/listFiles.php

I hope I have explained my problem well enough, and that you know how to solve it for me.

Thank you for your help.

quote

Read Actions and not function

quote

I can’t install this action. Help!

quote

The Action is distributed as a Zip archive. Be sure that you decompress it first. Then, if double-clicking the Action in the Finder doesn’t wake up Freeway and ask you to install it, you can try doing it manually:

1. In Finder, open your Actions folder: [your home folder]/Library/ Application Support/Freeway 5/Actions/General/

2. Drag the uncompressed Action bundle into the folder.

3. Switch back to Freeway.

Walter

On Jul 11, 2008, at 6:53 AM, Graham Meigh wrote:

I can’t install this action. Help!

quote

Thanks. It is working now. Is there a knack to grouping the html box text and images for each pane?

quote

There’s two basic ways to do this.

One is to use inline construction techniques. You draw an outer box to create the basic shape of the pane, then you double-click into it to get a text cursor, and start adding inline HTML or graphics boxes using Insert from the main menu. Each of these elements gets sized and positioned using the Inspector, and padding and margins give each one its shape. This is a very flexible method, but not especially Freeway-like.

The other is to draw your outer box, then, with that outer box still selected, draw additional boxes over the top of it. When the outer box is selected, it will get a blue selection highlight around its edges to show that it is the “parent” object as you draw the “child” objects. If you forget to select the outer box first before drawing the inner part and you see the selection highlight around the page itself, simply press the spacebar until the outer box becomes highlighted.

There’s one other way to do it, and that’s to just draw everything wherever, then use the Site pane in Page mode to change the nesting and stacking order of the individual objects. But this can be tricky.

Walter

On Jul 11, 2008, at 10:26 AM, Graham Meigh wrote:

Thanks. It is working now. Is there a knack to grouping the html box text and images for each pane?

quote

Hello, I’ve been able to get the carousel action working, all except for the highlight feature when choosing a tab. I’d like to see waltd’s complete/updated instructions, and his example file, but his site is offline (?).

Does anyone have these, or better yet any advice on how to get the carousel tab/highlight feature working? His instruction from 11 Feb 2008, 9:32 pm were a bit over my head:

“In my example, I created a style manually, mostly using Extended attributes in the Edit Style dialog. If you download that example file, it’s all in there. The style has to be a class name, and it has to be called active. If you make this style, and force it to publish, then it will just work. Whatever tab is currently associated with the visible pane will be given the classname active. So as long as that class is set up in CSS, you will see the effect.

Walter”

The complete instructions I’m looking for are (were?) here: scripty.walterdavisstudio.com/carousel/carousel.html

His site has been offline for at least the last two days. Thanks, Tom

quote

It seems to be working fine here.

Walter

quote

Strange…for me both links time out…

scripty.walterdavisstudio.com/carousel/carousel.html and www.walterdavisstudio.com

I’ve tried it at home (firefox, safari on a mac), and the www.walterdavisstudio.com site at work on a PC…

Would it be possible for you to email me the instructions from your site as well as the example file you referenced earlier (11 Feb 2008, 9:32 pm) to set up the highlight feature?

I set up an alias email address in my mobileme acct:

carouselaction “at” me.com

Thanks for your help here. Not sure why I’m having trouble accessing your site… Regards, Tom

quote

You are right Tom - neither link is working for me!

Network Timeout

The server at scripty.walterdavisstudio.com is taking too long to respond.

David

quote

Same here Walter.

On 12 Aug 2008, at 07:29, DeltaDave wrote:

You are right Tom - neither link is working for me!

Network Timeout

The server at scripty.walterdavisstudio.com is taking too long to respond.

David

quote

Grrrr. I updated my server last week, and it all seems to work here, but I just shelled into a server in Indiana, and I can’t see it from there either.

Something funny in the network, or the Web service.

Walter

quote

Here’s the latest instructions, copied from the page only I can see (at the moment):

Instructions

1. Draw an HTML box the size of your carousel area. Style it how you like, borders, background color, whatever you like.
2. Either click inside the box and enter inline content, or carefully draw child boxes within the carousel area to design the first pane of your carousel. Add images or type — whatever you like.
3. Select the HTML box, and duplicate it in place (0,0 offsets). Change the content to create your second pane.
4. Repeat until you have stacked up all of the panes of your carousel.
5. Select all of the panes and group them together. With the group selected, apply the Carousel action to the group. Draw your forward and back buttons, or design them in Photoshop. (These controls must be images.) Apply the Carousel Button action to each one, and select which direction you would like it to scroll.
6. (Optional) Draw tabs to select individual panes directly. Apply the Carousel Tab Action to each one, and choose the layer you would like to show from the picking list of panes. (At this point you may smack your forehead and go back to clean up the layer names, either using the Inspector or the Site panel.)
7. (Even more optional) Create a single CSS style named ‘active’ and add a border or some other bit of style to set off the currently selected tab from the others. Apply this style to a non-layered element on the pasteboard so that Freeway will publish it.
8. Select the entire package — the grouped stack of panes, the tabs, and the forward/back buttons — and group them all together. It is not necessary to apply any further Actions to this group.
9. Repeat as many times as you like, to add additional carousels to the page.

quote

My server is back in the world. FYI, the public IP address must be set to be the primary interface in the Network control panel. Unless this is done, the Apache server is deaf. There was full network connectivity through that interface, both ways, but Apache wasn’t listening.

Walter

quote

I’m in! Thanks for sending the instructions.

I’ve gotten everything working except for # 7 (highlight tabs). Your instructions from 11 Feb 2008, 9:32 pm were a bit confusing:

“In my example, I created a style manually, mostly using Extended attributes in the Edit Style dialog. If you download that example file, it’s all in there. The style has to be a class name, and it has to be called active. If you make this style, and force it to publish, then it will just work. Whatever tab is currently associated with the visible pane will be given the classname active. So as long as that class is set up in CSS, you will see the effect.

Walter”

Do I apply that “style” to all the tabs? or to the carousel box? When you say the style has to be a class name (action), how do you define it as such - just name the style “action”? What exactly did you add to the extended attributes box? It doesn’t give options from what I can tell, you have to add the values…

It would be a huge help if you could describe (in basic terms) how you created this aspect for the example on your site, where the chosen tab is highlighted. That is a great effect.

Thanks again for contributing this action to the community. Tom

quote

You just need to create the style, and make sure it publishes into the page. You don’t apply it to anything. The easiest way to manage that is to make it a “Tag-only” style.

Choose New Style in the cog menu at the bottom of the Styles palette. In the Tag field, enter ‘img.active’ (without the quotes), then tab into the Name field, delete whatever is there, then tab back out again to set the “no name” behavior permanently.

Now set your styles. Much of what I did (borders and negative margin) have to be added through the Extended dialog, as there’s no clear way to add them in the menus.

That’s it — the style will magically publish to the page, without you applying it to anything. And the Carousel code will magically apply and remove that classname as the current tab changes.

Walter

On Aug 12, 2008, at 2:13 PM, TomK wrote:

Do I apply that “style” to all the tabs? or to the carousel box? When you say the style has to be a class name (action), how do you define it as such - just name the style “action”? What exactly did you add to the extended attributes box? It doesn’t give options from what I can tell, you have to add the values…

quote

Thanks Walt, but no luck - I’m not seeing any of the styles applied, per your instructions. Here’s what I did, starting from a working carousel:

1. Edit, Styles…, cog, New Style Sheet.
2. Hit the “+”, kept default name “sheet”, entered “img.active” in “Tag” field, deleted the Name, made sure Permanent is checked.
3. For the style, under Graphic Text Effect, I enabled the “outer glow” style, and added the color blue. My tabs were simple graphic boxes with text inside.

When I hit the tabs, the panes glide like they are supposed to, but there is no effect in the tabs. What parameters are you adding to Extended Attributes?

Am I doing something wrong?

Thanks, Tom

PS: I looked at the coda.freeway file, but didn’t see an img.active style, or anything in the extended attributes fields…

quote

The only attributes you can add are CSS attributes that would work on a graphic. Pretty much, borders.

img.active {
    border: 1px solid #ccc;
    border-bottom: none;
    margin: -1px -1px 0;
}

Try that.

There is an .active style in the demo file, but I don’t remember how I wedged it in there. The steps I outlined here will work as long as your style contains something that CSS can work with.

Another trick you could try would be to set your tabs to have clear backgrounds, then use CSS to add the color in and change the color when active:

Make each tab have a background of none. Using the Item > Extended dialog, add a classname to each tab. Click New, then enter ‘class’ and ‘tab’ in the Name and Value fields. Create a new style called img.tab, and set it to have a background-color of white. Then change img.active to have a background-color of yellow.

Walter

quote

I’ve not been able to get things working - I think the problem is that I’m new to both Freeway and website design. I’m probably better off sticking with canned actions until I get up to speed. I’ve gotten 80% of the carousel working - everything but the highlight tab feature. Are there any plans to add this into the Carousel Tab action in the future? Regards, Tom

quote

This would be really hard to add to the Action without severely limiting the number of options available for your tabs. I’ve made an example showing the style in action, and I’ll post it on my server in a moment. I did have to make one change in the instructions I posted above — where I had img.tab and img.active, I needed to make the second one img.tab.active in order to override the background set in img.tab. You should see what I mean when you look at the file.

Walter

quote

Many thanks Walt. Do you have a link for the example file?

quote

It’s in the same spot as all my Actions:

freewaypro.com/actions/downloads/

It’s called tabs.freeway.zip

Walter

quote

Now I get it. Thanks so much for your patience, this is exactly what I was hoping to do. Tom

quote