User:Omegatron/monobook.js/floatingSidebar.js
From Wikipedia, the free encyclopedia
If a message on your talk page led you here, please be wary of who left it. Code that you insert on this page could contain malicious content capable of compromising your account. If you are unsure whether code you are adding to this page is safe, you can ask at the appropriate village pump. If this is a .js page, the code will be executed when previewing the page.
Note: After saving, you have to bypass your browser's cache to see the changes. In Internet Explorer and Firefox, hold down the Ctrl key and click the Refresh or Reload button. Opera users have to clear their caches through Tools→Preferences, see the instructions for Opera. Konqueror and Safari users can just click the Reload button.
// Floating sidebar // Originally at http://meta.wikimedia.org/wiki/Help:User_style/floating_quickbar // Restructure the page so that the sidebar can be floated addOnloadHook(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: document.write('<style type="text/css">' + " /* 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 */ '+ ' } '+ ' '+ ' #p-logo { /* Make logo inline with other divs */ '+ ' position:static; '+ ' } '+ ' '+ ' #column-one { /* Sidebar column start at the top screen edge */ '+ ' padding-top: 0; '+ ' } '+ ' '+ ' #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 */ "+ ' #footer { '+ ' margin-left: 13.6em; '+ ' border-left: solid 1px rgb(250, 189, 35); '+ ' -moz-border-radius-topleft: 1em; '+ ' -moz-border-radius-bottomleft: 1em; '+ ' } '+ '<'+'/style>');