I posted last week about this, but I don’t think I explained very well what I’m needing to do. I’m not even sure if it’s possible with Freeway - which is really what I’m trying to figure out. I’m going to give it one more shot with a really simple explanation (hopefully it’s simple). If it is possible, I’d really like to chat with someone that knows how to do it (I’m willing to hire someone to help me). I have been playing around with Webflow.com to try and make it work there. But I haven’t had any luck so far.
The one page website consists of 3 parts/requirements: 1) A background image that always fills its container (vertically and horizontally) - it doesn’t matter if it’s a desktop, laptop, tablet, phone, portrait, landscape, etc.; 2) A logo and rotating tag line that are always centered horizontally; and as a “unit,” centered vertically (see the image link below) - some of the tag lines might wrap to two or even three lines; 3) When someone either hovers over the logo (desktop/laptop) or touches on the logo (mobile/tablet), an email subscription box needs to display; 4) A visitor should never have to scroll to see any of the content (logo and rotating tag lines). Everything should rearrange itself (responsive) to fit whatever container its in, with no scrolling.
I think #4 might be the most challenging requirement.
Here is the website I have started putting together using Webflow (I don’t have a Freeway example). http://evr.webflow.io
PS - In case anyone is wondering, the reason there can’t be any scrolling to see any of the content is because we’re shooting for a magazine style website. To get to other pages (which don’t exist right now), you’ll swipe/drag/click and the content on the screen will change (kind of like the Flipboard app).
The centering content part is pretty easy (with a bit of tinkering – vertical entering and web pages have a chequered history). It’s this that sounds like it’s going to be the most trouble, regardless of what you use:
In case anyone is wondering, the reason there can’t be any scrolling to see any of the content is because we’re shooting for a magazine style website. To get to other pages (which don’t exist right now), you’ll swipe/drag/click and the content on the screen will change (kind of like the Flipboard app).
To do that you’re going to have to use custom code. Plus the site will end up quite heavy for mobile devices since each page isn’t really going to be on a separate page. You’d need to somehow have all your pages contained within the index page and then use code to handle the swiping/dragging/clicking. It’s really going to be more of a full screen slideshow with page content instead of images.
Walter, if you’re reading this, is there a way to extend the Carousel Action with the Protaculous Action to react on swipe and drag? If so, that could definitely be an option.
As for centering, the simplest option is:
Draw an HTML item in the center of your page
In the Inspector set the H Align option to Left (%) + Right (%)
Make the Left and Right inset values the same, say 25%
Select the HTML item and open the extended dialog. We’ll set the inset from top in here so that the item’s in the right place when you’re working in Freeway
Click the Div Style tab
Click New and enter “top” in Name (without quotes) and “50%” in Value (again, no quotes)
Click New again and this time enter "-webkit-transform” in Name (no quotes) and “translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%)” in Value (it looks, and is, a little hacky but we have to enter all of them like that so it works across as many browsers as possible).
Now, when you preview the page in the browser the top of the item will be positioned 50% from the top of the window, and then scooted back up by 50% of the size of the item - resulting in vertical centering. There are other ways to do this, but this is the simplest. The one caveat is that it won’t work on anything below IE9.
If you’re wondering why it’s such a pain to vertically center things in HTML/CSS, there are more modern solutions that will do it in a less hacky way, but that works on even fewer browsers
Possibly, but it’s going to be quite a bit of work, since Scriptaculous hasn’t been updated in a very long time, and that’s where the animation stuff happens.
Walter
On Nov 3, 2015, at 7:56 AM, Joe Billings email@hidden wrote:
Walter, if you’re reading this, is there a way to extend the Carousel Action with the Protaculous Action to react on swipe and drag? If so, that could definitely be an option.
It sounds like the consensus is that it might be doable, but it’s not going to be doable using anything “out of the box” with Freeway? Is that a fair statement? @waltd when you say “quite a bit of work,” how long do you think it would take you to build something like that? I’m trying to get rough numbers - time, cost, etc. Thanks.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Getting the scrolling area in a Carousel construction to move when you finger-swipe it is a matter of a single line of CSS code. But getting the element to respond to that gesture by moving to and then stopping at the next “pane” is quite another. I really don’t have any idea how long it would take to research that problem set and provide a no-code-needed Action solution.
Walter
On Nov 4, 2015, at 2:42 PM, Russ Tanner email@hidden wrote:
It sounds like the consensus is that it might be doable, but it’s not going to be doable using anything “out of the box” with Freeway? Is that a fair statement? @waltd when you say “quite a bit of work,” how long do you think it would take you to build something like that? I’m trying to get rough numbers - time, cost, etc. Thanks.
Are you guys really convinced of polishing carousel and Scriptaculous giving the answer to this task? Disregarding the aspect of heavy page-weights (which seriously IS to discuss), I’d more think forward rather than saddling the old horse ever and ever.
Since 2012, starting responsive and responsible design in Freeway, I’m having had to skip 99% of “functional” actions and substitute them towards more modern scripts. While most of them had been horribly to integrate that time, they work pretty neat these days. Even combined and concatenated, I’d never had serious troubles using those.
###But
and that’s the message to the OP (once again):
99.99% of successful web work is “structure”, which will mean, the best “out-of-the-box” solution is worth nothing if people do not know how to framework. Integrating a script (even by hand) is an issue of some minutes.
Back to the original request:
The full-page scroll thing was a design trend in 2014 and is this kind of “story-telling”. I am not aware if this trend is still actual, but recently, I started to tinker with. I need to renew my good friend’s Michael the Illustrator page one day - so I thought setting up a very (very) raw. It is this: https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-clients/michaelmeier/index.html
It is using fullPage.js | One Page Scroll sections Site Plugin and from the MarkUp it is to be constructed within 5 minutes (some nested and classified DIVs). What attracted me here as well was, that I can “scroll” vertical and for one slide even horizontal. I din’t make some more thoughts on it, cause it’s some work going alongside.
As said - it’s not new and as far as I remember Richard v.H. published something similar a while back (but a different script I think).
But now for the bigger question:
How long will you guys keep up the mixture of “no coding knowledge required” and “no action available”?
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
