Making objects move down on the site when other objects disappear?

I’m creating a form in Freeway 5 Pro, where options will appear depending on what other options have been clicked on.

Take a look: http://egillsigurdur.com/Freeway/skraning/ (it is not finished yet)

Objects will disappear with JavaScript onclick=new Effect., but then there is a large gap between items. How would I be able to let all of the objects collapse together, leaving no gap? And also to let the objects move down when other things come in?


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

You’re going to need to make the layout differently. You have all of
your form elements laid out in layered DIVs. If you remove one, it
doesn’t affect anything else on your page, as you’ve seen. That’s
because none of the elements are “aware” of the others – they stand
alone.

You need to either make your layout in a table or an inline DIV layout
model. Then when you remove something, everything else will float up
to fill the gap. If you’re doing a table layout, then you can make the
disappearance even more seamless by making your effect remove the
entire table row:

new Effect.Fade(this.up('tr'),{});

Walter

On Feb 9, 2009, at 7:47 AM, Egill Sigurdur wrote:

Objects will disappear with JavaScript onclick=new Effect., but then
there is a large gap between items. How would I be able to let all
of the objects collapse together, leaving no gap? And also to let
the objects move down when other things come in?


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

So you’re saying I have to re-do everything with the CSS button turned off?

What is inline DIV layout model?


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

You will hear it referred to here as the “box model” (which is a
misnomer, but it’s caught on). What it means is that you draw an HTML
box as the container for a column of layout elements, then insert
inline HTML objects within that box and use them to contain the
individual elements of your layout. When you construct a page like
this, each element “makes room” for its neighbors, and when one grows,
the others get out of its way. This allows your page to react usefully
to text enlargement and other user-driven changes. Rather than
creating space between elements by dragging them further apart, you
change their spacing (vertical and horizontal) by adding margin space
to the elements. In many ways, it’s like treating HTML boxes as
individual characters of HTML text – the same sorts of rules may be
applied to them to govern how much space they take up in your layout.

Having the CSS button on or off only affects elements that you are
going to draw in the future. If your page is laid out already, you can
go through it and click on each element in turn and un-check the Layer
checkbox in the Inspector, and that element will become part of a
table-based layout. This change is non-destructive. If you re-check
the checkbox, you can move the individual element up from the table
“layer” (sort of the “zeroth” layer, below all floating CSS-positioned
layers) back into a floating layer.

There’s another use of Table that might become confusing in this
context. Freeway gives you the table tool (whether you are using CSS-
positioned layout or not) to draw tables with. If you have the “CSS”
button on, when you draw a table with the table tool, you are creating
yet another positioned DIV (layer) floating in the non-space of your
page layout, containing a single table of N columns by N rows. Any
elements you place within the grid of that table will be children of
the table’s layout DIV (positioned on its own layer, not governed by
the movements or dimensions of any other part of your page. If you
were to draw such a thing and put your form into it (using a cell for
each form caption, and another cell in the same row for each form
field) then any changes you make to the form using JavaScript would
change the geometry of that individual table, but would not be
reflected in the overall page layout – so if you had a footer below
the form, and you removed a whole bunch of page depth by hiding
elements of your form, the footer would not shrink up to sit
underneath the new, shorter form.

No matter what you do here, your text will still be styled with CSS –
the blue button and the Layer checkbox does not turn that on or off –
what will change is the layout mode for each element you adjust.

Walter

On Feb 9, 2009, at 9:10 AM, Egill Sigurdur wrote:

So you’re saying I have to re-do everything with the CSS button
turned off?

What is inline DIV layout model?


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

But the Transition FX does only work for DIV layers, it all depends on that action.

I’m not really following you here.


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

DIV layers may be nested within other layers, either as inline or
child objects. The Action will work on either construction type. If
you are using an inline construction model, then as one element hides,
its neighbors will crowd in to take up the recently-vacated space.

Walter

On Feb 17, 2009, at 12:51 PM, Egill Sigurdur wrote:

But the Transition FX does only work for DIV layers, it all depends
on that action.

I’m not really following you here.


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

Walter

I have a problem trying to solve the ‘box model’ once i uncheck the layer button the text box hides (gets moved to the back) once i bring it back to the front it has a grey background to it but it is coloured as none…what am i doing wrong? can you help?


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

Try this, in a new blank page. Make sure the CSS layout button is on,
then draw a single HTML box in the middle of the page.

Double-click inside this box, so you see a flashing text cursor.

Use the main menu: Insert / HTML Item to insert an inline HTML box
within the main outer box. Click once on the inner box, and drag its
bottom-right corner out to whatever dimension you like (assuming you
want something other than the default 100px square).

Give each of these boxes a different color background, so you can see
what’s going on. Now double-click inside the inner-most box, and type
a bunch of text at random. Next, double-click inside the outer (main)
box and type some other text in that box. It should not run into the
inner box, which should resolutely stay on its own line, as if it was,
itself, a separate paragraph of text.

Now use the Preview command to look at this in a browser. In the View
menu, be sure that the Zoom Text Only setting is on, then use the zoom
command to enlarge the text. Everything should move together, the text
gets bigger, which moves things around on your page, but nothing
slides under anything else.

Walter

On Jul 9, 2011, at 7:30 AM, palms wrote:

Walter

I have a problem trying to solve the ‘box model’ once i uncheck the
layer button the text box hides (gets moved to the back) once i
bring it back to the front it has a grey background to it but it is
coloured as none…what am i doing wrong? can you help?


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


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