User:Omegatron/monobook.js/floatingSidebar.js

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Code that you insert on this page could contain malicious content capable of compromising your account. If you import a script from another page with "importScript", "mw.loader.load", "iusc", or "lusc", take note that this causes you to dynamically load a remote script, which could be changed by others. Editors are responsible for all edits and actions they perform, including by scripts. User scripts are not centrally supported and may malfunction or become inoperable due to software changes. A guide to help you find broken scripts is available. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump.
This code will be executed when previewing this page.

Documentation for this user script can be added at User:Omegatron/monobook.js/floatingSidebar.

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

// 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;                                     '+
'   }                                                                           '
);