[Pro] How to do a flexible height?

Hi,
I have a resume page on my website that in Safari needs a lot of space or the footer will wind up hovering 2/3 up the page, but in firefox it leaves extra space to scroll down to the end of the page. Not the end of the world, but if there was a way to make it flexible to adapt to people’s font size without the extra page length that could be cool.
Thanks

The page is at Resume


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

On Nov 14, 2009, at 10:27 AM, Waylen wrote:

…but in firefox it leaves extra space to scroll down to the end of
the page.

It happens in Camino too. Unfortunately, I don’t have an answer for
you, but I can offer a minor suggestion regarding your gallery pages.
You might want to consider having the thumbnails open in a separate
window. Personally, I’m in the habit of closing the window after
viewing the enlargement, and then I’ve lost the site if it’s not a
separate window. Plus, closing a window is a little quicker than
hitting the Back button and waiting for the page to load again. My 2
cents.

Nice artwork, by the way. My favorite is Blue Ice #5.

Richard

Richard Houston
Architectural Art
http://www.richardhoustonart.com


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

While that’s a good suggestion Richard, the problem with that is people use pop-up blockers and so if he were to have these ‘separate windows’ then perhaps they wouldn’t load when someone clicked on them.

Another suggestion would be to use the ScriptyLightbox action found here:

http://actionsforge.com/actions/view/153-scriptylightbox

and that would eliminate the pop-up blockers threat and it’d be cool looking if showing larger versions of the paintings is required.


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

the problem with that is people use pop-up blockers and so if he
were to have these ‘separate windows’ then perhaps they wouldn’t
load when someone clicked on them.

Possible, but I think today’s popup blockers are smart enough to
allow popups triggered by direct viewer interaction. In other words
block things tripped through onLoad or onFocus but not onClick.

I’m guessing, however, as I don’t have concrete evidence.

k


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

Hi Waylen,
Looks like you question got hijacked by another subject! Back to your question…have you tried to undefine the height of your HTML item that contains the resume? Click the little icon just to the left of where the height is defined in the HTML inspector. This should make that HTML container shrink or grow based on the content inside.


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

Hey thanks all for the feedback. I tried the undefined height idea, and the problem is that the html box is sitting on top of a defined graphic item that has the outer glow. Its been so long since i was just starting the site, but it seemed that I had problems with the outer glow effect looking they way we wanted when applied to the html item, thus the need for the graphic item underneath. I’m thinking now that there may not be a way to really make this be flexible, unless one could group it with a graphic item that flexed but I don’t think the graphic items do that.


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

There is a tutorial at SP Towers called ‘Frame a Page’ that should be able to do what you want - have a look at it.

David


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

Sometime around 16/11/09 (at 20:02 -0500) Waylen said:

I’m thinking now that there may not be a way to really make this be
flexible, unless one could group it with a graphic item that flexed
but I don’t think the graphic items do that.

Well… no, they don’t. Although they can

This isn’t at all common, not by a long chalk, but it isn’t hard to
add a bit of code to the extended attribute for an image that sets
the height (for example) to be percentage based.

Select a graphic (a layered one, this won’t play with table-based items),
Choose Item > Extended and then click the ‘img style’ tab,
Click New, then set it up as follows:

Name: height
Value: 100%

(Or whatever percentage you like.)

Then you have to work out what it lives inside and how that scales.
But yes, this can make a graphic that flexes. Fun and perhaps useful.
:slight_smile:

There are also other solutions - Paul Dunning has an action that
allows quite sophisticated text box decorations to be made. It is
called, cunningly, “Text Box Decoration”. Paul, how does that behave
itself in Freeway 5?

k


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

Perhaps not directly relevant to your situation but just so you know,
it is possible to make graphics expand/contract using CSS and relative
em units. Lots of tutorials available. Ernie had a good one but I
don’t have the link though someone will have it, I’m sure.

Todd

On Nov 17, 2009, at 11:08 AM, Keith Martin wrote:

I’m thinking now that there may not be a way to really make this be
flexible, unless one could group it with a graphic item that flexed
but I don’t think the graphic items do that.


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

Here’s an example of flexible graphics, all made in Freeway using
simple “width: 100%” etc. stuff in extended attributes. It isn’t
directly pertinent to the original question but it does show an
example of what I was talking about…

http://www.ma-publishing.com/flex/

Resize the browser window and see how it flexes.

k


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

Keith,
How did you make the background image flex? If I’m looking at the code correctly it looks like it is done by changing the
“width: 100%” etc. stuff in extended attributes." …if you have time could you walk me through it? I had never thought about adding a flexible graphic as the background. I have kind of done this before using the background image action, but I don’t think that is what you did here.


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

That’s right. The 100% width/height stretches the 500px x 500px
graphic to fit the window.

Select the graphic then go to:

Menu > Item > Extended >

and add

float
left

then go to tab and add

width
100%

height
100%

This will stretch the graphic to the size of the parent div which in
the case of Keith’s ex. is the browser window.

Todd

On Nov 17, 2009, at 12:22 PM, Rich Gannon wrote:

How did you make the background image flex? If I’m looking at the
code correctly it looks like it is done by changing the
“width: 100%” etc. stuff in extended attributes."


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

Sometime around 17/11/09 (at 12:58 -0600) Todd said:

That’s right. The 100% width/height stretches the 500px x 500px
graphic to fit the window.

Yep. Although the way I did it was slightly different from your suggestion.

Draw a graphic box the size of the page and give it a fill or an
image. I used the Fill Master action to make a linear blend between
two colours and then the Fade action to fade it out at one end.

Use the Inspector palette’s Dimensions pane to have it set to be
fixed to the left and the right sides, making the width inactive
(dimmed). Do the same for the top/bottom settings as well.
Note that this sets the div, the HTML structure that contains the
graphic. This in itself doesn’t change the size of the graphic.

Now choose Item > Extended, select the ‘img style’ tab, add a new
attribute and give it that width 100% setting. Add another for
height, 100% as well.
THIS is what tells the browser that the graphic can flex. It sets it
to be 100% of the width (and height) of its container, which is the
div that we set to fit itself to the left, right, top and bottom
edges of the page (and hence browser window).

I did this with two graphics, one fading downwards and the other
fading upwards. I set them both to be output as PNG format bitmaps
set to millions of colours, so the transparency set through the Fade
action was preserved as an 8-bit alpha channel in the graphics that
were generated.

The grey tint box is simply a graphic that’s filled with black and
set to 30% opacity, using the Styles & Colors palette.
This was then set to flex in a similar fashion to the larger
graphics, just with a bit of variation in the actual details.

The float:left stuff is produced by Freeway as standard. All I did
was (1) set the CSS-positioned object to pin its sides to the window
rather than be a fixed width/height, and (2) add the Extended
attributes to the img style section, setting the image’s width and
height to 100%.

k


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

Interestingly, my example page is made almost completely from
graphics. The only thing that’s not a graphic element is the
linewrapping HTML text.

And yet the total size for this HTML document and all associated data
(32-bit PNG graphics, GIFs, CSS and pngbehaviour document) is a
miserly 19.5 kilobytes. Bargain.

k


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

Thanks Todd and Keith,
I was able to make a close approximation…

http://frontrangeweb.com/flexit.html
(I nabbed your background images Kieth).

One thing that I would add, from my 50 trys and subsequent errors.

Page alignment must be set to none.

Thanks again.


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

Page alignment must be set to none.

Ah, yes. Well (eventually) spotted. :slight_smile:

k


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

Thanks for all the tips, I can’t wait to try this stuff. I have a huge workload of class assignments until the weekend, but then I will be on it.
Waylen


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

Is there a sample anywhere of what that scriptyaction looks like in action?

I’m still on Pro 4, but it appears to work with that as well as 5, and I might like to experiment.

Thanks.


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