Jump to content

User:Omegatron/monobook.js/floatingSidebar.js

From Wikipedia, the free encyclopedia
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;                                     '+
'   }                                                                           '
);