[Pro] I do not know how to use scripty accordian

Freeway
1

I was here a couple of weeks ago inquiring about how to create an accordion menu and got great suggestions from many on these forums. I like the scripty accordion but I have no clue how to incorporate it. I followed the directions as per the creators instructions but it doesnt work for me—at all!

Here is my very simple website: http://lenaosoriogemisic.com/index.html. If you click on EVENTS, you will notice that there is a menu list on the left side of the slideshow. I am trying to incorporate the accordion menu on this element. At the moment, each element listed in the menu is in its own graphic box. I tried to recreate it my making an HTML box and making it a list. Under the WEDDINGS menu there would be three hidden elements called: Modern, Vintage & Romantic. Each of these will have their own links. I simply cant get it to work. What am I doing wrong or what should i be doing? The Scripty Accordion action is not working out for me and I have no clue why? Please help! I have been dealing with this for days and I am beyond my wits end.

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

2

Draw a single HTML box where you want your menu sidebar to appear. Cut
each image in turn, and paste it into the HTML box as an inline
element, followed by a single return. When all of the images are in
the box, you should see them stacked one atop the other.

Now if you don’t currently have a text cursor in that HTML box, double-
click so you see one flashing away, ready for typing. Use your arrow
keys to place the cursor after one of the images, then press return
again. TYpe in the first submenu item, return, second, etc. until you
see something like this:

...
[EVENTS]
Foo
Bar
Baz
[GALLERY]
...

Highlight the text you just typed, and use the Inspector’s List
segment to turn those items into a list (click the right-facing arrow
in the Inspector to indent one level).

Click once on the HTML box and apply the ScriptyAccordion Action to
that box. Set the Trigger Event to Click/ Set the Trigger Element to
img and the Show/Hide Elements to ul. Turn off the other options for
now.

Preview. Your first list of elements shoult appear and disappear when
you click on the image header Events.

You can tighten up the vertical spacing by creating a new style using
the Styles palette, and setting the Paragraph attributes Space Before
and Space After to 0px. Then double-click inside your HTML box, use
Command-A (select all) to highlight all of the text, and click once on
your style name in the Styles palette.

Walter

On Sep 12, 2011, at 10:31 AM, Lena wrote:

I was here a couple of weeks ago inquiring about how to create an
accordion menu and got great suggestions from many on these forums.
I like the scripty accordion but I have no clue how to incorporate
it. I followed the directions as per the creators instructions but
it doesnt work for me—at all!

Here is my very simple website: http://lenaosoriogemisic.com/index.html
. If you click on EVENTS, you will notice that there is a menu list
on the left side of the slideshow. I am trying to incorporate the
accordion menu on this element. At the moment, each element listed
in the menu is in its own graphic box. I tried to recreate it my
making an HTML box and making it a list. Under the WEDDINGS menu
there would be three hidden elements called: Modern, Vintage &
Romantic. Each of these will have their own links. I simply cant get
it to work. What am I doing wrong or what should i be doing? The
Scripty Accordion action is not working out for me and I have no
clue why? Please help! I have been dealing with this for days and I
am beyond my wits end.

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

3

[Cut each image in turn, and paste it into the HTML box as an inline element, followed by a single return. When all of the images are in the box, you should see them stacked one atop the other.]

I am unfamiliar with the terminology you are using (sorry). What do you mean “cut”? The items listed are text in a graphic box. Do I need to create images?

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

4

If you made each of these images as a separate element, then this will
just work. You appear to have done so – I was able to drag each
navigation image off your page and into Freeway as a pass-through
image. You’re not suggesting that you have made the entire left menu
as a single image block with a (graphic) text return between words,
are you? That’s not how the HTML looks from here.

An image box can be an inline element within an HTML box, with no
extra effort on your part. Click once on the image on your page, and
use the Mac “cut” command (Edit / Cut or Command -X) to remove the
positioned image from your page and stash it on the Mac Clipboard.
Then double-click inside the HTML box you drew somewhere else on the
page, and Paste (Apple V). Repeat for each image, using a single
Return (from the keyboard) to place each image on a separate line of
text. Each image will be in essence a new paragraph of text containing
a single image instead of any characters of text. Once you have
removed all of the images, you can drag the HTML box back to the
original location of the first image, and all the other images will be
aligned below it.

The key to using this Action is that you must have a single parent
HTML box that contains all of the child trigger and show/hide elements
– an inline layout, in other words, for this area of the page. This
is the trick by which all of the submenus can be exposed and hidden
while pushing all of the other menu furniture around. If you stick
with a static positioned layout, then all of the submenus will have to
reveal somewhere else – the positioned buttons will not be shoved out
of the way during transitions – because each one exists on a separate
layer, all alone.

