When the page is narrowed (or expanded) the various boxes move up or down a line to fit, but remain centered on that respective line.
How can I achieve this?
Cheers,
Nik
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Nik,
This isn’t what I would call fully responsive as typically when the browser is resized items will change size, position or even get dropped from the layout. Here what we see are the thumbnails and caption blocks wrapping to reflow to the new page width.
You can do this quite easily in Freeway;
Now when you adjust the browser width the child boxes will reflow just like test to fit the available space.
Obviously this is a very simple example and only useful if you want to create a web site of coloured squares but if you double-click the first child box we created in step 3 and add another two more children to this (a picture and a caption box) then you’ll be able to reproduce your example page quite easily.
If you get stuck shout and I’ll put an example Freeway document together.
I hope this helps.
Regards,
Tim.
On 3 Jul 2012, at 05:31, Nik Andrew wrote:
When the page is narrowed (or expanded) the various boxes move up or down a line to fit, but remain centered on that respective line.
How can I achieve this?Cheers,
Nik
FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Tim,
Thanks for that – I think I have got that far myself. The problem I encountered was that the child boxes all align to the left in this scenario while in the example site these boxes continuously centre themselves within the page width – which is really what I would like to achieve. How would I do this?
Cheers!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Nik,
That is a bit trickier in Freeway as it requires setting the inflow items as inline-block elements - something Freeway won’t naturally do although we can bend its arm a little. The trick is to float the items left as we did in the previous example and then overwrite this in the styles with the correct styling. It’s a bit of a hack as the design view is slightly different to the preview but it works.
The two things here that make this work is the inline-block style applied to each panel and the text-align center that aligns the elements in the main ‘innerpage’ area. Together the panels are treated much like centred text on a page and will reflow as the page is flexed.
Here’s an example page;
http://www.freewayactions.com/test/tim-boelaars/
and here’s the Freeway file with the custom styles in place;
http://www.freewayactions.com/test/tim-boelaars/tim-boelaars-test-site.zip
Regards,
Tim.
On 3 Jul 2012, at 22:26, Nik Andrew wrote:
Thanks for that – I think I have got that far myself. The problem I encountered was that the child boxes all align to the left in this scenario while in the example site these boxes continuously centre themselves within the page width – which is really what I would like to achieve. How would I do this?
FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Here’s an Action I wrote a while back that allows you to apply inline-block to a DIV: InlineBlock - ActionsForge
Walter
On Jul 4, 2012, at 7:11 AM, Tim Plumb wrote:
Hi Nik,
That is a bit trickier in Freeway as it requires setting the inflow items as inline-block elements - something Freeway won’t naturally do although we can bend its arm a little. The trick is to float the items left as we did in the previous example and then overwrite this in the styles with the correct styling. It’s a bit of a hack as the design view is slightly different to the preview but it works.The two things here that make this work is the inline-block style applied to each panel and the text-align center that aligns the elements in the main ‘innerpage’ area. Together the panels are treated much like centred text on a page and will reflow as the page is flexed.
Here’s an example page;
http://www.freewayactions.com/test/tim-boelaars/
and here’s the Freeway file with the custom styles in place;
http://www.freewayactions.com/test/tim-boelaars/tim-boelaars-test-site.zipRegards,
Tim.On 3 Jul 2012, at 22:26, Nik Andrew wrote:
Thanks for that – I think I have got that far myself. The problem I encountered was that the child boxes all align to the left in this scenario while in the example site these boxes continuously centre themselves within the page width – which is really what I would like to achieve. How would I do this?
FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com
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
ohhh - I wish there would be something in Freeway that applies such “actions” as standard to all inserted DIVs instead of applying them to each single one. I know - copy, paste or cmd-D does the job as well but … in a full inline-box-model this isn’t very sexy elegant.
Another option would be a “DIV Flavor Extended” action that combines:
and a couple of more that I actually forgot 
Just check “activate” to use and go.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Be prepared that older browsers namely IE7 only sees a single vertical line of boxes.
That is if anyone is bothered about what IE does anymore?
–
David Owen
On 4 Jul 2012, at 12:11, Tim Plumb wrote:
Here’s an example page;
http://www.freewayactions.com/test/tim-boelaars/
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I could make an Action that applied to the parent DIV, and any contained child DIVs would get the inline-block treatment. The trick would be getting it to apply to the first-level children only, though. There’s not a good way I can think of to make that happen. If you want to get all the DIV children of a div, you would use:
foundParentDiv.fwFindAll('div')
but that gives you everything inside foundParentDiv that responds to the call for a DIV, so that could mean nested children that you want to remain positioned another way would also become inline-block, to the detriment of your layout. It’s a tough trade-off between having to apply it to each element and getting to apply it once, but potentially blowing up your layout.
Walter
On Jul 4, 2012, at 8:33 AM, Thomas Kimmich wrote:
ohhh - I wish there would be something in Freeway that applies such “actions” as standard to all inserted DIVs instead of applying them to each single one. I know - copy, paste or cmd-D does the job as well but … in a full inline-box-model this isn’t very sexy elegant.
Another option would be a “DIV Flavor Extended” action that combines:
- inline-block
- advanced inline-style remover (Max)
- class or ID css-styles inserter name/values (not the line by line extended stuff name/value)
and a couple of more that I actually forgot
Just check “activate” to use and go.
Cheers
Thomas
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 can think of some ways to use CSS to apply styles to the offspring, but the real issue here is functionality within the Freeway Pro environment, is it not?
You guys constantly amaze me with the creative ways you find around the obstacles
Sent from my iPad
On Jul 4, 2012, at 8:54 AM, Walter Lee Davis email@hidden wrote:
I could make an Action that applied to the parent DIV, and any contained child DIVs would get the inline-block treatment. The trick would be getting it to apply to the first-level children only, though. There’s not a good way I can think of to make that happen. If you want to get all the DIV children of a div, you would use:
foundParentDiv.fwFindAll(‘div’)
but that gives you everything inside foundParentDiv that responds to the call for a DIV, so that could mean nested children that you want to remain positioned another way would also become inline-block, to the detriment of your layout. It’s a tough trade-off between having to apply it to each element and getting to apply it once, but potentially blowing up your layout.
Walter
On Jul 4, 2012, at 8:33 AM, Thomas Kimmich wrote:
ohhh - I wish there would be something in Freeway that applies such “actions” as standard to all inserted DIVs instead of applying them to each single one. I know - copy, paste or cmd-D does the job as well but … in a full inline-box-model this isn’t very sexy elegant.
Another option would be a “DIV Flavor Extended” action that combines:
- inline-block
- advanced inline-style remover (Max)
- class or ID css-styles inserter name/values (not the line by line extended stuff name/value)
and a couple of more that I actually forgot
Just check “activate” to use and go.
Cheers
Thomas
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
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
it is probably more the wish of the laziest man under the sun but I redesigned these days a full-inline-box-model monolith to externalize each single div to finally have a clean external stylesheet.
In fact, one single WebYep action didn’t allow me to use Tim’s externalizer to do it in one step, so it took me one hour of work for each page-instance (probably a half but anyway deathless).
Therefore I have anyway to rethink my strategy (once again) and probably prepare one single div, apply the necessary (or above mentioned) actions and start the “cmd-D inline-box-model” which should work charming as well.
ohhhhh - yeahh, exciting thoughts.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I’d like to come back to Nik btw cause i owe him an answer (he wrote me a PM but I didn’t came back to him yet):
Tim’s cool example should look good for iPad/iPhone.
Before I’d really mind about the responsive stuff (such as I did these days), I’d mind about a second and optimized layout for the mobile devices.
Therefore I double my opinion that with the iPhone/iPad redirect-action Softpress already did a so grat job in optimizing pages for each single device.
There are a couple of different opinions in how to optimize or build a web-page for covering the need of “all devices”.
Here are a few of my (unaware) cents:
Start mobile-design thinking first. This forces to think about min-needs (content and function).
Hover, tool-tipps, image-zoom, various link-appearance and such stuff are outdated!
Strange thesis I know - but really: A touch experienced user do not expect such functions. They expect what they see - but not what they probably see later (or even never will).
A lot of those functions furthermore requires the load of huge and often various libraries. All of them can be added later to the desktop version and adding is easier than deleting.
One key feature for mobile stuff could be e.g. accordion to keep content compact.
Re-arrange all that compact stuff later to an extended desktop version. Flavor this with the outdated stuff if necessary.
And as I already mentioned in another list:
Responsive is looking good - but nobody is sitting at his machine dragging permanent his browser window small, big, small, big …
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hello all!
Many thanks for all advice and positive response.
Tim, your example is exactly what I hoped for.
Walt, I found, downloaded and tried your action, but didn’t quite know how to use it so I didn’t get the expected result.
Any pointers would be useful!
Thomas, I think your points about designing firstly for mobile as well as the one about people not sitting around re-sizing their browser window are both very valid!
One of the things I struggle with (because of this gaping hole in my experience in this area) is the lack of documentation or a tutorial example to explain some of the brilliant actions and widgets you people create. I think I know how that caveman felt when he was presented with the first wheel… 'Wow, that looks great… but what the **** do I do with it!!!
Guys, Freeway wouldn’t be half the program it is without this forum. Thanks – I’ll get back to work now!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
For anyone following this thread I’ve updated the example gallery to work with Freeway 7. The dimensions are all now set as percentages so the images and margins all flex as the browser width changes. I’ve also adjusted the layout from 4 columns to 2 when the available browser width gets down to 768 pixels.
The resulting layout should look a lot more like the original Tim Boelaars site (http://www.timboelaars.nl/).
Example;
http://www.freewayactions.com/test/tim-boelaars-fw7/
Freeway 7 file;
http://www.freewayactions.com/test/tim-boelaars-fw7/tim-boelaars-test-site-fw7.zip
FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Tim,
I found this post, which your grid is exactly what I’ve been trying to produce on my own, with exactly the same problems that Nik encountered. Thank you for sharing the freeway file.
I’m sorry for my obvious ignorance, but when copying your file, the boxes, being html items, I don’t even see the images. How do I changes the images to be pictures that I import?
Thanks for your patience.
Donna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi again, Tim.
I’m actually trying to apply this other example of yours (overlay with a hover that is also a link)
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk
The issue I’m having is that the images are responsive, but the overlay isn’t. You mentioned that ideally you would make the overlay a Div instead of a table - would that make the overlay responsive? If so, kindly inform how to make the overlay a Div.
Otherwise, your suggestions of a different solution are greatly appreciated.
Many thanks,
Donna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
You could apply opacity to an image on hover, and set the background-color of it’s parental div to #000. That way the image will dimm/darken on hover.
Flexbox might be of some assistance when you want to center text.
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at:
That sounds great, Richard. How would I go about doing that in step-by-steps?
Thanks a lot,
Donna
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Tim,
I was able to make the overlay on hover work perfectly. Thanks for that suggestion in another post.
My only issue is how to swap out the HTML images in your sample gallery . Is it simply File<Get HTML? When I do this, FW crashes.
All the best,
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Make sure the backgrounds of the div’s containing the images that have a link applied to them have a black background, and add this style to your custom stylesheet:
img a:hover { opacity: 0.5 }
This should do the trick.
Richard
freewaytalk mailing list
email@hidden
Update your subscriptions at: