#1

Hier ist der im Augenblick verwendete Code

in Spoiler (aufklappbares Textfeld) separat kreieren 04.03.2015 10:27
von j&b • 16 Beiträge

Ein Spoiler ist eine Textbox zum Auf- und Zuklappen, wenn man das + oder - Zeichen im Spoiler-Schalter (s.w.u.) anklickt.

Klickt man die Reiter 'Forum Übersicht' oder 'Zum Testen', sieht man die von mir codemäßig kreierten Spoiler (um die es mir aussehensmäßig geht).
Die beiden unteren Spoiler namens 'Spoiler' unter

Kategorie 'Testphase' / Forum 'Spoiler (aufklappbares Textfeld) Forum separat kreieren' / Thema "Hier ist der im Augenblick verwendete Code"

wurden programmintern über das 6. ICON über diesem Antwortfenster erstellt (um die ICONS sehen zu können, müssen Sie den Schalter 'antworten' klicken).


Man sieht durch Anklicken der verschiedenen Reiter, dass sich das Aussehen der Spoiler ändert. Das ist natürlich nicht beabsichtigt.

Mein Interesse gilt den von mir kreierten Spoilern im Bereich 'Kopf-&Fußzeilen'. Er kommt zum Tragen, wenn man die Spoiler ('Infos zum Forum') und 'Zum Testen' anklickt.Den Code dazu sehen Sie durch Anklicken der beiden (programmintern erzeugten) Spoiler (mit Namen 'Spoiler').

Ich habe das Forum so eingerichtet, dass beim Anklicken eines Reiters diesem Bereich die 'Kopf-&Fußzeilen' vorweg gehen.

Neben dem Bereich 'Kopf-&Fußzeilen' kann ich von mir zusätzlich eingerichtete Seiten wie z.B. 'Zum Testen' (als Administrator) ebenfalls eigene Spoiler zuweisen.
Leider beeinflussen sie sich gegenseitig in (Breite des Textfensters, Farbe und Bezeichnung des Spoilers).

Jeder Spoiler, der einem durchs Programm angeboten wird (siehe 6. ICON über dem Antwortfenster ( ) erhält das Aussehen des Spoilers, der im Bereich 'Kopf-&Fußzeilen' kreiert wurde.

Wenn Sie jetzt den Reiter 'Zum Testen' anlicken, sehen Sie wie der Spoiler aus dem vorgeschalteten Bereich 'Kopf-&Fußzeilen' ('Infos zum Forum') sein Aussehen ändert. Er erhält das Aussehen der Spoilern '>Infos 1' und 'Infos 2' aus dem Bereich 'Zum Testen'. Klicken Sie wieder den Reiter 'Forum Übersicht' an, erhält er wieder sein gewünschtes aussehen.

Das Problem liegt im Code des Spoilers. Der Spoiler ist nicht direkt ansprechbar, weil eine eindeutige ID oder ein eindeutiger Spoilernamen fehlt.

Der Spoiler-Code im Reiter 'Zum Testen' wiederum wirkt sich auf das Aussehen der Spoiler auf anderen Seiten aus. Der Text (mit Attributen) im Spoiler ist dagegen nicht berührt.

Wie kann man jedem Spoiler sein indivuelles Aussehen erhalten ?
- Der Schalter 'Infos zum Forum' soll immer gelb mit schwarzer Beschriftung sein und eine Textfensterbreite von 400 Pixel haben (gelbe Schriftfarbe gib's leider nicht),
- Die beiden Spoiler-Schalter in diesem Thema sollen rot mit weißer Beschriftung und eine Textfensterbreite von 70 Pixel haben (und nicht wie 1 Zeile höher beschrieben).
- Die Schalter 'Info 1' und Info 2' sollen nach Anklicken des Reiters 'zum Testen' blau mit lila Beschriftung und eine Textfensterbreite von 300 Pixel haben.
Das trifft nicht zu (die Spoilerinhalte dagegen werden richtig dargestellt).


Hier der Code im Reiter 'Kopf-&Fußzeilen' (Infos zum Forum):


Zitat

<!-- Soll NUR für diesen Spoiler gelten-->
<style>
.hpm_spoiler_headdiv, .hpm_spoiler_body {width: 70px;} /*Textfensterbreite*/
.hpm_spoiler_headdiv {background-color: red; border-radius: 5px 5px 0px 0px;} /*abgerundete Ecken*/
.hpm_spoiler_headinput {color: white !important;} /*Beschriftungsfarbe*/
</style>

<!-- 111111111111111111111111111111111111111111111111111111111 -->
<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"
title="Hint zum Öffnen des Anzeigefensters"
value="Infos 1">
</div>

<div>
<div class="hpm_spoiler_body">
<!-- Schriftfarbe - Textfensterhintergrund * Hier geht "/*...*/" nicht -->
<div style="color: blue; background-color: lime;">
<span>
Hallo<br>
<font color=red>Paul<font color=white> <b><u>und</u></b> <font color=blue>Gerda<br>
</span>
</div></div></div>
</div>
<br>







Und hier der Code im Reiter 'Zum Testen' ('Infos 1 + Infos 2'):

Zitat


<style>
.hpm_spoiler_headdiv, .hpm_spoiler_body {width: 300px;} /*Textfensterbreite*/
.hpm_spoiler_headdiv {background-color: blue;border-radius: 5px 5px 0px 0px;} /*abgerundete Ecken*/
.hpm_spoiler_headinput {color: fuchsia !important;} /*Beschriftungsfarbe*/
</style>


<!-- 111111111111111111111111111111111111111111111111111111111 -->
<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"
title="Hint zum Öffnen des Anzeigefensters"
value="Infos 2">
</div>

<div>
<div class="hpm_spoiler_body">
<!-- Schriftfarbe - Textfensterhintergrund * Hier geht "/*...*/" nicht -->
<div style="color: blue; background-color: yellow;">
<span>
Hallo<br>
<font color=blue>Paul<font color=lime> <b><u>und</u></b> <font color=red>Gerda<br>
</span>000
</div></div></div>
</div>
<br>

<!-- 222222222222222222222222222222222222222222222222222222222222222222222 -->
<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"
title="...click zum Öffnen des Anzeigefensters"
value="Infos 3">
</div>

<div>
<div class="hpm_spoiler_body">
<div style="color: yellow; background-color: red;">
<span>
Hallo Pauline
</span>
</div></div></div>
</div>
<br>





Wenn man jetzt den Reiter 'Zum Testen anlickt' sieht der 1. Spoiler ('Infos zum Forum') blau und nicht gelb aus (die beiden anderen Spoiler sollen blau sein).

zuletzt bearbeitet 05.03.2015 09:01 | nach oben springen


Besucher
0 Mitglieder und 1 Gast sind Online

Forum Statistiken
Das Forum hat 1 Thema und 2 Beiträge.