Quicknavigation sofort ausführen (select ohne Button)

[Andreas]

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

Gruß von Andreas

[olek07]

was meinst du unter nicht valide? Dein Validator meckert oder es funktioniert nicht? Schreib onchange klein, dann sollte der Validator zumindest nicht mehr meckern :-)

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

Gruß von Andreas

[Andreas]

Oh man, so einfach. Danke. Mein Validator sagte "deprecated" und mit den Infos auf w3.org tu ich mich immer sehr schwer, da hab ich auch nur was von "deprecated" gesehen. Funktioniert hatte es ja. Und jetzt hab ich das ganze Formular schon mit Button umgebaut

Sollte ich besser onclick nehmen? Funktioniert das mit onchange eigentlich auch, wenn JavaScript deaktiviert ist? Werd ich dann morgen testen, sonst muss ich ja sowieso einen Button anbieten. Oder den Button vielleicht in ein noscript-Element? Funktioniert das? Fragen, Fragen...

Danke nochmal, von Andreas

[simplex3]

Moin Andreas.

Sollte ich besser onclick nehmen? Funktioniert das mit onchange eigentlich auch, wenn JavaScript deaktiviert ist?

Nein.

...sonst muss ich ja sowieso einen Button anbieten.

Genau.

Oder den Button vielleicht in ein noscript-Element? Funktioniert das?

Ja.

Bis denne..

[mbartsch]

Hallo Andreas,

ich benötige ebenfalls eine Quicknavigation ohne Button. Kannst Du mir kurz erklären wo und wie du das Modul geändert hast? Vielen Dank im voraus für die Hilfe!

[Andreas]

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

[mbartsch]

Vielen Dank für die schnelle Hilfe! Ich habe die mod_quicknav.tpl entsprechend geändert.

[Andreas]

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

...
<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

[Andreas]

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

...
<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

[OneChance]

Hallo Andreas muss mich bei Dir für diesen Beitrag bedanken.
Genau das habe ich gesucht.

[Andreas]

Das freut mich

[andreasisaak]

Hallo Andreas,

wäre denn der Submit via Mootools/jQuery nicht ein viel besserer Ansatz?
Ich hab erst letzte Woche eine Website fürs iPhone optimiert und stand vor demselben Problem mit der Changelanguage Extension! Die iPhone User benötigen ja keinen Submit Button und da wollte ich es auch ohne realisieren.

Ich hab einfach die ID über dem Formelement eine Funktion zugewiesen:

$('#langform').change(function(){
			$('#langswitch form').attr('action', $(this).val()).submit();
			return false;
		});

Und via CSS habe ich den Submitbutton versteckt sobald der User kein Javascript hat. So kann ich das ganze für Changelanguage, FAQ's und Quicklinks verwenden. Das ist meiner Meinung nach etwas eleganter.

Oder was meinst du?

[Andreas]

Keine Ahnung, ich kenn mich mit JS nicht so aus. Ich finde meine Lösung ziemlich simpel und sehe in deiner Lösung momentan keinen Vorteil. Meine Lösung kann auch für alle anderen Selectmenüs benutzt werden. Funktioniert meine Lösung denn im iPod nicht? Generell versuche ich immer solche Scriptzeilen im HTML-Code zu vermeiden. Sind schon genug drin find ich.

[andreasisaak]

Ähm ne da hast du mich aber völlig falsch verstanden.
Meine Vorangehensweise bietet entscheidende Vorteile:

1. Ich brauch erst gar kein Template anzufassen da das ganze Verhalten über Unobtrusive JavaScript gesteuert wird - sollte eigentlich jeder Webdesigner verwenden wenn er JS einsetzt

2. Ich spare mir ein zusätzliches HTML Element

3. Mein JS kann ich einfach via Seitenlayout oder in einer ausgelagerten Javascript Datei steuern und innerhalb von Minuten zusätzlich zur FAQ-Listing noch das Quickmenü und das Changelanguage Modul ansprechen.

Jeder kann ja gerne das einsetzen was er für sich selbst entwickelt hat und meint das es ihm reicht, aber wenn du es wirklich korrekt machen willst ist Unobtrusive JavaScript das einzig wahre. So habe ich es gelernt und fahre eigentlich sehr gut damit :-) erspart mir viel Template Bastelei

[Andreas]

Dann mach doch mal ne genaue Anleitung, wie alle nicht so JS-versierten Webmaster deine Lösung in ihrem Contao umsetzen können.

[andreasisaak]

Nur nochmal ein Link zur Ergänzung. Deine Antwort hat mich grade etwas schockiert

http://ichwill.net/

[andreasisaak]

Ja das mache ich sehr sehr gerne :-) heute abend setze ich mich dann hin.
Ich antworte dann einfach in diesem Thread.

[MacKP]

Hallo jared,
dann mach das doch direkt ins Wiki -> http://de.contaowiki.org/Hauptseite

Da passt sowas super rein ;-)

Viele Grüße

[andreasisaak]

uff! Da muss ich mich wieder anmelden, weiß nicht genau in welche Kategorie es gehört und und und. Ich bin ja wirklich ein großer Freund von User-Generated Content und Social Media aber bei Wikis bin ich mehr Leser als Ersteller.

Ich versuch mein Glück aber trotzdem mal. Wenn ich scheitere, poste ich es hier im Forum und du übernimmst es einfach :-)

