ScriptyAccordion Action

Sure. You just have to make your elements float left. Try this:

Draw a big HTML box to contain the effect. It’s going to start out
with all of its sub-elements showing, so make sure it’s large enough
for that. After you’ve added the sub-elements, you’ll set the box to
shrink vertically, so it should only take up a small amount of space.

Double-click into the box so you get a text cursor. From the main
menu, Insert / Graphic Item. And again, Insert / HTML Item. Select
each of these elements and set them to Float Left in the Inspector.
Give the graphic item a background color, so you can see it. Resize it
to be a tall stripe. Put a bunch of text in the HTML item, and resize
it to be the same height as the graphic and whatever width you like.
Repeat until you have enough elements for your accordion. (Later, you
can make nice vertical-text graphics in an image editor and insert
them in the graphics boxes, but for now, just use colored boxes.)

Now select the outer HTML box. Click on the icon left of the height
field in the Inspector, so the height value becomes grayed out. This
completes the effect. Apply the ScriptyAccordion to the box, and set
the trigger elements to img and the show/hide elements to div.

Try it out.

Walter

On Feb 16, 2009, at 12:17 AM, george wrote:

Is it possible for the Scripty Accordion to open horizontally?


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

Gave it a try.

First, when I insert an HTML item, it drops down vs. the graphic item, so it looks like steps.

I have the graphic items with Align Left and html items Float Left.

I assume CSS should be clicked on.

I also can only get it to work if I put some text in the graphic box and click on that.

I tried to put a graphic in the html box, with various Align settings, but it drops the graphic below the header. Any way to format this?

Thanks.


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

I just tried it, and while it does look scary, the result is fine in a
browser. It looks awful in Freeway no matter what you do, but if you
preview, you’ll see that everything lines up just fine.

When you say that the only way to get this to work is to put some text
in the graphic box and click on that – I fear that you might be
trying too hard. There’s nothing to do in terms of these elements –
you don’t have to apply links to them or anything. You just choose
what sort of element you want to be your headers, and ANY instance of
that object within the layout will get the behavior added to it.

In the instructions I set out for you, I told you to alternate inline
graphic boxes and inline DIVs within a single parent DIV. Then the
Action will simply wire up all graphic boxes contained within that
parent DIV to become the headers. And anything that you put in the
inline HTML boxes will appear and disappear when you click on them. I
put an inline graphic within one of the HTML boxes, and unfortunately,
this got the “I’m a header” behavior added to it as well. I had a look
at the code, and I don’t see a way around it at the moment, but
perhaps something will occur to me.

Walter

On Feb 16, 2009, at 2:47 PM, george wrote:

Gave it a try.

First, when I insert an HTML item, it drops down vs. the graphic
item, so it looks like steps.

I have the graphic items with Align Left and html items Float Left.

I assume CSS should be clicked on.

I also can only get it to work if I put some text in the graphic box
and click on that.

I tried to put a graphic in the html box, with various Align
settings, but it drops the graphic below the header. Any way to
format this?

Thanks.


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

On 18 Jan 2009, 5:59 pm, waltd wrote:

I could certainly add this feature, but mine was deliberately written
to be simple.

For your purpose (as a navigation element), I would recommend that the
state be carried in the URL rather than a cookie. Could you post a
link to your site so I can see this in practice? I’d like to see what
sorts of hooks are naturally there in your design that I could work
off of. It’s relatively simple to read the current URL and parse it
for specific content, there might be a way to make a separate
ScriptyAccordionNav or something like that which would be tightly
bound to this particular use-case. I think that would make more sense
than bogging down a general-purpose tool with additional features.

Walter

Hi Walter,

I patched your action bit.

1.) I added the dl tag as a separator

2.) I replaced the “Show first element open” checkbox with a popup.

That way I can define, what element shall be open on page load, not just the first.

Well this way the open state is hardcoded into JS but it serves my needs to use the accordion as a menu.

Would have liked to populate the popup dynamically accorting to the number of trigger tags, but IMO that information is only available after a first publish.

If you know of a way to count the trigger tags in fwInterface() without a publish roundtrip, let me know.

Below a diff of the changes. You can apply it manually or with the Unix patch command to your scriptyaccordion.fwaction file v 0.4.

Peter

--- scriptyaccordion.fwaction.orig	2009-01-02 13:59:42.000000000 +0100
+++ scriptyaccordion.fwaction	2009-01-23 11:53:04.000000000 +0100
@@ -196,7 +196,21 @@
 </action-popup>
 <action-popup name="triggerElm" title="Trigger Elements"/>
 <action-popup name="toggleElm" title="Show/Hide Elements"/>
-<action-checkbox name="show" title="Show the first element open when the page loads" />
+
+<action-popup name = "show" title = "Show Element open when page loads">
+	<value name = "None" value = "none">
+	<value name = "1" value = "0">
+	<value name = "2" value = "1">
+	<value name = "3" value = "2">
+	<value name = "4" value = "3">
+	<value name = "5" value = "4">
+	<value name = "6" value = "5">
+	<value name = "7" value = "6">
+	<value name = "8" value = "7">
+	<value name = "9" value = "8">
+</action-popup>
+
+
 <action-checkbox name="exclusive" title="Show only one element at a time" />
 <action-markup custom name="toggleScript">
 	var box = $('__this__');
@@ -243,7 +257,7 @@
 <action-include name="scriptyHandlerFunctions">
 	
 	var triggers = "h2 h3 h4 h5 h6 p div li img".split(' ');
-	var toggles = "p div ul ol li".split(' ');
+	var toggles = "p div ul ol dl li".split(' ');
 	function fwInterface(){
 		fwPage.libsList = new Object();
 		var myTriggers = triggers.slice();
@@ -271,6 +285,7 @@
 	}
 	
 	function fwBeforeEndBody(){
+		var showElement = fwParameters['show'].toString();
 		var theHead = fwDocument.fwTags.fwFind("head");
 		var myself = fwItem.toString();
 		var toggle = fwParameters['toggleElm'].fwValue || toggles[0];
@@ -282,7 +297,7 @@
 		}
 		var observerScript = (fwParameters['exclusive'].fwBoolValue) ? fwMarkups['toggleScript'] : fwMarkups['individualScript'];
 		observerScript = observerScript.toString().replace(/__this__/,myself).replace(/__trigger__/g,trigger).replace(/__toggle__/g,toggle).replace(/__event__/g,event);;
-		observerScript = (fwParameters['show'].fwBoolValue) ? observerScript.toString().replace(/__show__/,'bods.first().show();') : observerScript.toString().replace(/__show__/,'');
+		observerScript = (showElement != "none") ? observerScript.toString().replace(/__show__/,'bods['+showElement+'].show();') : observerScript.toString().replace(/__show__/,'');
 		var scriptTag = theHead.fwAddJavaScript();
 		observerScript.fwConvertLineEndings = true;
 		scriptTag.fwAddRaw('document.observe(');

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

Thanks, Peter. This looks like a very nice bit of work. Would you like
me to add you to the ScriptyAccordion project so you can upload your
version to ActionsForge? If you have an account there, just let me
know. Otherwise, register and let me know when you’ve done.

Walter

On Feb 17, 2009, at 6:08 AM, Peter Gutbrod wrote:

I patched your action bit.


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

Walt,

I still get the steps look in preview with this. Everything else is working fine.


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

On 17 Feb 2009, 12:39 pm, waltd wrote:

Thanks, Peter. This looks like a very nice bit of work. Would you like
me to add you to the ScriptyAccordion project so you can upload your
version to ActionsForge? If you have an account there, just let me
know. Otherwise, register and let me know when you’ve done.

Walter

Well, wasn’t really difficult.

The php actions I did a few years ago (maybe you remember) were much more challenging.

Finally managed it to create an account “Peter Gutbrod” at ActionsForge.

If you like, I add this patch.

Peter


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

You’re added. Patch away!

Walter


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

I am having a little problem:

I want to use an IMG for the trigger element

But when I add the Graphic Object followed by the HTML object, there is a spacing between them which I cannot seem to close up. I need the DIV to butt-up against the IMG without this spacing.

Can anyone suggest a way I would do this?

Please forgive such a beginner query!