Walter

On Sep 12, 2011, at 11:04 AM, Lena wrote:

[Cut each image in turn, and paste it into the HTML box as an inline
element, followed by a single return. When all of the images are in
the box, you should see them stacked one atop the other.]

I am unfamiliar with the terminology you are using (sorry). What do
you mean “cut”? The items listed are text in a graphic box. Do I
need to create images?

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

5

I think I am beginning to understand what your saying. Do I apply the action to the HTML box or to each of the image elements?

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

6

THe HTML box. There is another Accordion setup from Weaver, using
MooTools as the JavaScript library. On that Action, you apply a
separate Action to each element of the layout. I wrote this one as a
way to simplify it down to one Action. Of course, my version has some
niggles and oddities that will make you crazy, but not (in my opinion)
as crazy as adjusting a separate set of Action parameters for each
element would do.

Walter

On Sep 12, 2011, at 11:47 AM, Lena wrote:

I think I am beginning to understand what your saying. Do I apply
the action to the HTML box or to each of the image elements?

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

7

What does h2,h3 h4,h5 etc mean?
And what about p,div,ul,ol etc? What do these mean? I apologize with the influx of questions, but in order for me to understand the action, I have to know what everything means.

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

8

I have done everything just as you describe waltd, but its not working.

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

9

These are the names of the HTML elements that you can use for the
elements of the effect. h[number] is a heading tag, p is a paragraph,
div is a division (generic block container), ul is unordered list, ol
is ordered list. You can read more about these in any only HTML
tutorial. Freeway does an excellent job of insulating you from these
elements, but in the end, when it generates the page, it is creating
one or more of these elements.

Walter

On Sep 12, 2011, at 1:20 PM, Lena wrote:

What does h2,h3 h4,h5 etc mean?
And what about p,div,ul,ol etc? What do these mean? I apologize with
the influx of questions, but in order for me to understand the
action, I have to know what everything means.

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

10

Download this document (Freeway 5.5) to see how it’s put together, and
preview it to see what happens.

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

Walter

On Sep 12, 2011, at 1:42 PM, Lena wrote:

I have done everything just as you describe waltd, but its not
working.

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

11

This is awesome!

I would love to show you what I did. Perhaps you can see where I went wrong and correct me. I mean it looks similar to yours.

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

12

OK waltd—I figured out what I did wrong. I was removing the bullets on the submenu items.

Is there a way to remove the bullets and still keep the same effect?

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

13

Click on that one page in the list of pages, and select File / Copy.
Make a new Freeway document, and paste that page into it, save that
document, and zip it and put it on your Web server. Send me a link.
Just be sure not to put any username or password in the document –
that’s why you should copy and paste into a new blank document.

Walter

On Sep 12, 2011, at 2:06 PM, Lena wrote:

This is awesome!

I would love to show you what I did. Perhaps you can see where I
went wrong and correct me. I mean it looks similar to yours.

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

14

The way you would do that is with a style, not by changing the tag.

Unfortunately, Freeway does something confusing here when you remove
the bullets from a list – it changes the parent tag from ul (or ol)
to dl (Definition List), and it changes the li to a dd (Definition
Definition). My Action doesn’t support DL or DD as a tag (because
there’s no way to control the creation of one in Freeway, except
through this leaky abstraction) so that’s why it broke.

Make a new style, and set Space Before and Space After to 0px. Once
you’ve done that, click the Extended button in the Edit Style dialog,
and press New. In the resulting sub-sub-sub dialog, enter ‘list-style-
type’ (without the quotes) in the Name field and ‘none’ (also no
quotes) in the Value. Okay out of the teetering stack of dialogs,
select your entire set of submenu options and apply your new style by
clicking on its name in the Styles palette. (If the style doesn’t
appear to “take”, click on [No Style] at the top of the style list
first, then again on your new style name.) Do the same for any other
submenu lists. You probably won’t see the effect in your design view,
but you will see it if you preview or preview in a browser.

Walter

On Sep 12, 2011, at 2:17 PM, Lena wrote:

OK waltd—I figured out what I did wrong. I was removing the bullets
on the submenu items.

Is there a way to remove the bullets and still keep the same effect?

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

15

waltd, I owe you a BIG THANKS! And if you were here I would hug you.

Truly I really appreciate all your help. You can imagine the embarrassment I was experiencing with potential clients telling them my site was under construction for soooo long. Now I can move forward.

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