Benutzer:Funbuilder/Spoilervorlage.js
Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.
- Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
- Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
- Internet Explorer/Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken
- Opera: Strg+F5
var schwaerzung = true;
function initSpoilerSchwaerzung(element, platzhalter, squelle) {//Bei Seitenaufruf
var breite = element.textContent.width;
var hoehe = element.textContent.height;
element.style.width = breite;
var schwarzesElement = document.createElement("a");
schwarzesElement.appendChild(document.createTextNode("Klicken um Spoiler aus „" + squelle.textContent + "“ anzuzeigen."));
//schwarzesElement.style.width = breite;
//schwarzesElement.style.height = hoehe;
schwarzesElement.style.backgroundColor = "rgba(100,100,100,1)";
schwarzesElement.style.color = "rgba(255,255,255,0)";
element.onclick=function() {toggleSchwaerzung(element, schwarzesElement)};
schwarzesElement.onclick=function() {toggleSchwaerzung(element, schwarzesElement)};
platzhalter.insertBefore(schwarzesElement, platzhalter.childNodes[0]);
element.style.display="none";
squelle.style.display="none";
schwarzesElement.style.display="inline";
schwaerzung = true;
schwarzesElement.addEventListener("mouseover", function(schwarzesElement) {// highlight the mouseover target
schwarzesElement.target.style.color = "rgba(255,255,255,1)";
}, false);
schwarzesElement.addEventListener("mouseout", function(schwarzesElement) {// highlight the mouseover target
schwarzesElement.target.style.color = "rgba(255,255,255,0)";
}, false);
}
$(document).ready(function() {
var allSpoilerSpans=document.getElementsByClassName("spoilerSchwaerzung");
var allPlatzhalterSpans=document.getElementsByClassName("spoilerPlatzhalter");
var allSpoilerQuellenSpans=document.getElementsByClassName("spoilerQuelle");
for (i=0; i<allSpoilerSpans.length; i++) {
initSpoilerSchwaerzung(allSpoilerSpans[i], allPlatzhalterSpans[i], allSpoilerQuellenSpans[i]);
}
});
function toggleSchwaerzung(element, schwarzesElement) {//Bei Klick auf Spoiler
if (schwaerzung == true) {//Wenn Spoiler sichtbar gemacht werden sollen
element.style.backgroundColor = "rgba(255,0,0,0.3)";
element.style.color = '';
element.style.display="inline";
schwarzesElement.style.display="none";
schwaerzung = false;
} else {//Wenn Spoiler geschwärzt werden sollen
schwarzesElement.style.backgroundColor = "rgba(100,100,100,1)";
schwarzesElement.style.color = "rgba(255,255,255,0)";
element.style.display="none";
schwarzesElement.style.display="inline";
schwaerzung = true;
}
}