Quicknavigation sofort ausführen (select ohne Button)
Hallo zusammen,
gibt es vielleicht einen "XHTML Strict"-validen Workaround, um z.B. in einer Quicknavigation auf den "Los-Button" verzichten zu können? Die Ziele sollen also nach Auswahl sofort angesprungen werden.
Ich habe z.B. die FAQ-Liste als Select-Menü aufgebaut und öffne die Antwort sofort bei Auswahl auf der gleichen Seite unter dem Select-Menü - alles in der Hauptspalte. Im Moment mach ich das noch mit dem Attribut onChange="". War mir vorher gar nicht aufgefallen, dass das ja nicht valide ist. Hatte mich immer schon gewundert, warum auf so vielen Seiten immer noch so ein Absendebutton daneben ist. Tja, wenn man so selten mit den Dingern arbeitet :o
Gruß von Andreas
Liste der Anhänge anzeigen (Anzahl: 1)
Hi,
ich geb dir mal meine mod_faqlist.tpl. Vielleicht hilft dir das weiter. Ich hab aber noch keinen Button im NOSCRIPT-Element. D. h., wenn JS deaktiiviert, keine Funktion.
Andreas
Post ist nicht mehr aktuell, das sich der Fehler im FF nicht mehr reproduzieren lässt
Ich modifiziere gerade mod_qucklink.tpl um mit 'onchange' das Ereignis sofort abzufeuern und stehe vor einem großen Problem. Firefox 3.6 reagiert auf 'onchange' obwohl Javascript deaktiviert ist. Er feuert das Ereignis zwar nicht ab, verhindert aber, dass die Auswahl eines Menüpunktes stehen bleibt, so dass ich den Button 'go' nicht benutzen kann.
Mein erster Lösungsversuch bestand nun darin, das Attribut 'onchange' mit JS dynamisch zu erzeugen. Das bringt mir jetzt wiederum Probleme mit IE<=7, da diese Browser das dynamisch erzeugte Attribut zwar erkennen und anzeigen, aber nicht darauf reagieren. Im Netz habe ich einige Lösungen für dieses bekannte Problem gefunden, aus denen ich im Moment noch nicht richtig schlau werde.
Hat vielleicht jemand so ein Select-Menü, welches mit JS sofort reagiert, ohne den Button zu klicken, bereits erfolgreich umgesetzt, so dass es in allen Browsern mit und ohne JS (ohne JS durch Klick auf Button 'go') funktioniert?
Hier die betrreffenden wesentlichen Teile aus mod_quicklink.tpl
PHP-Code:
...
<select id="autoquick" name="target" class="select">
...
<?php foreach ($this->items as $item): ?>
<option value="<?php echo $item['href']; ?>"><?php echo $item['link']; ?></option>
<?php endforeach; ?>
...
<noscript>
<div class="noscript">
<input type="submit" class="submit" value="<?php echo $this->button; ?>" />
</div>
</noscript>
...
<script type="text/javascript">
var attribut = document.createAttribute("onchange");
attribut.nodeValue = "window.location.href = this.value";
var element = document.getElementById("autoquick");
element.setAttributeNode(attribut);
</script>
...
Fügt man onchange="window.location.href = this.value" direkt ins SELECT-Element ein, ohne es dynamisch zu erzeugen, funktioniert es in den Browsern, aber wie gesagt, der FF 3.6 sperrt sich bei deaktiviertem JS gegen die Möglichkeit, dann mit dem Button zu agieren.
Gruß, Andreas
Lösung für automatisches Select-Menü mit Javascript
Ich habe die alte Lösung komplett überarbeitet, da sich der Effekt im FF 3.6, wie im Post davor beschrieben, nicht mehr reproduzieren lässt.
Hier nun die Lösung für ein Select-Menü, welches mittels Javascript sofort bei Auswahl eines Menüpunktes die Seite aufruft und bei deaktiviertem JS einen Button 'go' anbietet, um mit einem zweiten Klick die ausgewählte Seite aufzurufen. Am Beispiel für das Modul 'Quicklink'. Ist leicht zu portieren ins Modul 'Quicknavigation' oder andere eigene Select-Menüs. Das zusätzliche DIV ist erforderlich für validen Code.
mod_quicklink.tpl
PHP-Code:
...
<select name="target" class="select" onchange="submit()">
...
<noscript>
<div class="noscript">
<input type="submit" class="submit" value="<?php echo $this->button; ?>" />
</div>
</noscript>
...
Erfolgreich getestet mit Firefox 3.6 , IE 8, 7, 6, 5.5, Opera und Safari.
Have fun, Andreas
Zusatzfunktion für externe Links via Quicknavigation
Hallo zusammen
Ich setzte jeweils auch JS mit der onChange-Funktion gemäss Wiki ein. Kürzlich war aber die Anforderung aufgetaucht, dass Links zu externen Webseiten auch auf Mobile in einem neuen Fenster geöffnet werden sollen (was ja auch Sinn macht).
Ich habe den Code darum folgendermassen erweitert:
HTML-Code:
<script>
$(document).ready(function(){
$('.mod_quicknav').change(function(){
if($('.mod_quicknav option:selected').hasClass('blank'))
window.open($('.mod_quicknav option:selected').val());
else
$('.mod_quicknav form').attr('action', $(this).val()).submit();
return false;
});
});
</script>
Erklärung: wenn die Seite bzw. der Link die Klasse 'blank' besitzt, wird die Seite direkt in einem neuen Fenster aufgerufen. Ansonsten wird normal das Quicknavigation-Formular ausgeführt.
Voraussetzung dafür ist aber eine kleine Anpassung des Tempaltes mod_quicknav.html5. Dort muss entsprechend die Klasse (Spalte cssClass) aus der Datenbank ausgelsen und bei <option> hinzugefügt werden. Es kann natürlich auch die Spalte type aus der DB gelesen werden. Wenn type = redirect Klasse 'blank' hinzufügen. Das wäre für den Redaktor die einfachere und schönere Lösung. Ich habe es jedoch mit den Klassen gelöst, da ich diese anderweitig auch noch benötige. Aber es ist ja jedem selbst überlassen, wie er es umsetzen möchte :)
LG
Marco
