[Pro] Flexible Width Footer with Freeway 6.x

Glynster, yes, I have done that too. Set to 100% it only extends to 100% of the Width of Page in general, it will not extend further when a browser window is stretched.


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

In Freeway, anything you draw on the page becomes a child of the PageDiv element. (

) which is the first element on the page. The dimensions of this element are driven by the page size settings in the Inspector. Unless you have set your page to use all available width with the Width: Flexible setting in the Measurements segment of the Page Inspector, then that becomes the single rate-limiting step for every other element on the page.

Now, in order to center a “page” within a browser window, you have to give it a defined width. Because of the way that Freeway structures the code, if you set a defined width to the page, and set the page to center (which sets it to margin:auto), then that defined width is the absolute limit for the width of any other element.

Now you asked earlier about an Action – an Action would have to move the browser-width footer element outside of the PageDiv, which is totally possible and would take maybe 4 lines of code in an Action. But it would never look the way you expect it to because if you have drawn all of your elements free-form on the page, then they don’t actually reserve any space for themselves, and they don’t “push” other elements out of their way. They are like paintings on sheets of glass. Stacked up, looking through them at a right angle, they appear to touch or repel one another. But move a sheet of glass within the stack, and notice that nothing else is affected. So you have this footer element, outside of the PageDiv. So what? It will by default float to just below the visible “above the fold” part of the window, and then scroll up when you scroll the page down to see more content below the fold – even if there is additional content that would make the page taller than the initial screen.

You can simulate what this Action would do by pasting the following code into the Before section of the Page / HTML Markup dialog. This is precisely what an Action could do when it moved an element out of the PageDiv:

<div style="height: 100px; background-color: red; color: white">
	<p>Hello from the footer!</p>
</div>

Note how this doesn’t solve your problem one silly bit. It will be 100% browser window width, but it won’t be in a useful vertical position no matter how you fiddle the Inspector settings for the page – it will ALWAYS be just below the visible window height and fixed in place (scrolls into view) in my brief experiment here. The one structurally sound way to build the page you want is with inline HTML box construction.

You can sketch layouts all day long in the “draw/drag where you like it” mode, but at the end of the day, you will need to switch over to the more difficult/intellectually-rigorous inline mode for production code. Once you do, and once you get used to switching mental models from the paper design mode to the liquid reality that is HTML, you will find that it’s not that difficult and it opens up new possibilities for creative design that won’t fall apart when it’s viewed by an new and weird browser or a visually-disabled person with the font size cranked up to compensate.

Walter

On Apr 19, 2013, at 9:25 AM, Doren wrote:

Glynster, yes, I have done that too. Set to 100% it only extends to 100% of the Width of Page in general, it will not extend further when a browser window is stretched.


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

Thats because you have set a page size which is finite. As mentioned
before, there are no “pages” in a sense, there are only containers and the
page is the primary one. You need to first make your page 100% for any
contents within it to behave appropriately.

Just try a test in another new FW document. - enter nothing on a new blank
page - but set the page width to both “flexible” and width of 100%

Now, any item you place on that page (touching both sides of the page) and
also set to be flexible and 100% width will automatically grow with your
browser.

Tip! If you want something to now stay centered on the page you’re gonna
have to put it inline as far as I know.

On 19 April 2013 14:25, Doren email@hidden wrote:

Glynster, yes, I have done that too. Set to 100% it only extends to 100%
of the Width of Page in general, it will not extend further when a browser
window is stretched.


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

Boy Doren, I’m right there with you and feel your pain and frustration (I have been very frustrated with trying to create a fluid layout).

I have tried the inline method described here and all is fine when I insert HTML items BUT once I insert a graphic item I no longer have the ability to have it center with the layout.

I would greatly appreciate it if someone would help with this.


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

BUT once I insert a graphic item I no longer have the ability to have it center with the layout.

The trick here is to either have your graphic within an Html item or apply the graphic as a background to an html item.

David


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

Dave, I see you responded to my post the same day I wrote it, thanks for that. I have been away and had not had been able to check-back here until now.

I have inserted the graphic into an HTML box which is nested into a parent HTML box with the settings set to “center”.

Then when I look at the Inspector, that HTML box changes into a graphic box and doesn’t follow the align “center” setting.

I will have to try applying the graphic as a background as you suggest.

Thanks,
Steve


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

Dave,

Thanks so much for your help. I made the graphic the window background and I can now get it to center.

-Steve


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