I just pushed an update to the Carousel Action (and Protaculous, on
which it is based). Most of the updates were minor, and focused on
greater compatibility between Protaculous and the Softpress FX
Actions. One new feature is the Carousel Text Tab, which translates
the function of the Carousel Tab action to HTML text. You can use this
Action inline within a CSS Menu, for example, to have a drop-down menu
that triggers your Carousel on the same page.
I hope to get a new example page up very soon, and it should cover
more examples of how to build various effects using Carousel.
Walt, when you have the time, could you please add an option to view more entries on the home page? As it is we only get to see the top 5. Or perhaps a scrolling view so that we can browse through the whole list on one page?
I did install the updated version, and deleted the old one. However, in my edit/actions, it lists as an item and not an action. I have tried to apply it on either the carousel tab, or in the CSS menu text (list) but it is not available.
Okay, there are new versions of everything, rolling back to the
previous versions of Prototype and Scriptaculous, which was what the
issue was.
ScriptyLightbox 0.3.5
ScriptyAccordion 0.6.2
Protaculous 0.6.2
Observer 0.2.3
Carousel 1.2.5
Carousel Pane 0.3.3
Carousel Button 0.9.3
Carousel Text Tab 0.2.3
Carousel Tab 0.7.3
These will actually sneak more recent versions of the libraries in,
and link to Google to get them, but only if they run last in the
publish order. Otherwise, everything is the same. There are some nice
bug fixes throughout, particularly with respect to elements that
already have className properties added to them – we don’t override
those any longer.
I did install the updated version, and deleted the old one. However,
in my edit/actions, it lists as an item and not an action. I have
tried to apply it on either the carousel tab, or in the CSS menu
text (list) but it is not available.
That’s the way that Text actions work in Freeway. You can’t apply an
action to a run of text by highlighting it and applying an Action (I
wish – would be cool!). Instead, you double-click into your stream of
text and choose Insert / Action from the main menu. These are known
internally as action-items, meaning they generate an item – in this
case, text. You will see a little 12px x 40px or so box with an Action
icon in its corner. When you have this item selected, you will see its
interface in the Actions palette. That interface is where you add and
edit the text that the Action will generate within your layout.
I get how the CSS text tab works. It does not seem to be able to connect to a pane on another page… is that so. Can I tweak it further myself to use in my main meny for the whole site?
Oh yes, forgot to ask… Is there a convenient way to check that I have the latest version of the actions. I have noticed that when I install a newer version on top of an old, things seems a bit dodgy…
You can’t connect to a pane on another page using an Action, but you can create a manual link using the regular Hyperlink dialog that will do this.
What you need to do is go to your target page first, locate the pane you want to slide into view, and note its ID. If you click once on the pane, you should see this in the Inspector, on the left-most tab, confusingly labeled Title. Also note the filename of the page (click on the pasteboard or anywhere off of an object so that nothing is selected, and look in the Filename field in the Page Inspector).
Now move back to the page where you are creating the link. Enter your link text on the page, select it, and press Apple-K to open the Hyperlink dialog. Click on the External tab, and in the large text field, enter filename.ext?theIdYouNoted. So filename.ext is to be filled in with the actual filename of the page, and the text after the question mark is the ID of the pane. (It’s case-sensitive.) Okay the dialog, and make any other style changes you like.
Now publish and try it out. The target page should load first, then the carousel should animate over to the pane you indicated.
Works just as you said! Only, my CSS menu style is lost. (The rollover background color works, but only partially). How can I retain the style of my CSS menu, and use the external hyperlink through your eminent carousel text tab action…?
I’m confused. Are you having problems with the manually-entered text, or the text entered by the Action?
If the former, then it’s usually a case of battling styles. If you have applied styles to your links, then that might override the styles created by the Action. You need to enter the barest, most un-styled and ugly text you can inside the menu elements. Rely on the Action to add styles – then all options will look alike.
The menu itself is just a list. The style is applied by CSS menu action (only). When I insert the carousel tab text in the list, that style is lost. The carousel text tab action does not seem to have any formatting functions. Where would I edit the style, and how?
This is exactly what I have been waiting for. Any chance you could update your tutorial sooner than later. I am particularly interested in the drop down menu.
Hi. I just made one of these to be sure I wasn’t talking through my
hat or similar. The only thing that’s even remotely difficult about it
is that it’s really ugly in the design view.
Here’s how to make a linked list menu full of nothing but Carousel
Text Tabs.
Draw an HTML box, double-click inside it so you have a text cursor,
and choose Insert / Action Item / Carousel Text Tab from the main
menu. You will see a large-ish Action box appear inline in your HTML
box. Click on one corner of the Action and resize it to be 12px high
or less, so it occupies a single line of text. While this box is
selected, enter the link text and target the desired pane in the
Actions palette.
Press Return, and repeat the first step until you have all of your
tabs in place.
While you still have a text cursor inside the HTML box, select all
and use the List control in the Inspector to indent the whole thing
one level.
Select the HTML box and apply the CSS Menus Action. Adjust the
preferences for the colors and link styles of the options. Don’t worry
that the font is all Times or whatever is default for you. You’ll
change that later. As soon as you publish, all of your inline Actions
will appear missing. The whole thing will look really wrong in the
design view from this point on, so you’ll need to check as you go in
the Preview mode.
In the Styles palette, click on the cog menu and choose New Style
from the popup menu. In that style, create all your font choices for
the menu. Once you have it how you like, click once on the HTML box
that holds the menu, and once on the new style you created. Preview
again, and your menu should be complete.
Walter
On Apr 20, 2010, at 4:44 PM, Zignar wrote:
The menu itself is just a list. The style is applied by CSS menu
action (only). When I insert the carousel tab text in the list, that
style is lost. The carousel text tab action does not seem to have
any formatting functions. Where would I edit the style, and how?
I have followed everything above to the letter but the carousel is not moving. Should I target each carousel pane from each tab or the main carousel itself.
Have you made a Carousel that works yet? Get one working, and make regular image tabs for it, and make sure that it works the way you think it should.
Once you’ve done that, try replacing each graphic tab with a text tab. Now if this all still works, try cutting a text tab from the page and then double-click in a text box and paste it. If it still works, then try wrapping it in a list, then try applying the CSS Menus to the box.
Take it a step at a time, and see where it breaks.
2nd para up to pasting into a text box is fine. When I add the CSS menu action to the containing box, it stops functioning. Is there a particular way to add the css action. I am adding it from the actions pallet.
Huh. You’re right. There must be something about the order of Actions
during the publish process that is causing this problem. I’ll follow
up with Softpress.
Walter
On Apr 21, 2010, at 4:18 AM, scoutdesign wrote:
By the way, I have indented the list by one level within the css box.