Fragen und Antworten » Klickbare Textbox innerhalb eines Beitrages im Forum

Klickbare Textbox innerhalb eines Beitrages im Forum

07.07.2024 14:07

Kana
#1 Klickbare Textbox innerhalb eines Beitrages im Forum

Hallo ihr Lieben :)

ich habe eine Frage. Ich habe einen Code schreiben lassen, der da dieser hier wäre:

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
 
<div id="bestiarium-container">
    <style>
        #bestiarium-container {
            font-family: Lato, sans-serif;
            background-color: #474747;
            color: #d9d9d9;
            display: flex;
            justify-content: center;
            align-items: center;
          width:500px;
            height: 600px;
            margin: 0;
        }
        #bestiarium-container .container {
            width: 490px;
height:440px;
            border: 0px solid #ccc;
            margin-top: -100px;
          margin-left:30px;
          margin-right:30px;
            padding: 10px;
            background-color: #474747;
            color: #d9d9d9;
            line-height: 180%;
        }
        #bestiarium-container .btn {
            margin: 5px;
            padding: 10px;
            background-color: #666;
            color: #d9d9d9;
            border: none;
            cursor: pointer;
        }
        #bestiarium-container .btn:hover {
            background-color: #555;
        }
        #bestiarium-container .description-container {
            height: 300px; /* Höhe auf 300px geändert */
            overflow-y: auto;
            margin-top: 20px;
            font-size: 12px;
        }
        #bestiarium-container .description {
            display: none;
        }
        #bestiarium-container .description img {
            width: 100%;
            height: auto;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            function showDescription(id) {
                const descriptions = document.querySelectorAll('#bestiarium-container .description');
                descriptions.forEach(desc => desc.style.display = 'none');
                document.getElementById(id).style.display = 'block';
            }
 
            const buttons = document.querySelectorAll('#bestiarium-container .btn');
            buttons.forEach(button => {
                button.addEventListener('click', () => {
                    showDescription(button.getAttribute('data-target'));
                });
            });
        });
    </script>
    <div class="container">
        <h1>BESTIARIUM</h1>
        <button class="btn" data-target="wesen-1">Wesen 1</button>
        <button class="btn" data-target="wesen-2">Wesen 2</button>
        <button class="btn" data-target="wesen-3">Wesen 3</button>
        <button class="btn" data-target="wesen-4">Wesen 4</button>
        <button class="btn" data-target="ween-5">Wesen 5</button>
        <br><br>
        <div class="description-container">
            <div id="wesen-1" class="description">
                <h1>Wesen 1</h1>
                <p>TEXT TEXT TEXT</p>
                <br>
                <img src="https://iili.io/d3sckyG.png" alt="Wesen 1 Bild" border="0">
            </div>
            <div id="wesen-2" class="description">
                <h1>Wesen 2</h1>
                <p>TEXT TEXT TEXT</p>
                <img src="https://iili.io/d3sckyG.png" alt="Wesen 2 Bild" border="0">
            </div>
            <div id="wesen-3" class="description">
                <h1>Wesen 3</h1>
                <p>TEXT TEXT TEXT</p>
                <br>
                <img src="https://iili.io/d3sckyG.png" alt="Wesen 3 Bild" border="0">
            </div>
            <div id="wesen-4" class="description">
                <h1>Wesen 4</h1>
                <p>TEXT TEXT TEXT</p>
                <br>
                <img src="https://iili.io/d3sckyG.png" alt="Wesen 4 Bild" border="0">
            </div>
            <div id="wesen-5" class="description">
                <h1>Wesen 5</h1>
                <p>TEXT TEXT TEXT</p>
                <br>
                <img src="https://iili.io/d3sckyG.png" alt="Wesen 5 Bild" border="0">
            </div>
        </div>
    </div>
</div>
 

Das soll ein knickbarer Kasten sein, in dem verschiedene Informationen stehen und je nachdem auf welchen Button man klickt, ändert sich die untenstehende Information.

Gibt es irgendeine Möglichkeit, diesen Kasten in einen Forumsbeitrag zu packen, damit die Mitglieder sich da durchklicken können um die nötigen Informationen zu lesen? Ich hab das in einem anderen Forum schonmal gesehen und irgendwie haben dies hinbekommen, allerdings stoße ich hier an meine Grenzen leider.

Habt ihr Ideen, wie das gehen könnte? :)

Antworten

Beitrag melden

31.08.2024 11:47

SteffiXilef
#2 RE: Klickbare Textbox innerhalb eines Beitrages im Forum

SteffiXilef

Hey @Kana :) Ich hoffe der Beitrag ist noch nicht zu alt.

Ich schätze mal ganz stark das es nicht klappt weil JS in den Foren unterdrückt wird. Korrigiere mich jemand falls das nicht der Fall ist.
Ich hatte es bei mir versucht und es hat auch nicht geklappt. Man kann sowas aber auch nur mit HTML und CSS basteln.

Hier mal eine ganz simpler Ansatz:

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
 

<style>.tabs {
  display: flex;
  flex-direction: column;
}
 
