What's this front-end trick called...?

Destry · 2016-11-15 16:19:54

It’s an old hat, I guess, but I’ve never had a use for it until now, and I’m wondering how you talk about it and what it involves. For example, this link, where you have an initial cover region with big title and background image, then you scroll a bit and get a more simplified, fixed header at a given distance down.

What is that called, exactly? And what would be a good tutorial to learn about it?

I tried to deconstruct that one, but it’s a WP site and the markup is extremely complicated, full of nested menus and all kinds of shite I don’t need. I guessing the markup is bloated more than necessary. And I’m completely lost with the JavaScript side of it all.

I really like the idea he’s employing there in general, along with the progress bar, but I don’t need nearly as much menu links and icons as he’s using. Any suggestions to get started there?

gaekwad · 2016-11-15 16:48:52

I know it as a sticky header, but that’s just me.

Further reading: stackoverflow.com/questions/18382496/sticky-header-after-scrolling-down

jakob · 2016-11-15 16:55:49

I guess you’d call that a full-height cover image. There’s a css-only method presented here. You can place a background image in that example, center it and use background-size: cover; (see here) to ensure it fills the screen regardless of aspect ratio.

The site you linked to uses a simple bit of javascript to detect a page-resize and sets the div height to match the height of the window. The arrow-down scroll-to-content bit is simply an animated scrollto version of a normal #jump-link.

You’ll find the code for all that in the file jquery.custom.js. Open that in the web inspector then do a search for “SetDivHeight”, for “article-cover” or “cover”, and for “scroll-to-content” to see the relevant bits of code.

michaelkpate · 2016-11-15 17:04:26

You can also see a simple method here: Scrolling Nav

jakob · 2016-11-15 17:05:36

You could try headroom.js or waypoints for triggering / removing a fixed header at different scroll positions. And the progress scrollbar is described here, or you use a ready-made script such as jquery progress bar.

giampablo · 2016-11-15 19:08:59

Try also Headhesive.js for on-demand fixed header.
You decide where you want your header or menu to become fixed.
It is a javascript plugin with no dependencies.

Hope it helps

Destry · 2016-11-16 13:01:52

Thanks, all. I’ll give it a wade through.

jakob wrote #302915:

And the progress scrollbar is described here

Yeah, I tried playing around with that a few days ago, I can’t get the bar to appear from that tutorial alone. Not sure why. But I’ll use these new resources and see how it goes.

towndock · 2016-11-16 16:03:56

Here is a Textpattern site with a sticky menu: www.heckyeah.com

It uses jquery.sticky.js – find it here: stickyjs.com

philwareham · 2016-11-16 16:07:35

towndock wrote #302949:

Here is a Textpattern site with a sticky menu: www.heckyeah.com

It uses jquery.sticky.js – find it here: stickyjs.com

Hey, nice site! Like it.

Destry · 2016-11-17 20:07:16

I’ve managed the initial cover image part so far (not counting the child content yet), but I used height: 100vh and width: 100vw, which I now see got a lot of flack in the comments of this tutorial 2 years ago. Are those unites still taboo? (Disclaimer: I don’t give a fack about IE8 users. My projects are for people who are not in the 9-to-5 zone at a corporate craphole. Mobile I do care about, though.)

But I’m getting Txp errors and don’t know why. I suck at understanding error messages. What the heck is a “None” form?

Tag error:  ->  Notice: Undefined offset: 35 while parsing form None on page archive
textpattern/lib/txplib_misc.php:4476 parse()
textpattern/publish.php:562 parse_page()
index.php:105 textpattern()
Tag error: <txp:/> ->  Textpattern Warning: tag does not exist while parsing form None on page archive
textpattern/lib/txplib_publish.php:521 trigger_error()
textpattern/lib/txplib_publish.php:463 processTags()
textpattern/lib/txplib_misc.php:4476 parse()
textpattern/publish.php:562 parse_page()
index.php:105 textpattern()
Tag error:  ->  Notice: Undefined offset: 36 while parsing form None on page archive
textpattern/lib/txplib_misc.php:4476 parse()
textpattern/publish.php:562 parse_page()
index.php:105 textpattern()

Don’t know what “offset” means either.

etc · 2016-11-17 20:50:38

Destry wrote #302957:

Don’t know what “offset” means either.

Means a bunch of unclosed tags on archive page imo.

Destry · 2016-11-17 21:06:07

There wasn’t a bunch. Only one. But your clue about unclosed tags help me find it. The culprit… In this case incorrectly closed:

<txp:custom_field name="subtitle"> />

Fixed that snafu and all three errors went away.

Btw, if “undefined offset” typically means incorrectly closed tag some where, then why not just say it like that in the error? Do you guys have no control of the error messages? They are critical bits of UX, after all.

Last edited by Destry (2016-11-17 21:09:37)

Textpattern CMS

Textpattern CMS support forum

#1 2016-11-15 16:19:54