Einleitung
Aufgrund einer Forenanfrage nach einem Spoiler-Tag, habe ich mal versucht, etwas zusammen zu basteln. Voraussetzung für diese Lösung ist leider das kostenpflichtige Custom Design Upgrade.
Der Knopf unten ist eine Mixtur aus den CSS3 Buttons von Catalin Rosu und dem Beitrag von Panos über Spoiler/hover content.
Da der Text nicht gleich beim Überfahren mit der Maus erscheinen sollte, habe ich den Code etwas umgearbeitet. Statt :hover verwende ich die Pseudoklasse :active. Damit erscheint der Text erst beim Klicken auf die Schaltfläche und verschwindet wieder, wenn die Maustaste losgelassen wird. Deshalb weiß ich leider nicht, ob diese Lösung auch in allen Browsern funktioniert. Im Firefox 24.0 unter Ubunut 12.04 scheint es jedenfalls zu klappen. 🙂
Möglichweise muss der Code auch noch an das jeweilge Theme bei WordPress.com angepasst werden. Das konnte ich nicht testen.
Sofern es funktioniert, sollte bei einem Klick auf die Schaltfläche unten ein Text erscheinen. Falls ja, wäre es nett, wenn ihr die Kombination aus Betriebssystem, Browserhersteller und Version als Kommentar hinterlasst.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
HTML-Code
Der HTML-Code in euerem Beitrag sollte folgendermaßen aussehen:
<div class="spoiler"> <p>Beispieltext</p> </div>
CSS-Code
Der CSS-Code ist etwas umfangreicher, und muss im CSS-Editor eingetragen und gespeichert werden.
.spoiler { display: inline-block; background-color: #ccc; background-image: -webkit-gradient(linear,left top,left bottom,from(#eee),to(#ccc)); background-image: -webkit-linear-gradient(top,#eee,#ccc); background-image: -moz-linear-gradient(top,#eee,#ccc); background-image: -ms-linear-gradient(top,#eee,#ccc); background-image: -o-linear-gradient(top,#eee,#ccc); background-image: linear-gradient(top,#eee,#ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee',EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 .5em; margin: .5em 0; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; cursor: pointer; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .spoiler:hover { background-color: #ddd; background-image: -webkit-gradient(linear,left top,left bottom,from(#fafafa),to(#ddd)); background-image: -webkit-linear-gradient(top,#fafafa,#ddd); background-image: -moz-linear-gradient(top,#fafafa,#ddd); background-image: -ms-linear-gradient(top,#fafafa,#ddd); background-image: -o-linear-gradient(top,#fafafa,#ddd); background-image: linear-gradient(top,#fafafa,#ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#dddddd'); } .spoiler:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .spoiler:focus { outline: 0; background: #fafafa; } .spoiler:before { content: "\26A0 Spoiler"; float: left; text-align: center; font-size: 1.5em; padding: 0 .2em; } .spoiler p { display: none; } .spoiler:active p { display: block; margin: 2.8em 0 .5em; font: normal .8em/1.8em Arial, Helvetica; border: 1px solid #777; background-color: #fff; -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; padding: 0 .5em; background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee)); background-image: -webkit-linear-gradient(top,#fff,#eee); background-image: -moz-linear-gradient(top,#fff,#eee); background-image: -ms-linear-gradient(top,#fff,#eee); background-image: -o-linear-gradient(top,#fff,#eee); background-image: linear-gradient(top,#fff,#eee); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#eeeeee'); }
Funktioniert leider nicht im Mobile Safari (iOS 7). Und die Tricks es zu aktivieren sind auf WP.com leider nicht möglich… 😦
LikeLike
Schade. Trotzdem danke für die Rückmeldung. 🙂
Was für Tricks?
LikeLike
Das hier z.B.: https://coderwall.com/p/h9rkba
Man muss irgendwie den Event-Listener aktivieren. Du könntest mal testen, ob du das an dem DIV anbringen kannst. Das könnte funktionieren …
LikeLike
Leider wird ontouchstart=““ ausgefiltert. 😦
LikeLike
Sollte man das nicht mal bei Automattic vorschlagen? Vielleicht kann man das ja in Abhängigkeit vom benutzten Endgerät (UserAgent) irgendwie dynamisch in das body-Element eintragen lassen?
LikeLike
Frag‘ mal nach! Modlook, Ideen-Forum, etc.
LikeLike
Kleine Anschlussfrage. Funktioniert denn der Code von Panos im Mobile Safari? Seine Demo findest du unter http://panosdemos.wordpress.com/2013/05/25/spoiler-content/
LikeLike
Nein, läuft auch nicht.
LikeLike
Und dann noch eine CSS-Animation hinzufügen. Das wäre der Hammer!
LikeLike
Ich versuche mal, mich in das Thema reinzulesen. Vielleicht geht ja irgendwas. 🙂
LikeLike
Ich mach das mit der Animation, wenn Du dich Sache mit dem ontouchstart hinbekommst. Deal? 😉
LikeLike
Ich bin gerade am einlesen. Vielleicht geht ja was mit transition und :focus. Das sollte dann vielleicht sogar ohne „ontouchstart“ funktionieren. Funktioniert im Mobile Safari z.B. das DropDown Menü bei http://www.pepe-juergens.de/demo/css3-transition-menu/ ?
LikeLike
Alles etwas merkwürdig. Ich kann das Menü ausklappen, aber nicht einklappen und auch nur, wenn ich *nicht* in die Seite hinein gezoomt habe.
LikeLike
So etwas wäre ein Traum, jetzt bitte für die Free for Life Besitzer 😉
Grüße, Gregor
LikeLike
Würde ich wirklich gerne. Leider ist so eine Umsetzung auf kostenlosen Blogs nicht so ohne weiteres möglich. Panos beschreibt zwar in seinem Beitrag die Möglichkeit, sich vorhandene CSS-Klassen im eigenen Theme zu Nutze zu machen, aber das wäre aufgrund der vielen unterschiedlichen Themes auf WordPress.com eine Sisyphusarbeit. Daraus lässt ich leider keine allgemein gültige Lösung für alle WordPress.com Benutzer ableiten.
LikeLike