.tabs .tab-labels {
  display: flex;
  gap:3px;
}
 
.tabs input[type="radio"] {
 display: none;
}
 
.tabs label {
  padding: 1em;
  background: #9AA092;
  cursor: pointer;
  width: 33.333%;
}
 
.tab-content {
  padding: 1em;
  display: none;
  background: DodgerBlue;
}
 
/* Show tab content when corresponding radio button is checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
  display: block;
}
</style>
<div class="tabs">
  <input type="radio" id="tab1" name="tabs" checked>
  <input type="radio" id="tab2" name="tabs">
  <input type="radio" id="tab3" name="tabs">
 
  <div class="tab-labels">
    <label for="tab1">Tab 1</label>
    <label for="tab2">Tab 2</label>
    <label for="tab3">Tab 3</label>
  </div>
  
  <div id="content1" class="tab-content">
    <h2>Tab 1</h2>
    <p>This is the content for Tab 1.</p>
  </div>
  
  <div id="content2" class="tab-content">
    <h2>Tab 2</h2>
    <p>This is the content for Tab 2.</p>
  </div>
  
  <div id="content3" class="tab-content">
    <h2>Tab 3</h2>
    <p>This is the content for Tab 3.</p>
  </div>
</div>
 
 

Sieht nicht mega schick aus aber das könnte man ja noch über das css ändern. Das wichtigste ist für das Forum ja das die "umschalte Funktion" mit HTML und CSS abgedeckt ist die bei deinem Code das Javascript übernimmt. Ich bin auch gerade dabei mir sowas zusammen zu basteln.
Zum testen von Code kann ich übrigen Code Pen empfehlen :)
Quelle: Stackoverflow

Antworten

Beitrag melden

01.09.2024 10:02

l2otbart_57
#3 RE: Klickbare Textbox innerhalb eines Beitrages im Forum

l2otbart_57

Beide Beispiele funktionieren und lassen sich so auf einer eigenen Seite ausführen https://test-v6.xobor.de/page-accordion.html

Die Arbeit besteht aus der Entwicklung einfacher verständlicher Forencodes, damit die Mitglieder das einsetzen können.

Schade, dass man die Forencodes nicht per Plugin installieren kann....

... würde es �Fussball spielen� heissen

vG Bernd‍

Antworten

Beitrag melden

01.09.2024 10:49

Lady of the light
#4 RE: Klickbare Textbox innerhalb eines Beitrages im Forum

Lady of the light

Zitat von l2otbart_57 im Beitrag #3
Schade, dass man die Forencodes nicht per Plugin installieren kann....

Das geht - zum Teil - durchaus. Schau mal auf https://www.friends-of-xobor.de/ dir die Anleitung für die Merkbox an. (Dort findet sich die Merkbox bzw. die Anleitung dafür unter "Werkstatt" → "Seminare" und ist direkt das erste.
Vielleicht kann die Grundanleitung für klickbare Infoboxen adaptiert werden.

****************************************************
Bitte nicht anchatten - der Chat ist bei mir ausgeblendet und ich sehe eure Nachrichten teilweise erst 20 Minuten später. Schreibt lieber eine PN.
Bitte außerdem nicht in Themen taggen, in denen ich eh aktiv bin. Ich habe alle Themen, an denen ich mitdiskutiere, aboniert und kriege mit, wenn ihr was schreibt. Danke!

Antworten

Beitrag melden

03.09.2024 22:53 (zuletzt bearbeitet: 03.09.2024 22:55)

l2otbart_57
#5 RE: Klickbare Textbox innerhalb eines Beitrages im Forum

l2otbart_57

bei FoX bin ich leider (als Gast) nicht fündig geworden.

denke, ich habe eine brauchbare Lösung gefunden. Die Installation ist mit einigem Aufwand verbunden, da ich auf ein plugin verzichtet habe.

mein Forencode für Hund, Katze, Maus sieht so aus

1
2
3
4
5
6
7
8
9
10
11
 
[ctb_box=tabs]
[ctb_box=tab-labels]
[ctb_menu=1]Hund[/ctb_menu]
[ctb_menu=2]Katze[/ctb_menu]
[ctb_menu=3]Maus[/ctb_menu]
[/ctb_box]
[ctb_cont=1|Hund] Text fuer ·Hund·  
[/ctb_cont][ctb_cont=2|Katze] Text fuer ·Katze·  
[/ctb_cont][ctb_cont=3|Maus] Text fuer ·Maus·  
[/ctb_cont][/ctb_box]
 
 

mehr https://test-v6.xobor.de/t295f27612-Klic...s-im-Forum.html

... würde es �Fussball spielen� heissen

vG Bernd‍

Antworten

Beitrag melden

10.10.2024 19:29

Kana
#6 RE: Klickbare Textbox innerhalb eines Beitrages im Forum

Kana

Ich glaube, mittlerweile können wir das als resolved ansehen :) Ich hab eine eigene Lösung gefunden. Danke für den Input der anderen Mitglieder! Super lieb :D

Antworten

Beitrag melden

Antworten