[Pro] Hide/Show Outline Behavior in Text

Freeway
1

Every two years I come to FWP to do a hard site and find I have forgotten many things.

The challenge at the moment is in creating a text field that behaves as a collapsable outline, ideally with flippy triangles.

Using FWP 6.1

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

2

This sort of thing is pretty simple to code in JavaScript, but you need to be really disciplined about the kind of HTML you use. Ideally, you would use a nested list in a single HTML box to create the outline structure. Then you would style it using hand-made CSS styles so it looks the way you want it to look when fully expanded, and finally, you would layer on some JavaScript to make it behave the way you want it to (and to initially collapse, if that’s what you want).

Here’s an example of the sorts of things you can do to an ordinary unordered list in this manner. It’s not exactly what you were describing, but it’s going to show you a really extreme example of messing with a list. I wrote it several years ago, so it’s probably a little too over-written compared with how I write things now.

http://scripty.walterdavisstudio.com/tree.html

When this first loads, you will see the whole list, entirely unstyled. Clicking on the gray bar at the top simply adds some styles to that list, and makes it respond to clicks. The blue box at the bottom of the page shows the JavaScript code involved.

If you create such a nested list, and then post it somewhere online where we can see it, and post some sketches of how you want it to behave and look, we can advise you further.

Walter

On Aug 20, 2013, at 10:58 PM, tedg wrote:

Every two years I come to FWP to do a hard site and find I have forgotten many things.

The challenge at the moment is in creating a text field that behaves as a collapsable outline, ideally with flippy triangles.

Using FWP 6.1

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

Thank you Walt. Here is an image of what I am looking for:

https://dl.dropboxusercontent.com/u/12191217/Outline.pdf

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

4

Would you want the scroll to be native (browser-drawn) or a custom scroll with images? (The former is MUCH easier, before you answer.)

To get started with this, make a new blank Freeway page, and draw an HTML box on it somewhere. Inside that box, type out (or paste) your content, then use the List segment of the Text Inspector to set up the nesting structure.

You should end up with something that looks like this:

  • A collapsed entry with children.
    • A child
    • Another child
  • An expanded entry with children.
    • Child with no children and a lot of text saying something rather important that we need to know, and that takes three lines in this case.
    • Child with children and a lot of text saying something rather important that we need to know, and that takes three lines in this case.
      • A child
      • Yet another child
  • A collapsed entry with children.
    • Look, another child
  • An entry with no children.

Basically, it should be all of the content, at all levels, entirely nested out the way you intend it to look fully-expanded. Once you have this done (and please, resist the urge to style it in any way – leave it entirely plain as it can be) then post it on line somewhere and we can take the next step. The CSS will make the bullets appear the way you have indicated them in your sketch, and the JavaScript will initially collapse the structure to just the headers, and add “listeners” (functions that respond to clicks or mouseovers) to make the structure responsive.

To get a list like this to fit within a defined space on screen, with scroll bars, all you need to do in Freeway is set the height of the container HTML box which holds the list, and then set the box’s Overflow property to Scroll or Auto. Freeway will write the necessary CSS for you to ensure that the browser doesn’t allow the element to grow in height, and the browser will draw the scrollbars if the content is taller than the container.

Walter

On Sep 6, 2013, at 10:51 PM, tedg wrote:

Thank you Walt. Here is an image of what I am looking for:

https://dl.dropboxusercontent.com/u/12191217/Outline.pdf

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