[MacKP]

Hallo jared,
ich hab auch nicht viel Ahnung von Wiki-kram.. geht aber doch irgendwie.

Aber für sowas hats extra ne Seite die einem Hilft -> http://de.contaowiki.org/Hilfe:Hilfe

Viele Grüße

[andreasisaak]

@andreas

http://de.contaowiki.org/Formulare_b...hange_absenden

Das ganze ist noch nicht fertig, etwas holprig an einigen Stellen und der Code ist erstmal nur für jQuery aber ich hoffe ich kann dir und denn anderen zumindest die Vorteile des ganzen vermitteln.

Morgen wird das ganze noch etwas überarbeitet und der Mootools Code folgt. Für reine Kopfarbeit ist es mittlerweile zu spät. Vielleicht kann ja jemand anderer solange Rechtschreibfehler korrigieren

LG

[andreasisaak]

Habe das ganze um den Mootools Code erweitert. Der ist noch nicht 100% optimal aber funktioniert und etwas einfacher als der jQuery Code da man nur am Anfang die ID oder die Klasse ändern muss.

Bei Fragen immer her damit :-)

[hitman]

Ah! Habe gerade meinen Fehler gefunden!

[andreasisaak]

Du hast auch den jQuery Code drin gehabt?!

[hitman]

Petze!
Trotzdem kurze Frage, kann man eigentlich den (Dropdown)-Pfeil mittels CSS stylen? Ich finde dazu nix?

[andreasisaak]

Du meinst du die Klickfläche auf der rechten Seite? Nein leider nicht soweit es mir bekannt ist. Zumindest nicht mit reinem CSS.

[hitman]

Okay, schade....

[Barbfish]

" deaktiviertem JS einen Button 'go' anbietet, um mit einem zweiten Klick die ausgewählte Seite aufzurufen ..."


---------------
Herzlichen Dank für den Beitrag - so was habe ich gesucht - aber - bei mir wird immer der Button los angezeigt - irgendwie blicke ich das nicht, oder liegt es daran, dass ich noch ein css für div class="noscript" anlegen muss? Lieben Dank für Hilfe!

[Andreas]

Evtl. NOSCRIPT nicht geschlossen. Hier noch eine einfache Möglichkeit ohne NOSCRIPT, einfach ans Ende des Templates setzen, oder das Javascript irgendwie anders für die Seite einbinden.

...
<script type="text/javascript">
/* <![CDATA[ */
window.addEvent('domready', function(){

  $$('.mod_quicknav .submit').setStyle('display', 'none');
  $$('.mod_quicknav select').set('onchange', 'submit()');

});
/* ]]> */
</script>

<!-- indexer::continue -->

[Barbfish]

Danke! Jetzt funktionierts - habe aber den Codefragment von 'noscript' dringelassen - falsch? (Noscript war übrigends geschlossen ???)

[Andreas]

Bei obigem Code brauchst du NOSCRIPTS nicht mehr. Achtung, ich habe noch das CDATA eingefügt.

[Barbfish]

Danke für den Hinweis - je weniger Code, umso besser.
Jetzt hast mich aber erwischt - wat is CDATA? (beim Nachschauen stelle ich fest, dass Contao das rausgeschmissen hat ;o) - ich arbeite über den CSS-Editor) ...

[Barbfish]

... Murphy oder ... auf meinem Testserver läuft nun alles - nun habe ich den selben Code auf dem Liveserver in mein tpl gepackt und nun funktioniert das mit der Anzeige der aktiven Seite nciht mehr, wenn die andere Navigation benutzt wird ... HÄ? Auf dem Testserver hat es funktioniert? Gibt es irgendeinen Cache, den ich leeren sollte?

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>

<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>

<form action="<?php echo $this->request; ?>" method="post">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="tl_quicknav" />
<label for="ctrl_target" class="invisible"><?php echo $this->targetPage; ?></label>
<select name="target" class="select" onchange="submit()"> 
  <option value=""><?php echo $this->title; ?></option>
<?php foreach ($this->items as $item): ?>
  <option <?php if($this->Environment->request == $item['href']): ?>selected="selected" <?php endif; ?>value="<?php echo $item['href']; ?>"><?php echo str_repeat(' &nbsp; ', $item['level']); ?><?php echo $item['link']; ?></option>
<?php endforeach; ?> 
</select>
<script type="text/javascript">
window.addEvent('domready', function(){

  $$('.mod_quicknav .submit').setStyle('display', 'none');
  $$('.mod_quicknav select').set('onchange', 'submit()');

});
</script>
<input type="submit" class="submit" value="<?php echo $this->button; ?>" />
</div>
</form>

</div>
<!-- indexer::continue -->

[magicsepp]

eventuell Systemwartung die 3 system/....

[sonja]

Liebe Leute!
Ich möchte auch die Quicknavigation (bzw. Quicklink) als alternative Navigation für die mobile Ansicht einer Seite verwenden. Dank dieses Threads ist es mir auch ohne JS-Kenntnisse gelungen, die Version ohne Submit-Button einzubauen. Einziger Haken: Der Zurück-Button des Browsers. Wenn ich den auf einem mobilen Gerät betätige (Android4), kommt ein "invalid request token". Im normalen Web-Browser funktionierts ohne Fehlermeldung. Irgendeine Idee?
Danke und LG
Sonja

[marcos]

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:

<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