HTML und CSS lernen?

Kickstart für eine Quick-Navigation

Im Forum tauchte die Frage auf (Link zum Thread), wie man einen per Quicklink erstellten "Lesetipp" auch ohne einen Klick auf dem Submit-Button "Los" aufrufen kann. 

Ich bin kein JavaScript-Guru und es geht bestimmt eleganter, aber ich habe folgende Anleitungen gefunden, die ich beim Schreiben des Buches mal an einen Testleserin geschickt hatte. 

Teil 1: "OnChange: Kickstart für die Dropdownlisten"

Damit eine Auswahl sofort ausgeführt wird und nicht erst mit einem Klick auf die Schaltfläche "Los" bestätigt werden muss, kann man im Template eine JavaScript-Anweisung ergänzen:

  • Im Backend-Modul "Templates" ein neues Template auf der Basis von mod_quicklink.tpl (oder mod_quicknav.tpl) erstellen und speichern.
  • Das Template zur Bearbeitung im Editor öffnen (zweites Symbol von rechts).
  • Die Zeile mit dem HTML-Element select suchen und folgende Zeile ergänzen (sollte in einer Zeile stehen): 
    <select name="target" id="ctrl_target" class="select" onchange='this.form.submit()'>
  • Das Template speichern.

Wenn man jetzt in einer Quicklink-Navi eine Seite aus der Auswahlliste anklicken, springt man nach dem Anklicken direkt dorthin.

Teil 2: "LOS-Button ausblenden" (Update)

Meistens kommt dann gleich hinterher die Frage, ob man den LOS-Button ausblenden kann, wenn JavaScript aktiviert ist. Kann man. Dazu gibt es zwei Möglichkeiten, eine einfache und eine komplizierte. Die komplizierte blendet den Button per JS aus und ist von mir, die einfache arbeitet mit dem Element <noscript> (siehe Kommentar unten).

Die simple Lösung mit <noscript> zuerst:

  • Im BE-Modul "Templates" das Template aus Teil 1 im Editor öffnen.
  • Den Submit-Button mit <noscript> umzingeln: 
    <noscript><input type="submit" ... /></noscript>
  • Template speichern 
  • Fertig. 

Das funktioniert wunderbar, und vielen Dank an Jonas für den Hinweis im Kommentar weiter unten. 

Und jetzt, der Vollständigkeit halber, noch die komplizierte Lösung per JavaScript, die ich mir ausgedacht hatte:  

  • Im BE-Modul "Templates" das Template aus Teil 1 im Editor öffnen.
  • Eine ID an den Submit-Button geben, z. B. so
    <input type="submit" class="submit" id="wechdamit" value="<?php echo $this->button; ?>" />
  • Im BE-Modul "Seitenlayout" das Seitenlayout für die betreffende(n) Seite(n) öffnen. 
  • Im Feld "Eigener JavaScript-Code" folgendes JavaScript eintragen, dass das Element mit der eben vergebenen ID ausblendet: 
    <script type="text/javascript">
    <!-- 
    var buttonwech = document.getElementById('wechdamit');
    buttonwech.style.display = "none";
    --></script>

Wenn alles glatt geht, ist bei JavaScript an => Button wech und bei JavaScript aus => Button da. Frag mich nicht, ob das elegant oder gutes JavaScript ist, aber es funktioniert. Ich habe es gerade auf little-boxes.de eingebaut. 

Kommentar zum Beitrag?

Kommentar von Jonas | 01.08.2011

Hallo,
man kann sich das JavaScript sparen, in dem man den Submit-Button einfach in einen <noscript>-Bereich legt. Siehe auch im Forum: Quicklink - Auswahl direkt ausführen
Liebe Grüsse
Jonas

Kommentar von Peter | 01.08.2011

Ich fand es schon pfiffig, den Button via JS auszublenden, damit er ohne wieder da ist, aber die Idee mit <noscript> ist echt besser. Funktioniert wunderbar.

Zurück