Klapptext Pop Up Problem

vikkiv schrieb am 24.07.2023 um 15:49 Uhr

Hallo, ich hab da einen Frage an die Experten und zwar, ich möchte gerne ein Klapptext auf der HP einfügen. An sich kein Problem. Man definiert eine Pop Up Ebene und weist dem - in meinem Fall ein Pluszeichen zum aufklappen - die jeweilige Pop Up Ebene zu. Was mich aber stört und ich habe keine Ahnung wie ich es lösen soll ist, dass man unter der Frage immer leeren Platz lassen muss damit der jeweilige Text dort sauber erscheinen kann.

Hier ist die HP wo ich zu Zeit dran bin.

http://hptest.magix.net/MW/alternative_onkologie.htm

Ich hätte es aber gerne, dass die Seite beim anklicken des Pluszeichens nach unten verschoben wird, wie zb. hier:

https://www.mein-menue.de/faq

So dass man die Texte bzw. Fragen gut einander positionieren kann anstatt wie bei mir alles mit großen Abständen zw. den Fragen zu versehen. Hat jemand eventuell eine Lösung dafür?

Danke

Kommentare

BilderMacher schrieb am 24.07.2023 um 16:34 Uhr

Ich hätte es aber gerne, dass die Seite beim anklicken des Pluszeichens nach unten verschoben wird, wie zb. hier:

Das ist mit den Mitteln des WD nicht ohne "Programmierung" von Scriptcode möglich. BeRo hatte da mal so etwas erklärt, mit Demo, etc.

 

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

vikkiv schrieb am 24.07.2023 um 16:36 Uhr

Wenn ich das Script hätte dann würde ich das schon hinkriegen. Hast du eventuell einen Link dazu? Die Suche ergab nichts.

BilderMacher schrieb am 24.07.2023 um 16:51 Uhr

Suche mal nach BeRo und dann musst du bei ihm die Kommentare durchgehen.

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
 

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

-----------------------------------------------------------------------------------

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

------------------------------------------------------------------------------------

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

Robbin schrieb am 24.07.2023 um 21:40 Uhr

@vikkiv

Wenn ich das Script hätte dann würde ich das schon hinkriegen

Unter dem Stichwort "Accordion" findest du im WWW zahlreiche Demos und Infos zu deinem Klapptext Problem.
Schau dir z. B. mal diese Seite an, da hat der Autor 6 verschiedene Beispiele angelegt, zu denen du auch den passenden Scriptcode herunterladen kannst...

Für den Einsatz im WD sind nur geringfügige Anpassungen nötig, damit das "Accordion" auch auf einer mobilen Variante funktioniert.
So kann der angepasste Scriptcode für die Desktop Variante aussehen:

<!-- die folgenden Zeilen in den HTML Head eines Platzhalters in der Desktop Variante speichern-->

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <style>
  #accordion-resizer {
    padding: 10px;
    width: 500px;
    height: 300px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
      heightStyle: "fill"
    });
   });
  </script>
  <!-- Ende des Head Bereichs-->
 
  <!-- die folgenden Zeilen in den HTML Body eines Platzhalters in der Desktop Variante speichern-->
    
    <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
    </div>
    <h3><b style="font-size: 11pt;">Section 3</b></h3>
    <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
      <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3><b style="font-size: 11pt;">Section 4</b></h3>
    <div>
      <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
  </div>
</div>
<!-- Ende des Body Bereichs-->

Und so sieht er für die mobile Variante aus:

<!-- die folgenden Zeilen in den HTML Head eines Platzhalters in der mobilen Variante speichern-->  

 <style>
  #accordion-resizer_m {
    padding: 10px;
    width: 350px;
    height: 600px;
  }
  </style>
  <script>
  $( function() {
    $( "#accordion_m" ).accordion({
      heightStyle: "fill"
    });
   });
  </script>
  <!-- Ende des Head Bereichs-->
 
  <!-- die folgenden Zeilen in den HTML Body eines Platzhalters in der mobilen Variante speichern-->
    
<div id="accordion-resizer_m" class="ui-widget-content">
  <div id="accordion_m">
    <h3><b style="font-size: 13pt;">Section 1</b></h3>
    <div>
      <p style="font-size: 13pt;">Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
    <h3><b style="font-size: 13pt;">Section 2</b></h3>
    <div>
      <p style="font-size: 13pt;">Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
    </div>
    <h3><b style="font-size: 13pt;">Section 3</b></h3>
    <div>
      <p style="font-size: 13pt;">Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
      <ul style="font-size: 13pt;">
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
      </ul>
    </div>
    <h3><b style="font-size: 13pt;">Section 4</b></h3>
    <div>
      <p style="font-size: 13pt;">Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p style="font-size: 13pt;">Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
    </div>
  </div>