Many Thanks,

–Nathan


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

I am trying to install the ScriptyAccordion Action to my Freeway Pro 5 and am having a problem. I have (what I think is) correctly installed the Action.

If I open the Edit Actions dialog box … (Menu Edit+Actions …) it shows ScriptyAccordion, however it does not appear in the Actions menu.

Also when download and load the example page from scripty.wahterdavisstudio.com/accordion/, the page loads okay but I get Publish Problems saying:

The file eddy:Users:walterd:Library:Application:Support:Freeway5:Actions:
General:ScriptyAccordion.fwactionb:Contents:Resources:Actions:
scriptaculous181packer.js for this resource cannot be found - it
will not be published.

Can anyone shed some light on the problem please?

Thanks
Paul


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

It sounds like you have an old version of the Action installed. You will want to check at ActionsForge and get the latest version, and you also need to do some manual cleaning in your Actions Folder (close the example document first):

  1. Locate your Actions folder, most likely here: /Users/yourname/Library/Application Support/Freeway 5/Actions/General
  2. See how many copies of ScriptyAccordion you have in there. Remove all of them to be sure.
  3. Download the latest version from ActionsForge.
  4. Un-zip it, and drag the Action into the folder.

Now when you open the document again, you should see the correct Actions in play.

Also, in order to see the SA Action in any menu, you will have to have first selected an HTML box on your page. The Action menus are contextual, and only display Actions that will apply to the current selection.

Walter


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

Hi Walter and all the others,

thanks for sharing this action and knowledge of use (… the examples are very helpful thx Marcel, LLE).

But could it be that the behavior (transition) seems a bit hectically? Especially the mouseover is nearly not to “sell”.

Is there or will there be a way to get control over the “timescale of opening and closing” to get it a bit more elegant and smooth …?

Thomas


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

If you are using a CSS mouseover, there is zero transition time on a
modern computer. They tend to look a little “harsh” as a result. Look
at my CSS Sprites demo page for more like that. If you look at Tim
Plumb’s CSS3 rollovers, you can do all sorts of wizzy things with
transitions on a WebKit browser (Safari or Chrome on the desktop,
iPhone and Android and Palm on the go).

Also, in terms of the overall transition time between your images, you
can change the effect duration in the Actions palette when you have
the initial Carousel instance selected. Set it to any value of seconds
(use decimal notation for partial seconds). Default is 1/2 second, but
that might be too fast if your images are wide.

Walter

On May 25, 2010, at 10:38 AM, Thomas Kimmich wrote:

Hi Walter and all the others,

thanks for sharing this action and knowledge of use (… the
examples are very helpful thx Marcel, LLE).

But could it be that the behavior (transition) seems a bit
hectically? Especially the mouseover is nearly not to “sell”.

Is there or will there be a way to get control over the “timescale
of opening and closing” to get it a bit more elegant and smooth …?

Thomas


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

Never mind, I didn’t see this message in context, my answers were to a different Action…

Walter


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

Hi Walter,

the problem(s) of the webkit browsers is, that they are unfortunately not very popular in germany (less than 5% together) and as much I would like to use the CSS3 actions - it´s to dig dry holes.

The problems of the moo accordion is that they won`t will work with other actions - so the hope was - that ScriptyAccordion would cover the entire range - just the hope not more.

Thomas


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

Hello, Walter.

I wish to use your plugin as a navigation menu, so it would be great to have the Peter Gutbrod’s changes in your plugin.
Is it possible?

Thank you, both!!


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

It is available from ActionsForge ScriptyAccordion - ActionsForge

David


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

Sorry, but in the revision 0.6.6 I can’t see any popup to select which menu to open when page loads… as Peter Gutbrod defined in his diff.
Do you see it?


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

You are correct - it is not in the latest version on the Forge which is 0.6.7

Maybe that feature didnt make it through

D


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

It did not. I have asked Peter for the diff file and hopefully I will
find a moment to add it in.

Walter

On Jun 8, 2011, at 7:53 PM, DeltaDave wrote:

You are correct - it is not in the latest version on the Forge which
is 0.6.7

Maybe that feature didnt make it through

D


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