Opened 4 years ago

Closed 3 years ago

#19224 closed Bug (fixed)

Documentation version switcher obscures footer

Reported by: aruseni Owned by: graup
Component: * Version: 1.5
Severity: Normal Keywords:
Cc: Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes


There is a documentation switcher at the right bottom corner of every documentation page.

It is very nice and neat, but it has a little issue: if you scroll down to the bottom of the page, you cannot read the text in the page footer.

We could solve this by adding a tiny piece of JavaScript in there, which would listen to the scroll event and reposition the documentation switcher in case the footer (or some part of it) is visible (so the documentation version switcher remains on top of the footer when the footer is shown).

Here is an example (use this bookmarket to load jQuery if you are going to test this by running the code in the JS console):

Code highlighting:

var versions = $("ul#doc-versions")
var footer = $("div#footer")

$(window).scroll(function() {
    var window_bottom = $(window).scrollTop() + $(window).height();
    if(window_bottom >= $(document).height() - (footer.height() + 20)) {
        versions.css("bottom", footer.height() - ($(document).height() - window_bottom) + 25 + "px");
    } else {
        versions.css("bottom", "5px");

Of course, we can easily rewrite it to only use plain JavaScript (without jQuery).

Attachments (1)

djangoproject_footer.png (32.9 KB) - added by timo 3 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 4 years ago by claudep

  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset
  • Triage Stage changed from Unreviewed to Accepted
  • Type changed from Uncategorized to Bug

comment:2 Changed 4 years ago by Melevir

  • Owner changed from nobody to Melevir
  • Status changed from new to assigned

comment:3 Changed 3 years ago by reecelong

  • Has patch set
  • Owner changed from Melevir to reecelong

I came across this ticket the other night and saw that it hadn't been touched in a few months, so I thought I would take a look at it. After looking through the source for, I appeared (to me at least) that you guys don't use much javascript. So, after talking with a friend, we came up with a small CSS hack to accomplish the goal. Changing the bottom property of the doc-versions ul to 50px pushes it up just enough to rest on the bottom of the inner menu frame. I have made the change in a branch that I just submitted, but if you feel like it doesn't look good or that we should go back to the drawing board, just let me know. Thanks!

comment:4 Changed 3 years ago by claudep

Please link to the branch/pull request.

comment:5 Changed 3 years ago by reecelong

Sorry about that! Here's the link to the pull request:

comment:6 Changed 3 years ago by EvilDMP

  • Owner changed from reecelong to EvilDMP

I have tentatively reserved this ticket for first-time committers who take part in the Don't be afraid to commit workshop at the DjangoCon Europe 2013 sprints on 18th and 19th May.

If you want to tackle this ticket before then, please don't let the fact that it's assigned to me stop you. Feel free to re-assign it to yourself and do whatever you like to it.

comment:7 Changed 3 years ago by graup

  • Owner changed from EvilDMP to graup
  • Version changed from 1.4 to 1.5

Will try to find a good (and maybe completely different) solution for this.

comment:8 Changed 3 years ago by graup

Please review my pull request:

This includes both the mentioned CSS quickfix (moving the always-fixed element up a bit) as well as an enhanced JS version which works like the "affix" known from bootstrap. Browsers with JS disabled fallback to the CSS fixed version.
I tested the JS in Chrome, Safari and Firefox (Mac).

Changed 3 years ago by timo

comment:9 Changed 3 years ago by timo

  • Easy pickings unset
  • Summary changed from The documentation version switcher to Documentation version switcher obscures footer

The JSS/CSS fix here seems like overkill. How about if we just break the footer text into multiple lines so the switcher won't collide for most resolutions?

comment:10 Changed 3 years ago by claudep

What about simply adding a right-margin to the footer? Something like #footer > p : margin-right: 18em;

comment:11 Changed 3 years ago by Tim Graham <timograham@…>

  • Resolution set to fixed
  • Status changed from assigned to closed

In 3e02aa255994af7e01d833356ce6d8c9ae49612b/

Fixed #19224 -- Prevented doc version switcher from obscuring footer.

Thanks aruseni for the report and claudep for suggesting the fix.

Note: See TracTickets for help on using tickets.
Back to Top