Opened 4 years ago

Closed 3 years ago

#19224 closed Bug (fixed)

Documentation version switcher obscures footer

Reported by: aruseni Owned by: Paul Grau
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 Tim Graham 3 years ago.

Download all attachments as: .zip

Change History (12)

comment:1 Changed 4 years ago by Claude Paroz

Triage Stage: UnreviewedAccepted
Type: UncategorizedBug

comment:2 Changed 4 years ago by Lebedev Ilya

Owner: changed from nobody to Lebedev Ilya
Status: newassigned

comment:3 Changed 4 years ago by reecelong

Has patch: set
Owner: changed from Lebedev Ilya 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 4 years ago by Claude Paroz

Please link to the branch/pull request.

comment:5 Changed 4 years ago by reecelong

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

comment:6 Changed 3 years ago by Daniele Procida

Owner: changed from reecelong to Daniele Procida

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 Paul Grau

Owner: changed from Daniele Procida to Paul Grau
Version: 1.41.5

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

comment:8 Changed 3 years ago by Paul Grau

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 Tim Graham

Attachment: djangoproject_footer.png added

comment:9 Changed 3 years ago by Tim Graham

Easy pickings: unset
Summary: The documentation version switcherDocumentation 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 Claude Paroz

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: fixed
Status: assignedclosed

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