Fixed footer thoughout site

[gulliver]

I need a footer which remains constant throughout the site.

An example is http://monocle.com/, where the footer contains a live radio stream which remains playing when onsite, even when clicking links to load other pages.

I guess in the old days I’d have done this with frames, but what’s the sensible modern option?

[thienchi]

As I see in that website, they always load the footer at the fixed position. You can do like that by set the bottom to zero and position: absolute. We have another technique that like in Soundcloud they using single page app then the content loading and the footer still there

[gulliver]

Thanks.

I though ‘position: absolute’ would simply pin it to the foot of the viewport - surely something else is required to ensure that it doesn’t simply reload with different pages?

[PaulOB]

@thienchi

You can do like that by set the bottom to zero and position: absolute

Not ‘absolute’ you want ‘fixed’ (otherwise it will scroll away with the content).

@gulliver

I though ‘position: absolute’ would simply pin it to the foot of the viewport -

As mentioned above you need position:fixed which will fix the element to the bottom of the viewport. You will then need to ensure that the last element in your page has sufficient padding bottom in order to be visible above the fixed element (otherwise you will not be able to scroll the content far enough up the page to see it).

@gulliver

surely something else is required to ensure that it doesn’t simply reload with different pages?

You lost me there:)

Fixed footers and CSS have nothing to do with loading pages or elements. If you want an element to appear on each page then that would be the job of php or server side includes (SSI) to create the element in your html on every page and then you would need css to position it as required.

[Mittineague]

The topic title is misleading. gulliver is not looking for a “fixed footer”, but an alternative to using an iframe to hold a sound file that plays per site visit rather than per page visit.

[ronpat]

@Mittineague

an alternative to using an iframe

Alternative to “frameset”, methinks he sez.

[Mittineague]

I just tried the page with JavaScript turned off and got

It looks like your browser has JavaScript turned off. JavaScript is required for this feature to work.

So it looks like the player is more a Javacript thing than HTML or CSS

[PaulOB]

@Mittineague

gulliver is not looking for a “fixed footer”,

It sounds like he is looking for both

@Mittineague

So it looks like the player is more a Javacript thing than HTML or CSS

The player in the site linked to is positioned with css.

.radio-player {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  line-height: 1.1em;
}

How it gets into the html, or how it’s created is a separate question.

[ronpat]

I just coded up a “proof of concept” using HTML 4.01 frameset and it works as gulliver described. I used a .gif (instead of sound) but the .gif did not restart when the “main” frame was changed whereas it did when the whole page was reloaded. @Mittineague’s description seems to be spot on " to hold a sound file that plays per site visit rather than per page visit." “start on site visit” is consistent with the frameset mechanism. I can’t envision why the sound file would be located in the footer nowadays. So, as @Paul says, it seems like the request for a fixed footer and “start on site visit” sound file are separate issues.

<shallow water>
No, I didn’t remember how to write a frameset. I revisited some files that I wrote in 1999 as models
</shallows>

[gulliver]

Thanks to you all.

I hadn’t meant to confuse the issue with a misleading title.

[sg707]

Frame is a underpowered and abused feature. It just became really unpopular when printing a site that uses frame. These days, all application (not sites) use Single Page Application. No frames, no css tricks, you just render it once and that’s it.