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 |

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

Antwort von Peter Müller

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.

Kommentar von Katharina |

Hat mir gerade extremst geholfen, vielen Dank! :)

Antwort von Peter Müller

Freut mich, dass es Ihnen geholfen hat ;-)

Kommentar von Dominik Bach |

Habt Ihr dafür auch ein „Anschauungsbeispiel“ online?

Ich würde mal gerne sehen, wie das in echt aussieht …

Danke
DOM

Antwort von Peter Müller

Klick einfach oben links auf "Zur Beispielsite" (entweder hier oder ganz oben links im Header auf dieser Seite). Auf der Startseite sind rechts die "Lesetipps". Mit JavaScript ist kein Submit-Button, ohne JavaScript erscheint er. 

Kommentar von soweit_ok |

Danke für den netten Tipp. Na klar, es mit "onchange" versuchen, darauf käme man auch relativ schnell selber, hat so aber etwas Zeit gespart.

Kommentar von Michael |

Hallo,

das mit dem "onchange" war ein guter Hinweis. Danke.

Aber gestattet mir die Frage, warum gleich zwei Mal so kompliziert mit dem LOS-Button. Ich will ihn ja LOS werden Zwinkernd

Und wenn ich doch schon das Template bearbeite, kann ich auch gleich die Befehlszeille für den Button komplett löschen: <input type="submit" class="submit" value="<?php echo $this->button; ?>">

Bei mir hat das auf jeden Fall gut funktioniert.

Viele Grüße
Michael

Antwort von Peter Müller

Ich will den Button nur LOS werden, wenn JavaScript eingeschaltet ist. Für alle anderen Besucher soll er bleiben: JavaScript an => Button wech. JavaScript aus => Button da.

They call it progressive enhancement.

Zurück