[Pro] Horizontal Accordion

Freeway
1

Hi folks,

I’m trying to create a accordion similar to weavers Moo accordion, or the Scripty accordion or even the transition FX accordion - however a Horizontal Accordion!

Example demos:

http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

http://dev.phatfusion.net/imagemenu/

I have a basic understanding of what needs to be done, but get lost when the instructions start to “kinda assume you know how to code”. I’m sure 90% of you on here can sympathize with me!

Can FW’s current library actions be used to make this happen? Or if anyone has already implemented this style of accordion, in which case a concise descriptive tutorial would be invaluable!!!

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

2

ScriptyAccordion has a horizontal mode for just this sort of thing. Be sure to read the directions on ActionsForge, as you have to do a lot less than you’d expect, but otherwise, it’s pretty straightforward.

Walter

On Jul 16, 2010, at 7:44 AM, “Mr worm” email@hidden wrote:

Hi folks,

I’m trying to create a accordion similar to weavers Moo accordion, or the Scripty accordion or even the transition FX accordion - however a Horizontal Accordion!

Example demos:

Dynamic Drive DHTML Scripts- Horizontal Accordion script

http://dev.phatfusion.net/imagemenu/

I have a basic understanding of what needs to be done, but get lost when the instructions start to “kinda assume you know how to code”. I’m sure 90% of you on here can sympathize with me!

Can FW’s current library actions be used to make this happen? Or if anyone has already implemented this style of accordion, in which case a concise descriptive tutorial would be invaluable!!!

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

Walt thanks for that, however I’m going wrong somewhere?

1- I draw container, and insert all elements inline… graphic item followed by html item & fill contents.

2 - Repeat all inline elements until desired number of tabs is achieved.

3- Trigger event: Click

Trigger elements: img

Show/hide elements: div

4 - show one element at a time & set to animate H.

Once previewed only the first html DIV opens and the contents of the other DIVs are also displayed in this DIV? So as the accordion opens & closes only the first DIV ever opens showing the content for each (img/header)

Where am I going wrong?

Worm

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

4

Could you please post a link? It sounds like you’re doing everything
right, but without looking at the generated source, I’m lost as to
what to suggest. Also, please make sure you have the absolute latest
version of ScriptyAccordion installed on your Mac, and try removing
the Action from your document, publishing once, and restarting Freeway
if you update this Action before trying again. It does Just Work™
here.

Walter

On Jul 16, 2010, at 11:42 AM, Mr worm wrote:

Walt thanks for that, however I’m going wrong somewhere?

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

5

link:

http://www.edwardlawlor.co.uk/2010/accordion.html

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

6

Link:

http://www.edwardlawlor.co.uk/2010/accordion.html

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

7

Okay, I can see what’s happening there. I need to fix the Action so it
matches up with the documentation, but until I do, you can fix this by
clicking once on each of the image “headers”, setting them to Align
(float) left, and publishing again.

Walter

On Jul 16, 2010, at 12:20 PM, Mr worm wrote:

Link:

http://www.edwardlawlor.co.uk/2010/accordion.html

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

8

There’s a new version of ScriptyAccordion on the Forge with this fix in place. It works no matter if the elements are set to float or not. (They end up floated after the action runs now.)

Walter

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

9

On 16 Jul 2010, 4:38 pm, waltd wrote:

Okay, I can see what’s happening there. I need to fix the Action so it
matches up with the documentation, but until I do, you can fix this by
clicking once on each of the image “headers”, setting them to Align
(float) left, and publishing again.

Walter

On Jul 16, 2010, at 12:20 PM, Mr worm wrote:

Link:

http://www.edwardlawlor.co.uk/2010/accordion.html

On 17 Jul 2010, 1:00 am, waltd wrote:

There’s a new version of ScriptyAccordion on the Forge with this fix in place. It works no matter if the elements are set to float or not. (They end up floated after the action runs now.)

Walter

Just downloaded it and replaced my old actions, so less tweaking now. Thanks Walt.

Although it works fine, it is really messy and requires a bit of trickery to get my desired look.

http://www.edwardlawlor.co.uk/2010/accordion2.html

The example below is as close as I can get. My only issues are can i apply ‘easing’ to this action to make the accordion move smoothly?

This accordion is currently set to ‘click’ to open each tab, although mouse over is a little jumpy, especially because of how this animates.

Also when the accordion animates it leaves a blank space at the end (which the last element in my accordion fills once opened) So currently I have placed a DIV in the BG to highlight this (black) it also makes it look neater I think! This is also initially covered up as I set the first tab to be open as opposed to closed.

I’m assuming to make this Accordion work like the initial examples I provided involves a lot more work! Shame as I think I’m half way there in getting the Phatfusion e.g. to work!!! so close!

I’m still playing with options to make this look as visually ‘Fluffy’ as possible, any suggestions you may have Walt to make this better I am open to!

Many thanks

Worm

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

10

Also I just checked this out in Explorer 5.2.3 on my Mac, not pretty at all!

It completely falls apart!???

I have tried to output in in every version of HTML, but to not avail Walt. Do you have any suggestions when you get a second please.

Worm

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

11

On 21 Jul 2010, at 09:31, Mr worm wrote:

Also I just checked this out in Explorer 5.2.3 on my Mac, not pretty at all!

It completely falls apart!???

I have tried to output in in every version of HTML, but to not avail Walt. Do you have any suggestions when you get a second please.

Sorry to butt in here, but Internet Explorer 5 for Mac no longer exists. There is only one person using it now and he lives in Woking with his mum. Really; don’t waste any time on it :slight_smile:

best wishes,

Paul Bradforth

Buy my eBooks at:
http://www.paulbradforth.com/books/

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

12

Could you post a link to your problem page?

Walter
On Jul 21, 2010, at 4:31 AM, Mr worm wrote:

Also I just checked this out in Explorer 5.2.3 on my Mac, not pretty
at all!

It completely falls apart!???

I have tried to output in in every version of HTML, but to not avail
Walt. Do you have any suggestions when you get a second please.

Worm

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

13

Hi Walt, sorry my mistake.

This all works fine now. However, my only issues are can i apply ‘easing’ to this action to make the accordion move smoothly?

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

14

I have played around with the various effect transitions available
here: http://wiki.github.com/madrobby/scriptaculous/effect-transitions
and because of the relatively short distance that the elements move,
coupled with the short duration of the effects, the basic easing built
in to all Scriptaculous effects is all that I can do.

I may add some controls to change the duration of the effect – or to
add these transitions – at some point in the future, but I’m not sure
that they would look very good in reality.

Walter

On Jul 22, 2010, at 5:04 AM, Mr worm wrote:

Hi Walt, sorry my mistake.

This all works fine now. However, my only issues are can i apply
‘easing’ to this action to make the accordion move smoothly?

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

Hia!
I´m actually looking to do something similar to Mr. Worm on the link he has posted:

http://www.edwardlawlor.co.uk/2010/accordion.html

Can i download this file in the original freeway pro doc, so i can have a look how its done?

I have now the same problem as you had Mr Worm with the scripty horizontal accordian adding the graphic then a html box inside the parent html box, added the options (click, img and div) but not working.

That file would help me a lot.
Thanks.

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