Scripty Accordion

Hi all,

Im trying to create a accordion that uses graphic item (divs) in which to trigger my accordion.

I create a HTML item apply SA action then apply:

Trigger event: click
Trigger elements: img
Show/hide elements: div

I then insert another HTML item, to contain further graphic tabs & float left… when I do this the graphic item above forces this html item down??? Can I force the html item up to be flush, as I NEED a 4 px gap between the accordion elements.

This is a vertical accordion.

If I can force it up to become flush I can then apply a 4px margin to create the exact look I need,

Many thanks

Worm


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

This spacing is controlled by the settings for a P (paragraph) tag in
that same box. All inline images get wrapped with a P, and the
defaults for a P include margin top and bottom. If you create a
Paragraph Style with Space Before and Space After both set to 0, and
apply it to all of the content in your SA box, you should get the look
you want. Try clicking twice somewhere in that box so you see a
flashing text cursor, then use Edit / Select All and then click on
your style. This style should skip over any nested paragraphs, so if
you have inline DIVs (HTML boxes) with paragraphs of text within them,
they will have the normal amount of margin separating them.

Walter

On Mar 21, 2011, at 8:00 AM, Mr worm wrote:

Hi all,

Im trying to create a accordion that uses graphic item (divs) in
which to trigger my accordion.

I create a HTML item apply SA action then apply:

Trigger event: click
Trigger elements: img
Show/hide elements: div

I then insert another HTML item, to contain further graphic tabs &
float left… when I do this the graphic item above forces this
html item down??? Can I force the html item up to be flush, as I
NEED a 4 px gap between the accordion elements.

This is a vertical accordion.

If I can force it up to become flush I can then apply a 4px margin
to create the exact look I need,

Many thanks

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

All the elements in my accordion are graphic items Walt.

Like a vertical nav bar, with graphic item drop downs once clicked.

My working:

Insert html item - apply SA action - then set Trigger event: click Trigger elements: img Show/hide elements: div

Insert graphic item (first btn) left align

Then insert inline html item below - left align & insert a graphic item (drop down) this is where the first graphic item forces the space. Can you solve this without using only graphic items? There is no html text being used at all.

I want a 4px space after each NAV BTN, and it subsequent drop downs for each respectively once clicked.

Hope this make sense Walt.

Worm


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

Can you post an example with and without the Action applied? If you
can make a nested layout that doesn’t have the Action applied (so you
would show everything expanded) then there might be a way to do this.
If you’re not able to make Freeway draw the list the way you want,
then cheat and put a Photoshop version next to the list where you
tried to make it align, and I’ll see if there’s some extra CSS you can
add to the page to make it go.

Walter

On Mar 21, 2011, at 12:40 PM, Mr worm wrote:

All the elements in my accordion are graphic items Walt.

Like a vertical nav bar, with graphic item drop downs once clicked.

My working:

Insert html item - apply SA action - then set Trigger event: click
Trigger elements: img Show/hide elements: div

Insert graphic item (first btn) left align

Then insert inline html item below - left align & insert a graphic
item (drop down) this is where the first graphic item forces the
space. Can you solve this without using only graphic items? There is
no html text being used at all.

I want a 4px space after each NAV BTN, and it subsequent drop downs
for each respectively once clicked.

Hope this make sense Walt.

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

Hi Walt, here is an example of that I am trying to achieve.

http://www.edwardlawlor.co.uk/freeway/accordion/walt.html

Currently there are 6 tabs.

The only tab I wish to expand is the GALLERY tab, which has 2 drop downs. This works, however the previous 2 tabs HOME & ABOUT also operate the GALLERY drop downs?!! which is not supposed to happen!!

How do you place these inline so that they are not confused as the same element?

Regards

Worm


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

I can see what you mean here. It’s not solvable in this layout. To
work around the problem, insert a DIV directly after each of the
previous image headers. You can make it 1px tall (or smaller if you
can manage that in Freeway). It just has to be there, it doesn’t have
to contain anything.

The ScriptyAccordion is designed around an even correlation between
headers and content. While it can manage multiple contents between
headers, it has no way to understand no contents.

Walter

On Mar 22, 2011, at 9:05 AM, Mr worm wrote:

Hi Walt, here is an example of that I am trying to achieve.

http://www.edwardlawlor.co.uk/freeway/accordion/walt.html

Currently there are 6 tabs.

The only tab I wish to expand is the GALLERY tab, which has 2 drop
downs. This works, however the previous 2 tabs HOME & ABOUT also
operate the GALLERY drop downs?!! which is not supposed to happen!!

How do you place these inline so that they are not confused as the
same element?

Regards

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

I did think of doing that to ‘cheat’ the system if that’s the correct word to use… maybe work around is better suited!!

Anyways Walt, I inserted a 1px DIV directly after each of the image headers & viola!!!

It worked a treat

Great minds think alike, & thank you Walt for your time.

Worm


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