</div>
<!-- Ende des Body Bereichs-->

Die o. a. Scriptcodes kannst du 1:1 mit copy & paste übernehmen und sie, wie im Scriptcode angemerkt, in die Head und Body Bereiche der Platzhalter in den Varianten übernehmen.
Die Übernahme des Scriptcodes für den HTML Head eines Platzhalters in der Desktop Variante kann so aussehen:

Auf der Website sieht das dann so aus (Desktop + Smartphone)

   

Probier's mal und wenn du noch Fragen hast, nur her damit 🙂

vikkiv schrieb am 25.07.2023 um 13:18 Uhr

Hey, vielen Dank für die Super Anleitung. Ich habe es eingefügt und angepasst. War etwas tricky aber letztendlich hat es gut geklappt. Interessant wäre es zu wissen wie man die blaue Farbe aus dem Balken oben weg kriegen kann bzw. in eine andere Farbe tauschen? Ein virtuelles Bier für dich geht auf mich. 🍻

Robbin schrieb am 25.07.2023 um 17:20 Uhr

@vikkiv

Interessant wäre es zu wissen wie man die blaue Farbe aus dem Balken oben weg kriegen kann

Das ist über einen kleinen Umweg einfach zu machen.
Die Steuerung des Accordion Widgets läuft hauptsächlich über extern liegende JScript und CSS Dateien. Das Aussehen der Balken wird u. a. über die CSS Datei "jquery-ui.css" gesteuert, die als Teil des JQuery User Interfaces angelegt wurde.
Öffne die Datei mal über diesen Link in deinem Browser und speichere sie anschließend als "jquery-ui.css" ab.

Die für die Änderung der Farbe des Balkens nötige Änderung kannst du in der Zeile 983 "background:" machen, indem du den aktuellen Hex Wert "#007fff" gegen einen beliebigen anderen Wert austauscht.

Speichere die geänderte Datei in das Verzeichnis "index_htm_files" deines exportierten- oder hochgeladenen Projekts. Besser ist aber die Speicherung im Hilfsverzeichnis deines Projekts. Der WD sorgt dann automatisch bei jedem Export/Upload dafür, dass die Datei in das Verzeichnis "index_htm_files" kopiert wird.

Im Scriptcode für den HTML Head des Platzhalters für das Accordion Widget musst du jetzt noch den Link zur CSS Datei "jquery-ui.css" ändern, andernfalls siehst du von deiner Änderung auf der Website nichts..

Lösch also den Link "<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">'" und setz den neuen Link " <link rel="stylesheet" href="index_htm_files/jquery-ui.css">" stattdessen ein

Noch Fragen? 🤓

vikkiv schrieb am 27.07.2023 um 08:23 Uhr

Klasse! Danke Dir. Eine letzte Frage noch. Wie kann ich den Code anpassen oder besser gesagt an welcher Stelle kann ich den Code so anpassen, dass die erste Zeile in geschlossenem Zustand bleibt anstatt immer geöffnet? Ich habe verschiedene Befehle ausprobiert, welcher m.M.n. dafür zuständig sind aber ohne Erfolg.

Robbin schrieb am 27.07.2023 um 21:46 Uhr

@vikkiv

an welcher Stelle kann ich den Code so anpassen, dass die erste Zeile in geschlossenem Zustand bleibt

the same procedure as last time 😗
Zumindest die gleiche Vorgehensweise, allerdings jetzt mit der JScript Steuerdatei "jquery-ui.js".

Öffne die Datei über diesen Link wieder mit deinem Browser und speichere sie als "jquery-ui.js" in einem geeigneten Verzeichnis auf deinem PC ab.

Öffne die gespeicherte Datei mit einem einfachen Texteditor wie "notepad++" o. ä. und ändere in der Variable "widgetsAccordion" in der Zeile 4366 den Wert "active" für den Parameter "options" vom Originalwert 0 (Null) in den leeren Wert "", dann bleiben alle Rubriken im Accordion geschlossen.

   

Speichere die geänderte Datei in das Verzeichnis "index_htm_files" deines exportierten- oder hochgeladenen Projekts. Besser, wie schon gesagt, ist die Speicherung im Hilfsverzeichnis deines Projekts, damit der WD automatisch bei jedem Export/Upload dafür sorgen kann, dass die Datei in das Verzeichnis "index_htm_files" kopiert wird.

Wie schon geübt, musst du auch jetzt wieder die Referenz für das Script im HTML Head des Platzhalters der Desktop Version ändern.
Lösch die originale URL und ersetz sie durch die Pfadangabe zum Verzeichnis "index_htm_files"

<script src="index_htm_files/jquery-ui.js"></script>

Das war's

vikkiv schrieb am 31.07.2023 um 11:41 Uhr

Sehr schön. Danke Dir nochmals. TOP!