Hi everyone,
Sorry if this is a stupid question but I am a newbie with the whole action thing. I have started using Carousel to make slideshow and galleries and it works great. My only problem so far is that I can’t find a way to put some sort of indicator on the tab that is currently showing. Is there a way I to show which tab/panel is actually displaying on the screen?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Create a style called .active (just that, nothing else). You do that
by putting .active in the Tag field in the Edit Style dialog, tabbing
into the Name field and deleting whatever Freeway put in there by
default, and then tabbing back out to confirm that you really want the
Name to be empty.
The types of things you can add to this style depend a lot on your
layout. One trick I have used to great effect is to make the tabs as
transparent GIF or PNG images, then set a background-color attribute
on the .active tab. Another attribute you can work with is the border.
Note that Freeway makes this impossible to set directly – you have to
use the Extended interface to add the border to your style.
Walter
On Jul 19, 2010, at 11:03 AM, Nont wrote:
Hi everyone,
Sorry if this is a stupid question but I am a newbie with the whole
action thing. I have started using Carousel to make slideshow and
galleries and it works great. My only problem so far is that I can’t
find a way to put some sort of indicator on the tab that is
currently showing. Is there a way I to show which tab/panel is
actually displaying on the screen?
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
Hi Waltd,
Many thanks for your tips. At the moment my site has a grey colour background and each tab is represented with a small dot (made from fonts in graphic form). What I want to do is that as the current pane move, the appropriate dot (ie. tab) lights up. I tried applying .active to the style setting of the tab, with .active setting set so that the font gets slightly bigger and change to white but nothing seems to be happening. Is there something I’m doing wrong or I should approach it from another angle?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You’d have to go at this a different way in order to get that effect. Since the Action can only be applied to images, the only way to do this at the moment would be to make your tab a clear gif, then apply your normal image as a background-image property on that image, and create a separate ‘#yourTab.active img’ style to swap that normal background-image for the active version. This means you’d need one such style for each normal image and another for each active image (and you’d need to upload those images separately, too). That’s why I recommend making your tab text as a clear gif or png with graphic text in it, and then manipulating the background-color property or borders in a single .active style. It’s less of a maintenance nightmare that way.
Walter
On Jul 20, 2010, at 11:29 AM, “Nont” email@hidden wrote:
Hi Waltd,
Many thanks for your tips. At the moment my site has a grey colour background and each tab is represented with a small dot (made from fonts in graphic form). What I want to do is that as the current pane move, the appropriate dot (ie. tab) lights up. I tried applying .active to the style setting of the tab, with .active setting set so that the font gets slightly bigger and change to white but nothing seems to be happening. Is there something I’m doing wrong or I should approach it from another angle?
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
I’d be interested in finding out if you get this to work Nont!!?? please post details if you do.
@ Walt
On 20 Jul 2010, 3:42 pm, waltd wrote:
You’d have to go at this a different way in order to get that effect. Since the Action can only be applied to images, the only way to do this at the moment would be to make your tab a clear gif, then apply your normal image as a background-image property on that image, and create a separate ‘#yourTab.active img’ style to swap that normal background-image for the active version. This means you’d need one such style for each normal image and another for each active image (and you’d need to upload those images separately, too). That’s why I recommend making your tab text as a clear gif or png with graphic text in it, and then manipulating the background-color property or borders in a single .active style. It’s less of a maintenance nightmare that way.
Walter
On Jul 20, 2010, at 11:29 AM, “Nont”
Walt when you say create style ‘#yourTab.active img’ I’m a little confused as to how to approach this? Create tag called myTab.active tab to name and tab out again and select a .active BG image to replace the normal one
?!!!
I think I want to create a similar effect to what Nont was describing!
Here is a link to my current workings:
http://www.edwardlawlor.co.uk/fw/carousel.html
As you can see I have shown two TAB examples. The oval one seems to want to display the outer edges of the graphical box that the oval resides in? Why is this? And can this be overcome via some code in the extended dialogue?
I have also tried variants on using a oval .png file as the BG image for the .active style. This works well and I like this option, however if I try a set a foreground colour (to indicate other tab element on the page) ie. #ccc then when the button/tab is clicked my .png appears in another colour to highlight that this is indeed selected! My current work around is to apply a border to the transparent graphic item.
But say for instance (like Nont) my page has a BG colour #cccccc and I want my dotted tabs to be white when idle and black once selected for instance! Can I do this using a .img or would I have to use html • (alt 8) on a mac and set the .active style to my desired font size, colour etc.
Having 2 states may not be possible? But I also noticed that the Panic site does have a rollover tab state incorporated within their carousel! This a nice feature that I’b be interested if possible in FW.
Sorry to ask so many questions Walt.
Worm
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for posting your experiments. This makes it easier to see what
you’re trying to do.
On Jul 23, 2010, at 7:48 AM, Mr worm wrote:
As you can see I have shown two TAB examples. The oval one seems to
want to display the outer edges of the graphical box that the oval
resides in? Why is this? And can this be overcome via some code in
the extended dialogue?
All images on the web are rectangular, even the circles and ovals.
What you’re going to need to do is to create an image in Photoshop,
saved probably as a 24-bit PNG, to use as your circular bullet. It
should be solid [your page background color], with a transparent hole
in the center where the bullet should appear. Then use the background-
color property of a #yourTab img style to set its “normal” state, and
a #yourTab.active img to set its active state.
I have also tried variants on using a oval .png file as the BG image
for the .active style. This works well and I like this option,
however if I try a set a foreground colour (to indicate other tab
element on the page) ie. #ccc then when the button/tab is clicked
my .png appears in another colour to highlight that this is indeed
selected! My current work around is to apply a border to the
transparent graphic item.
You can create two different images of your oval, and set them as the
normal and active background image to a transparent GIF button. Draw a
graphic box, but don’t give it any fill color. Apply the Carousel Tab
Action to it. Create two styles:
.controls a img { background-color:#ccc; }
.controls a img.active { background-color:#cc0; }
(I had it wrong previously in these explanations – the .active class
gets added to the image, not to the link, so it’s not a.active img
that you need to fiddle with.)
Here’s how you force Freeway to add these styles to your page without
you needing to apply them to anything. (Follow these steps blindly –
each step is important.)
Click on the cog menu in the Styles palette. Choose New style…
The Name field will say style4 or something similarly useless.
Ignore that for the moment.
Tab or click into the Tag field. Enter the selector part of the
style (everything outside of the curly braces), so for example
.controls a img.
Tab into the Name field, so its contents are selected, and delete
whatever is there, leaving the field empty.
TAB BACK OUT so that Freeway “sticks” that property as empty. It
will try to sneak style4 back in there the moment your back is turned,
so be vigilant about this and make sure that the Name field is empty
when you finally Okay the dialog.
Use either the Extended sub-dialog or the regular style tools in
the rest of the Edit Style dialog to add your properties. Backgrounds
(image and color) are found in the Character style picker, for some
reason.
Double check that the Name field is empty, and Okay the dialog.
A style made in this manner does not need to be applied to anything –
and really shouldn’t, because it can make for some really strange
effects. This sort of no-name style will always publish to the head of
every page, or to the external stylesheet if you’re using those.
Unlike styles that you click to apply in the design interface, you
will not see their effects in the design view, and Freeway will not
“prune” unused styles to save a few bytes. You will see the effect of
the style in the Preview, or if you preview in a browser.
But say for instance (like Nont) my page has a BG colour #cccccc and
I want my dotted tabs to be white when idle and black once selected
for instance! Can I do this using a .img or would I have to use html
• (alt 8) on a mac and set the .active style to my desired font
size, colour etc.
You can’t use HTML for these elements, so setting a bullet would only
work if you set it as an image, and you’d be back at the same spot.
Having 2 states may not be possible? But I also noticed that the
Panic site does have a rollover tab state incorporated within their
carousel! This a nice feature that I’b be interested if possible in
FW.
If you are careful about what form your .active state takes (borders
work well for this effect) then you can use the regular Freeway
Rollover Action along with Carousel Tab. I agree that more controls in
the Carousel Tab Action itself could be really useful here.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Jul 23, 2010, at 7:48 AM, Mr worm wrote:
As you can see I have shown two TAB examples. The oval one seems to
want to display the outer edges of the graphical box that the oval
resides in? Why is this? And can this be overcome via some code in
the extended dialogue?All images on the web are rectangular, even the circles and ovals.
What you’re going to need to do is to create an image in Photoshop,
saved probably as a 24-bit PNG, to use as your circular bullet. It
should be solid [your page background color], with a transparent hole
in the center where the bullet should appear. Then use the background-
color property of a #yourTab img style to set its “normal” state, and
a #yourTab.active img to set its active state.
Hi Walt, here is my working example using this method:
http://www.edwardlawlor.co.uk/fw/purple/carousel.html
I have also tried variants on using a oval .png file as the BG image
for the .active style. This works well and I like this option,
however if I try a set a foreground colour (to indicate other tab
element on the page) ie. #ccc then when the button/tab is clicked
my .png appears in another colour to highlight that this is indeed
selected! My current work around is to apply a border to the
transparent graphic item.You can create two different images of your oval, and set them as the
normal and active background image to a transparent GIF button. Draw a
graphic box, but don’t give it any fill color. Apply the Carousel Tab
Action to it. Create two styles:.controls a img { background-color:#ccc; }
.controls a img.active { background-color:#cc0; }(I had it wrong previously in these explanations – the .active class
gets added to the image, not to the link, so it’s not a.active img
that you need to fiddle with.)Here’s how you force Freeway to add these styles to your page without
you needing to apply them to anything. (Follow these steps blindly –
each step is important.)
Click on the cog menu in the Styles palette. Choose New style…
The Name field will say style4 or something similarly useless.
Ignore that for the moment.Tab or click into the Tag field. Enter the selector part of the
style (everything outside of the curly braces), so for example
.controls a img.Tab into the Name field, so its contents are selected, and delete
whatever is there, leaving the field empty.TAB BACK OUT so that Freeway “sticks” that property as empty. It
will try to sneak style4 back in there the moment your back is turned,
so be vigilant about this and make sure that the Name field is empty
when you finally Okay the dialog.Use either the Extended sub-dialog or the regular style tools in
the rest of the Edit Style dialog to add your properties. Backgrounds
(image and color) are found in the Character style picker, for some
reason.Double check that the Name field is empty, and Okay the dialog.
A style made in this manner does not need to be applied to anything –
and really shouldn’t, because it can make for some really strange
effects. This sort of no-name style will always publish to the head of
every page, or to the external stylesheet if you’re using those.
Unlike styles that you click to apply in the design interface, you
will not see their effects in the design view, and Freeway will not
“prune” unused styles to save a few bytes. You will see the effect of
the style in the Preview, or if you preview in a browser.
Here is this working:
http://www.edwardlawlor.co.uk/fw/green/carousel.html
I have had to use a graphic for the rollover for now, but can I use a similar style of working to achieve a hover state: e.g.
.controls a img.hover { background-color:#fff; }
This would be so sweet if you could!!!
Walter, can I just take a second to tell you how truly amazing you are! You are a gifted individual with a talented brain and I think I echo this for everyone on here! The time you spend responding to people like me on here is astounding, your time is priceless and never taken for granted Walt!
Worm
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This could be even simpler, and cross-platform. You won’t need to add
a .hover class to the image, but rather you apply a :hover pseudo-
selector to the a tag, which will work on both real browsers and IE!
.controls a:hover img { background-color:#fff; }
Walter
PS: You, and all, are very welcome.
On Jul 23, 2010, at 12:41 PM, Mr worm wrote:
.controls a img.hover { background-color:#fff; }
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walt this works great now.
Many thanks
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter,
Sorry for disappearing for so long from the forum. I’ve been trying to figure out the mechanics of Style system in Freeway. And your answer to Mr.Worm finally cleared everything up and I have finally got everything up and running as intended. Your advice on the rollover style is a lifesaver! Just want to say thank you to you. Couldn’t have done it without your help!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter,
I was getting time out errors on a site that uses carousels. So, I upgraded to the most recent rev 0.3.10, but now the carousel just doesn’t seem to be working. I am using tabs (0.7.9) and carousel 1.2.15, carousel pane 0.3.10. I have 8 tabs, the first pane (carousel action is applied to this pane), and the last pane appear–but it just goes from 1 to 8, not 1 through 8. The other panes are stacked in another location on the site and the top one is visible on the page (it shouldn’t be right?). See http://lyndacarter.com/backstage.html
Thanks for your wisdom and time.
Jan
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Tear down the effect, and go back through and apply it again. It looks
as though you have a mis-match between Carousel Tab and the other
Actions, so go over the list on ActionsForge and confirm that you’re
using all the latest versions there. But the key is going to be to
remove all instances of Scripty Actions from your entire document,
publish once, and then re-apply the Actions. This whole upgrade
bundled Actions business is a major pain for everyone.
Walter
On Nov 9, 2010, at 9:57 PM, jan smoot wrote:
Walter,
I was getting time out errors on a site that uses carousels. So, I
upgraded to the most recent rev 0.3.10, but now the carousel just
doesn’t seem to be working. I am using tabs (0.7.9) and carousel
1.2.15, carousel pane 0.3.10. I have 8 tabs, the first pane
(carousel action is applied to this pane), and the last pane appear–
but it just goes from 1 to 8, not 1 through 8. The other panes are
stacked in another location on the site and the top one is visible
on the page (it shouldn’t be right?). See http://lyndacarter.com/backstage.html
Thanks for your wisdom and time.
Jan
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
There are three versions of the carousel actions available in my Item pull down. When I look at the action list, I see Protaculous 4/8/10, 9/22/10 and 11/8/10 all checked. How do I get rid of them? I thought Freeway automatically replaced them. I also see an error next to Carousel Button 4/8/10.
Is there a best way to proceed?
Thank you.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes. Quit Freeway. Then open up your Actions folder: /Users/YourName/
Library/Application Support/Freeway 5/Actions/General
Look in that folder for everything that has the word Protaculous in
it, and delete it. For extra points, also delete anything that has the
word Scripty or Ajax or Calendar in it – those are all my creations
and they all depend on the same core code. It is vitally important
that you upgrade all of these Actions at the same time, as otherwise
you will end up with mis-matched code, and nothing stands much of a
chance of working.
Next, look in your /Users/YourName/Downloads folder and do the same
dance, removing any files that are so named. What happens if you don’t
clear out previous versions is that you end up with
Protaculous.fwactionb, Protaculous 2.fwactionb, etc. These files are
not named differently, so they don’t replace whatever version was
already in Freeway’s Actions folder.
Now download replacements, all the latest versions, from ActionsForge.
Look carefully at the filenames to be sure that version numbers
haven’t crept in.
Move these files into the Actions folder, and restart Freeway.
Now, any versions of the Actions that you see should be rational.
If you do see an odd version number, and particularly if that number
is italic and near the top of the list in the Edit / Actions dialog,
then that means that it is coming from Freeway’s document cache. This
is a powerful feature, useful when sharing documents with other
Freeway users who might not have the same versions or the same Actions
installed, because it puts a last-chance fallback copy of the Action
into the Freeway document itself.
However, this only works reliably with non-bundled Actions, basically
any Action whose filename ends in fwaction, not fwactionb. For the
bundled Actions, what seems to happen is that the Action is cached,
but the support files are not, or if they are, they are not cached in
a way that permits them to be used by Freeway while constructing the
site. Net result, breakage, and usually user-level errors while
publishing.
So if you do see additional (potentially listed as Italic text)
versions, then you will need to remove all instances of the Actions –
from all pages and items where they are applied – and then publish
once to clear this cache. Once that’s done, and the effects are built
back up again, you shouldn’t see any issues like this.
Walter
On Nov 10, 2010, at 9:59 AM, jan smoot wrote:
There are three versions of the carousel actions available in my
Item pull down. When I look at the action list, I see Protaculous
4/8/10, 9/22/10 and 11/8/10 all checked. How do I get rid of them? I
thought Freeway automatically replaced them. I also see an error
next to Carousel Button 4/8/10.Is there a best way to proceed?
Thank you.
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
Walter,
Thank you for the updating directions. I have completed cleaning out and reinstalling Protaculous (double checked it in the Actions list), but I am still getting the same functional results. The carousel should have 8 panes in it. It has 2, the first and the last. When you mouse over the tabs, the url add a #panename to the end and jumps to it on the page–like an anchor.
Any other suggestions? I am stumped.
Jan
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The behavior of the tab URLs sounds correct. I am not sure why you are
getting the other issue. What version of Freeway, and if you are in
5.5, are you also using the RPL Action? If so, then apply the Remove
from RPL Action to the panes and the carousel (for good measure) and
this may help.
But there doesn’t seem to be anything about this page that cries out
for the RPL Action, so you may want to remove that if you are using
it, rather than using the Remove from RPL Action on a bunch of elements.
Walter
On Nov 10, 2010, at 11:38 AM, jan smoot wrote:
Walter,
Thank you for the updating directions. I have completed cleaning out
and reinstalling Protaculous (double checked it in the Actions
list), but I am still getting the same functional results. The
carousel should have 8 panes in it. It has 2, the first and the
last. When you mouse over the tabs, the url add a #panename to the
end and jumps to it on the page–like an anchor.Any other suggestions? I am stumped.
Jan
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
I am using freeway 5.4.2. A little scared to upgrade to 5.5 frankly. No RPL action. Dunno what that is. I am using target/show hide layer with page sequence actions. The panes are all the same size. Do they need to be stacked or in any particular location or order? They are layered items. Set to publish.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
They do not need to be stacked, although there shouldn’t be any harm
if they are. They no longer need to be grouped, but they haven’t
needed that for quite some time, well before you started using the
Action, IIRC.
Walter
On Nov 10, 2010, at 12:37 PM, jan smoot wrote:
I am using freeway 5.4.2. A little scared to upgrade to 5.5 frankly.
No RPL action. Dunno what that is. I am using target/show hide layer
with page sequence actions. The panes are all the same size. Do they
need to be stacked or in any particular location or order? They are
layered items. Set to publish.
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
Walter,
I ended up just rebuilding the page from a prior version that worked. I was not able to troubleshoot the problems on this problem page.
BTW, I find that panes need to be ordered to display in the correct order in a tabbed carousel.
I have not explored the text tab action, what does that do?
Thanks Jan
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On Nov 11, 2010, at 12:19 PM, jan smoot wrote:
Walter,
I ended up just rebuilding the page from a prior version that
worked. I was not able to troubleshoot the problems on this problem
page.BTW, I find that panes need to be ordered to display in the correct
order in a tabbed carousel.
That is the only way you can control the order of the panes. It’s
taking layer order in Freeway and converting that to the order of the
panes inside the sliding “filmstrip” element. So open up the Page view
of your Site pane in Freeway, and drag-sort the panes to get them in
the order you want them to appear.
I have not explored the text tab action, what does that do?
It just duplicates the function of the Tab Action as an inline text
element, so you could (perhaps) use a CSS Menu to select panes.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options