User:Tinker/monobook.js/floatingSidebar.js
< User:Tinker
Jump to navigation
Jump to search
Revision as of 15:39, 21 July 2016 by imported>Tinker (Created page with "// Floating sidebar // Originally at http://meta.wikimedia.org/wiki/Help:User_style/floating_quickbar // Restructure the page so that the sidebar can be floated $(function ()...")
Note: After saving, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
// Floating sidebar
// Originally at http://meta.wikimedia.org/wiki/Help:User_style/floating_quickbar
// Restructure the page so that the sidebar can be floated
$(function () {
content = document.getElementById("column-content"); // Find the main content column
// Move the footer into the main column so that it scrolls
footer = document.getElementById("footer"); // Find the footer
footer.parentNode.removeChild(footer); // Remove the footer from the global wrapper
content.appendChild(footer); // Place footer at the end of the content column;
// Move the tabs into the main column so that they scroll
tabs = document.getElementById("p-cactions"); // Find the top tab list
tabs.parentNode.removeChild(tabs); // Remove the tab list from the side column
content.insertBefore(tabs,content.firstChild); // Place tab list at the beginning of the content column
// Move the personal links into the main column so that they scroll
personal = document.getElementById("p-personal"); // Find the personal links list
personal.parentNode.removeChild(personal); // Remove the personal links list from the side column
content.insertBefore(personal,content.firstChild); // Place personal links list at the beginning of the content column
});
// This CSS should be hidden from older versions of IE using javascript instead of the attribute selector?
// Include style sheet inline so that script is self-contained:
mw.util.addCSS(
" /* Fix the sidebar's position while you scroll */ "+
' div[id=column-one] { /* Using the attribute selector hides this from IE */'+
' position: fixed; '+
' height: 100%; /* If you shrink the browser too small, the */ '+
' overflow: auto; /* side column will become scrollable, so stuff */ '+
' z-index: 2; /* is always accessible, albeit ugly */ '+
' } '+
' '+
' div#p-logo { /* Make logo inline with other divs */ '+
' position: static; '+
' } '+
' '+
' div#column-one { /* Sidebar column start at the top screen edge */ '+
' padding-top: 0; '+
' } '+
' '+
' div#p-lang .pBody ul{ /* Sets the language box to a fixed height and */ '+
' height: 6em; /* scrollable if too long to fit on screen */ '+
' overflow: auto; '+
' } '+
' '+
' /* Fix the background image, too, so it looks nice as you scroll */ '+
' body { '+
' background-attachment: fixed; '+
' } '+
' '+
" /* Fix the footer so it looks nice and doesn't overlap the sidebar */ "+
' div#footer { '+
' margin-left: 13.6em; '+
' border-left: solid 1px rgb(250, 189, 35); '+
' -moz-border-radius-topleft: 1em; '+
' -moz-border-radius-bottomleft: 1em; '+
' } '
);
