I’ve been trying (and failing) to add some code to make a fixed header part shrink on scroll. (I haven’t been able to find an action that can do this either. Is there one?).
What I want to achieve ideally, is for the fixed header to shrink and so consequently, for the floating elements it contains to shrink and realign from vertical to horizontal. 2 of these contain text, which would need to change point size too.
I found this code, which achieves the shrink and text size parts, but I can’t get it to actually do anything. I expect I’m putting it in the wrong place.
(How To Shrink a Header on Scroll)
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Show me a page that contains the full-size element you want to shrink, and I’ll help you out. This example code is very straightforward, and does not rely on any libraries like jQuery or Prototype, which means it will be compatible with anything.
The way that they have done this is to make the size of the header depend entirely on the font size, that way they can change one element and the whole layout shifts to accommodate that. In Freeway, you’d have to ensure that you didn’t allow the height of your header to be fixed, so you’d set the height to Flexible, and make sure that the content had its padding and margin set in ems. That way the font size will govern the size of the whitespace, too.
This is an artificially contrived example, and I’m sure you’ll want to have more functional content in yours, so let’s see what you’d really like to start with, and I’ll have a think about how to get the layout to flex, based on that.
Walter
On Mar 3, 2019, at 7:08 AM, grantsymon email@hidden wrote:
I’ve been trying (and failing) to add some code to make a fixed header part shrink on scroll. (I haven’t been able to find an action that can do this either. Is there one?).
What I want to achieve ideally, is for the fixed header to shrink and so consequently, for the floating elements it contains to shrink and realign from vertical to horizontal. 2 of these contain text, which would need to change point size too.
If FW was still happily chugging along, I think that this functionality would be a great subject for a FWAction. Actually … if I was designing web-software, I’d build this in.
People are now accessing the web, more and more via phones and tablets and a scrolling single-page is fast becoming the de facto. Many news sites are already single page. It’s easy to understand why and the argument for compelling content becomes increasingly stronger. If you can keep them scrolling, because each flick of the finger shows them something worth seeing, then you have solved the problem of getting them to click on a button offering unknown results.
My next update to my site will most likely be scrolling, but most probably with some sort of ‘touch to expand’ button that will extent specific content downwards. However, with limited real-estate, especially on phones, the need to recover space from a generous landing layout, becomes a primary objective. Hence the desire for a shrinking header.
And … since you ask … this is what I think would be really useful in many many cases. However, I can see that it might be quite challenging. I have absolutely no idea how you could even go about doing this, but FWIW, I’ve uploaded a 2 page demo, which shows what I think would be fab. The full header on landing, shrinking to a re-arranged narrow header on scroll.
With staggering simplicity, I’ve just managed to stumble across a method to achieve what I want. I took quite a lot of hours of googling before I realised, chewing on a piece of bread and watching the birds out the window, that all I had to do was use layers to hide an element. Sigh … You’d think that a photographer who’s been thinking in layers since his days in the darkroom, 40 years ago, would have thought of it sooner.
However!
There is a slight hiccup, in that because browsers have a sort of ‘bounce’ these days, where you can drag the content further down than the top and it ‘bounces back up’ when you let go … I can see the hidden content behind, when this happens. So I suppose this brings me to wondering if I can hide that element (the narrow header) until the page has scrolled a certain distance?
There are ways to do this showing and hiding in JavaScript, but not that I know of in CSS.
// with Prototype.js in the page
var big_header = $('id_of_your_big_header');
var small_header = $('id_of_your_small_header');
Event.observe(window, 'scroll', function(){
if(document.viewport.getScrollOffsets()['top'] >= big_header.getHeight()){
big_header.hide();
small_header.show();
}else{
small_header.hide();
big_header.show();
}
});
That code would go either in an observer wrapper, such as the ones written by Protaculous 2, or in a block at the bottom of the page (using the Before block in Page / HTML Markup). That ensures that the elements you want to modify are “there” from the JavaScript perspective.
Another way that you could do this using only CSS would be to put the small header underneath (in layer order) the large header, and set the small header’s position to fixed or sticky, and the large header to absolute. That way the large header would scroll away with the rest of the page, leaving the sticky header behind. But that may not fix the snap-back issue you’re describing. It’s also going to be a lot of fiddly work in a responsive layout, since you’re dealing with layers that don’t repel the other content of the page.
Walter
On Mar 8, 2019, at 8:22 AM, grantsymon email@hidden wrote:
With staggering simplicity, I’ve just managed to stumble across a method to achieve what I want. I took quite a lot of hours of googling before I realised, chewing on a piece of bread and watching the birds out the window, that all I had to do was use layers to hide an element. Sigh … You’d think that a photographer who’s been thinking in layers since his days in the darkroom, 40 years ago, would have thought of it sooner.
However!
There is a slight hiccup, in that because browsers have a sort of ‘bounce’ these days, where you can drag the content further down than the top and it ‘bounces back up’ when you let go … I can see the hidden content behind, when this happens. So I suppose this brings me to wondering if I can hide that element (the narrow header) until the page has scrolled a certain distance?
Another way that you could do this using only CSS would be to put the small header underneath (in layer order) the large header, and set the small header’s position to fixed or sticky, and the large header to absolute. That way the large header would scroll away with the rest of the page, leaving the sticky header behind. But that may not fix the snap-back issue you’re describing. It’s also going to be a lot of fiddly work in a responsive layout, since you’re dealing with layers that don’t repel the other content of the page.
This is exactly what I’ve done for the test-2 page I just posted. It seems to work fine for responsive, although I haven’t fine tuned it for the smallest viewports.
I’ve also thought of another way of solving the ‘snap-back’ problem (when you don’t know how to code, you just use a hammer) which is by having a 3rd layer - absolute, which extends off the page at the top. I’d appreciate if you could take a look Walter and tell me if you think it will break with some browsers … it works ok in Safari on my MBPro, iPad Pro 13 and iPhone 6.
I do get an issue where if I ‘accidentally move’ the page with 2 fingers instead of scrolling, the page content moves around sideways and I catch glimpses of the small header. Not sure what to do about this, or if it’s really a problem.
In the interests of understanding, I’ve also tried doing the same with the snippet of code you provided, but I can’t get it to work. The element doesn’t hide. Any help would be much appreciated:
You’re missing Prototype.js in the head of the page. Just apply Protaculous 2 to the page and publish again, and this should work. Prototype will be added to the page from the Google Ajax repository automatically.
Walter
On Mar 9, 2019, at 4:33 AM, grantsymon email@hidden wrote:
Thanks Walter.
In the interests of understanding, I’ve also tried doing the same with the snippet of code you provided, but I can’t get it to work. The element doesn’t hide. Any help would be much appreciated:
