Seite 2 von 4
#6 Spoiler mit gegenseitiger Auslösung! von Wolfgang 07.06.2017 02:42

avatar

Spoiler mit gegenseitiger Auslösung!



Manchmal ist es nötig, Spoiler einzusetzen, die untereinander in Abhängigkeit stehen!
Ab besten ist das hier im Online Radio zu sehen!
Das folgende, minimierte Script (Zeile 6) ist mit "jQuery" aufgebaut.
Die Div-Container werden über ID's gesteuert. Sie können an einer beliebiger Stelle eingebaut werden!
Es bleibt maximal immer nur ein Spoiler geöffnet!
Hier wird ein offener Spoiler geschlossen, sobald ein anderer geöffnet wird!
Zusätzlich veranlasst ein weiterer Klick auf den selben Spoiler, ein Schließen!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<!--Nur wenn JQuery nicht vorhanden ist, die kommentierenden Zeichen am Anfang und am Ende (Zeile 2) löschen-->
<!--<script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->

<script language="javascript" type="text/javascript">
function spoil2(id) {
$('.spoil_x').not( $('#' +id).toggle(400)).hide();
}
</script>
 
<style type="text/css">
#spoiler1,#spoiler2,#spoiler3,#spoiler4,#spoiler5 {
display:none;
width:500px;
margin:10px;
background-color:#eeeeee;
border:4px double #001153;
border-radius:15px;
box-shadow: -2px 4px 6px #ffffff;
z-index:700;
}
 
.spoiler_open {
height:100px;
padding:10px;
cursor:pointer;
}
</style>
 
<img class="spoiler_open" onclick="spoil2('spoiler1')" src="https://files.homepagemodules.de/b104774/f46t1197p2704n79_bwlOMeNV.png">

<div id="spoiler1">
<img class="spoiler_open" onclick="spoil2('spoiler2')" src="https://files.homepagemodules.de/b104774/f46t1197p2704n79_bwlOMeNV.png">
<img class="spoiler_open" onclick="spoil2('spoiler3')" src="https://files.homepagemodules.de/b104774/f46t1197p2704n79_bwlOMeNV.png">
<img class="spoiler_open" onClick="spoil2('spoiler4')" src="https://files.homepagemodules.de/b104774/f46t1197p2704n79_bwlOMeNV.png">
<img class="spoiler_open" onclick="spoil2('spoiler5')" src="https://files.homepagemodules.de/b104774/f46t1197p2704n79_bwlOMeNV.png">
</div>
 
<div id="spoiler2" class="spoil_x">
<a href="https://www.hilfe-tricks-tipps.de/forum.php"><img class="spoiler_open" src="https://files.homepagemodules.de/b104774/f46t1197p2704n73_hQSvHBWg.jpg"></a>
</div>
 
<div id="spoiler3" class="spoil_x">
<a href="https://www.hilfe-tricks-tipps.de/wiki:index"><img class="spoiler_open" src="https://files.homepagemodules.de/b104774/f46t1197p2704n81_zlSVAtTL.jpg"></a>
</div>
 
<div id="spoiler4" class="spoil_x">
<a href="https://www.hilfe-tricks-tipps.de/treetalk.php"><img class="spoiler_open" src="https://files.homepagemodules.de/b104774/f46t1197p2704n66_ZlmADvBa.png"></a>
</div>
 
<div id="spoiler5" class="spoil_x">
<a href="https://www.hilfe-tricks-tipps.de/blog.html"><img class="spoiler_open" src="https://files.homepagemodules.de/b104774/f46t1197p2704n71_pmvJZQCS.jpg"></a>
</div>
 





Das Spoiler-Script als Online Radio-Menü in Aktion: Online-Radio mit gegenseitiger Auslösung








Wolfgang

#7 Beiträge aktualisiert! von Wolfgang 12.07.2019 20:08

avatar

Beiträge aktualisiert!



Der "HPM / Xobor-Spoiler" ist echt super, hat aber so seine Eigenarten, wenn er nicht modifiziert wird!


  • Ist auch im Support-Forum zur Sprache gekommen: Lesezeichen setzen
  • Verbesserungsvorschlag im Support: Modifizierter Xobor-Spoiler







Bis dann und gutes Gelingen!

Wolfgang

#8 TAB-Spoiler in Forum-Beiträgen: Spoiler öffnen sich unabhängig voneinander -Teil 1 von Wolfgang 08.09.2021 10:24

avatar

TAB-Spoiler in Forum-Beiträgen: Spoiler öffnen sich unabhängig voneinander -Teil 1
Aktualisiert 21.09.21



Die Xobor-Spoiler lassen sich nicht wie in einem TAB-Menü nebeneinander aufstellen, sie können nur untereinander stehen!
Werden die Spoiler nebeneinander aufgestellt, muss man schauen, wo der Inhalt des geöffneten Spoilers bleibt.
Auch muss man sich die Frage stellen, ob nur ein Spoiler geöffnet sein darf und ob er sich selber wieder schließen kann!

Was kann der folgende Eintrag?
  • Im folgenden Skript besteht die Möglichkeit, die XOBOR-Spoiler nebeneinander aufzustellen.
  • Die Spoiler öffnen und schließen sich unabhängig voneinander!
  • Der Inhalt des Spoilers wird direkt unter dem geöffneten Spoiler angezeigt!
  • Der Xobor-Spoiler bekommt einen Schließen-Button und ein neues Design aus Beitrag #5


Bild im Tab-Spoiler: Halbleiter-Festplatte (SSD)

Bild im TAB-Spoiler

Bild im Tab-Spoiler: Hochleistungs-Thyristor

Spoiler mit einem Klick öffnen und schließen!


Installation für alle Templates











Anleitung - Wenn noch nicht installiert wurde:

  • Iconbar unter "Admin > Layout >Iconbar" öffnen
  • Reiter "Foren-Code" aufrufen und die folgenden Daten eingetragen (siehe Bild)
  • Speichern!


Ersetze:

1
2
3
 
[spoiler2=Thema]
...
[/spoiler2]
 



Mit:

1
2
3
 
<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="Spoiler"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;">
...
</div><div class="hpm_spoiler_closebutton"><a title="Spoiler schließen!" href="javascript:void(0);" onclick="hpm_spoiler(this.parentNode.parentNode.parentNode.parentNode);">Schließen</a></div></div></div></div>
 



Grafik:

1
 
https://img.homepagemodules.de/ds/static/gaia/spoiler_neu.png
 



Weitere Einstellungen:

  • Wird der Foren-Code nicht umgesetzt, kann es an der Reihenfolge liegen!
  • Hier den Wert "0" wählen und ausprobieren!






  • Für das neue Xobor Template (v6) wird die CSS in CSS / SCSS Addon kopiert

1
2
3
4
5
6
7
8
 
.hpm_spoiler  {
width:auto;
max-width:100%;
display:inline-block;
padding-top:10px;
margin-right: 10px;
outline:none;
}
 




  • Für die Templates (v1-4) wird die CSS in Eigener CSS Code kopiert!
  • Der Xobor-Spoiler bekommt ein neues Aussehen, mit Rändern, abgerundete Ecken, etwas mehr Farbe und die Code- und Pre-Tabellen werden in ihrer Breite maximiert!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/*Spoiler-Design*/
.hpm_spoiler {display:inline-block; width:auto; max-width:98%; margin-right: 10px;}
.hpm_spoiler, .hpm_spoiler_headinput {outline:none; color:#ffffff !important;}
 
.hpm_spoiler_body {width:auto; background-color:#f5f5f5; color:#000000; border-color:#383838; border-style:double; border-width:0 5px 5px 5px; border-radius:0 0 5px 5px; margin-left:5px; }
 
.hpm_spoiler_headdiv {background:#cccccc; border:2px solid #777777; border-radius:5px;}
.hpm_spoiler_headdiv input {position:relative; color:#383838 !important;}
.hpm_spoiler_headdiv:hover {background:#dddddd;}

.hpm_spoiler_closebutton {background-color:#cccccc; font:normal 11px Verdana,Arial,sans-serif; font-style:italic; border-top:1px solid #383838; padding:2px 10px;}
.hpm_spoiler_closebutton a {display:block; width:100%; text-decoration:none; color:#383838 !important; }
.hpm_spoiler_closebutton:hover {background-color:#dddddd;}
 
pre {width:auto; max-width: 65vw; min-width:10vw;}
.codelines {background-color:#aaaaaa; color:#ffffff; float:left !important;}
.bbcode_code {color:#eeeeee;}
.code {display:inline-block; max-width:90%;}
.code pre {background-color:#fdfdfd; color:#000000; width:auto !important;}
pre code {background:transparent !important; padding:inherit !important; font-weight:bold; font-size:14px; overflow-x:auto;max-width:100vw;}
 




Spoiler mit einem Klick öffnen und schließen!





Bis dann und gutes Gelingen
Wolfgang

#9 TAB - Menü: TAB's lösen sich gegenseitig aus -Teil 2 von Wolfgang 21.09.2021 11:33

avatar

Veränderbares TAB-Menü für Foren-Beiträgen - Teil 2
Aktualisiert 24.10.21



Möchte man ein richtiges TAB-Menü in den Beiträgen nutzen, geht das mit dem folgenden Beitrag!
Es spart Platz und sorgt für eine gute Übersicht bei großen und vielfältigen Beiträgen!

Was kann das Skript:
  • Die TAB's lösen sich gegenseitig aus, das heist, es bleibt immer nur ein TAB geöffnet!
    Der Inhalt des geöffneten Box steht der ganzen Seite voll zur Verfügung!
  • Die Tab's können auch zweireihig geschrieben werden!
  • Das Tab-Menü hat noch zusätzlich einen Schließen-Button für lange Inhalte und scrollt immer in Lesehöhe zurück!
  • Angepasstes Design fürs Xobor (v6)!
  • Einfache Kaskadierung. Es wird keine Nummerierung der TAB's und Inhaltsboxen benötigt!
  • Die Forencodes können zur besseren Übersicht mit beliebigen Zeilenumbrüchen gesetzt werden, ohne das sie das Layout verändern!
  • Es können von einander unabhängig, mehrere TAB-Menü's auf einer Seite eingerichtet werden.
  • Neu! Ein Verschachtelungen des letzten TAB ist jetzt möglich!
  • Das TAB-Menü ist so aufgebaut, dass es keine ID's zur Kennung der Inhaltsboxen benötigt!
    Der erste TAB öffnet die erste Box, der zweite TAB öffnet die zweite Box, ...





Installation für alle Templates


Das TAB-Menü in Aktion:

   HTML

   Neue Foren-Codes

   CSS

   JavaScript

   Bilder















Hilfreiche Links aus dem Forum:


Hilfreiche Links zu anderen Webseiten:
  • Tabulator nur mit JavaScript: Auf w3schools.com
  • Vielseitiger Tabulator mit jQueryUI: Auf jqueryui.com






Bis dann, gutes Gelingen und auch hier besten Dank an Creator
Wolfgang

#10 Vielseitiges TAB-Menü - Nur mit CSS -Teil 3 von Wolfgang 22.09.2021 21:00

avatar

Vielseitiges TAB-Menü - Nur mit CSS -Teil 3



Ein TAB-Menü nur mit CSS (Cascading Style Sheets) aufbaut ist an Schnelligkeit kaum zu überbieten. Wird die Seiten neu geladen oder gewechselt, wird das TAB-Menü sofort angezeigt.
Einfach Klasse!
TAB-Menüs mit JavaScript-Bibliotheken wie jQuery oder jQueryUI lassen da auf sich warten!

CSS TAB-Menüs haben allerdings auch so ihre Nachteile!
Sie sind ungeeignet für Text- und Formatwechsel von außen, also ungeeignet für neue Foren-Codes.
Auch weiterführende Texte und Bilder müssen auf das CSS Tab-Menü abgestimmt werden!
Braucht man allerdings ein kleines TAB-Menü, das mit einer festen Position und festen Texten mit nahzu gleicher Länge auskommt, ist man hier bestens bedient!

Gut für den direkten und festen Einbau in Portal-Boxen, V6-Boxen oder in Webseiten!






Installation für alle Templates


Was kann das CSS TAB-Menü:
  • Die Tab's lösen sich gegenseitig aus, es bleibt nur 1 TAB geöffnet!
  • Wahlweise können beim Start alle TAB's geschlossen oder eins geöffnet sein!
  • Der Boxinhalt wird animiert eingeblendet!
  • Das TAB-Menü hat einen Schließen-Button!
  • Überschriften mit Farbverlauf!
  • Mouseover-Effekte!



  • Zum Testen kann die gesamte CSS und die DIV-Boxen für die Template (v1-4) in die Kopf- oder Fußzeile und fürs neue XOBOR (v6) am besten in Eigene Kopfzeile kopiert werden!
  • In Zeile 55-65 kann der Farbverlauf der Überschriften angepasst werden!
  • Zeile 52, 66-69 ist für die animierte Einblendung zuständig!
  • Zeile 11 ist für die Hintergrundfarbe der TAB's zuständig
  • In Zeile 32 wird die Hover-Farbe der Tab's eingestellt!
  • In Zeile 36+49 ist der Text-Hintergrund und die Hintergrundfarbe des geöffneten TAB zu finden!
  • Soll beim Start der erste TAB geöffnet sein, wird in Zeile 88 nur "checked" eingetragen!
  • Wichtig! In Zeile 71-76 befinden sich die Einstellungen für Höhe Abstand und Breite des TAB-Menüs!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<style>
.tabs .tab {;
display:inline-block;
list-style-type: none;
overflow: hidden;
}
.tabs .tab .radioClass{
visibility:hidden;
}
.tabs .tab label, .tabs .tab div label {
background: #d9d8ce;
color: #383838;
font-weight:bold;
padding: 5px 10px;
display: block;
margin:0px 3px 1px 0;
border:1px solid #aaaaaa;
border-radius:5px;
position: relative;
left:0px;
cursor: pointer;
}
.tabs .tab div label {
max-width:80px;
font-size:13px;
font-weight:normal;
padding: 1px 10px;
text-align:center;
left:0px;
}
.tabs .tab label:hover{
background-color:#eeeeee;
}
.tabs .content {
width: 80%;
background: #ffffff;
color: #383838;
padding:5px 10px 10px 15px;
margin: 0;
border-radius:5px;
border:1px solid #aaaaaa;
box-shadow: 0.1rem 0.1rem 6px rgba(0, 0, 0, 0.4);
display:none;
position: absolute;
left:0%;
z-index:1000;
}
.tabs > .tab .radioClass:checked + label {
background: #ffffff;
}
.tabs > .tab .radioClass:checked ~ .content {
animation: einblenden 1.5s;
display:block;
}
.verlauf {
background: linear-gradient(#eae9dc,#d9d8ce,#eae9dc);
font-weight:bold;
padding: 5px 20px 5px 5px;
margin:10px 10px 0 0;
}
.verlauf::before {
content: "\25A0";
padding-right: 4px;
vertical-align: 2px;
}
@keyframes einblenden {
from { opacity:0; }
to { opacity:1; }
}
.tabs {
/* Höhe TAB-Menü */
height:250px;
/* Abstand vom linken Rand */
left:5%;
/* Breite des TAB-Menüs */
width:50%;
 
margin:0px 10px 10px 10px;
position:relative;
text-align:left;
}
</style>
 
<center>
<div class="tabs">
 
<div class="tab">
<input class="radioClass" type="radio" cchecked name="tabs" id="tab1">
<label for="tab1">Impressum</label>
<div class="content">
<div class="verlauf">Impressum & Kontakt</div><br>
<h4>Verantwortlicher Betreiber der Webseite</h4>
<p>Gründer von "Hilfe-Tricks-Tipps" und Inhaber der Domaint .......</p>

<br><input class="radioClass" type="radio" name="tabs" id="tab">
<label for="tab">Schließen</label>
</div>
</div>

<div class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab2">
<label for="tab2">Datenschutz</label>
<div class="content">
<div class="verlauf">Datenschutz & Nutzungshinweise></div><br>
<h4>Allgemeine Hinweise</h4>
<p>Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert .......</p>

<br><input class="radioClass" type="radio" name="tabs" id="tab">
<label for="tab">Schließen</label>
</div>
</div>
 
<div class="tab">
<input class="radioClass" type="radio" name="tabs" id="tab3">
<label for="tab3">Mitglieder</label>
<div class="content">
<div class="verlauf">Mitglieder des Forums</div><br>
<h4>Mitgliederliste</h4>
<p>Eine Liste aller Mitglieder des Forums mit Online-Status .......</p>

<br><input class="radioClass" type="radio" name="tabs" id="tab">
<label for="tab">Schließen</label>
</div>
</div>

</div>
 

Spoiler mit einem Klick öffnen und schließen!


Hilfreiche Links auf anderen Webseiten:
CSS-Menü auf der Seite von "OnAirCode": Tab-Menü mit CSS
CSS-Menü auf der Seite von "Mediaevent.de": So erstellen Sie Tab-Menüs mit CSS





Bis dann

Wolfgang

Xobor Forum Software von Xobor