User:Shahadat/FloatingTOC.js
Jump to navigation
Jump to search
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 Justapedia:Bypass your cache.
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", or "iusc", take note that this causes you to dynamically load a remote script, which could be changed by others. If you are unsure whether code you are adding to this page is safe, you can ask at technical help. The code will be executed when previewing this page. |
This user script seems to have a documentation page at User:Shahadat/FloatingTOC and an accompanying .css page at User:Shahadat/FloatingTOC.css. |
/* [[Category:Justapedia scripts]]
Originally designed to replace User:Shahadat/FloatingTOC.css.
*/
if (typeof hideDefault === 'undefined') var hideDefault; //declared as global
if (typeof leftDefault === 'undefined') var leftDefault;
function hideShow(header, content) {
header.text(function () {
return content.is(":visible") ? "Hide" : "Show";
});
}
$(function() {
importStylesheet('User:Shahadat/FloatingTOC.css');
var itm = document.getElementById("toc");
if (itm) { //check if toc exists
var cln = itm.cloneNode(true); // clone and append the toc
cln.id = "toc2";
document.body.appendChild(cln);
$('#toc2').wrap("<div class='content1' id='main1' ></div>"); //encase it with header and container
var header = "<div class='header1' id= 'header1'><span id='hide'>Hide</span></div>";
$('.content1').append(header);
$('#main1').wrapAll("<div class='container1' id='main2'></div>");
var useless = document.getElementsByClassName("toctoggle")[1]; //remove the damn not working "hide" option
$(useless).remove();
$header = $(".header1");
$content = $header.prev();
if (leftDefault) $("#main2").css('right', ""); //config variables
if (hideDefault) {
$("#toc2").css('display', "none");
hideShow($header, $content); //when default is hidden, display as "hide" too
}
$(".header1").click(function () { //when clicked, collapse! vice-versa
$content.slideToggle( function () {
hideShow($header, $content);
});
});
}
});