Suche: Ergebnisse per #Anker anspringen?

[Stefko]

Hallo zusammen,

sorry erstmal für die Überschrift, mir fiel gerade nix gescheites ein, dass folgendes Problem prägnant beschreiben würde ;-)

Ich habe auf einer (recht langen) Seite relativ in der Mitte ein Suchfeld (Modul Suchmaschine). Die Ergebnisse sollen nach erfolgter Suche direkt darunter ausgegeben werden, es gibt also keine Weiterleitungsseite.
Soweit funktioniert das auch, allerdings lädt die Seite nach drücken des Such-Buttons ja neu und so befindet man sich am Seitenanfang und muss zu den Suchergebnissen herunter scrollen, was nicht besonders dolle ist ;-)
Jemand eine Idee, wie ich direkt die Ergebnisse anspringen könnte, also wie mit einem HTML-Anker?

Danke schonmal,
Stefko

[VGT]

ich weiß nicht ob es Dir weiterhilft, aber sowas ähnliches habe ich mit Textelementen bei feststehenden überdeckenden Header (fixed header)
deshalb suche mal bei google nach "offset anchor" oder "anker offset"; das sind css-Lösungen;
ich habe dem Inhaltselement eine CSS-ID gegeben und man landet dann nicht oben am Seitenanfang sondern pixelgenau wo man will auf der Seite

[Andreas]

Du könntest mit JS dorthin scrollen. Wenn du den Suchbutton gedrückt hast, hast du ja wahrscheinlich bestimmte Merkmale auf der Seite, welche du ohne Klick auf den Suchbutton nicht hast. Z.B. ?keywords= in der URL, oder Inhalte in dem Suchergebnissbereich.

Als Ansatz (MooTools)

if($$('div.mod_search > p.header')) 

[Stefko]

@VGT: Danke für den Tipp. Ich habe das mal ausprobiert, aber leider hilft das in meinem Fall nicht wirklich weiter, da a) die Seite responsive ist (der Abstand "nach oben" also abhängig vom Ausgabegerät) und b) die Inhalte im Bereich vor meiner Suche recht dynamisch sind und sich häufig ändern - und damit auch die Summe der Höhen bis zur Suche.
Aber ich habe mir mal ne Notiz gemacht, wenn ich das nächste mal das Problem mit den überdeckenden Header habe ;-)

@Andreas: an JavaScript hatte ich auch schon gedacht und ja nach der Suche ist natürlich ein ?keywords=Suchwort in der URL. Bin mir aber nicht sicher, wie ich das bewerkstelligen kann, bzw. was Dein Codeschnippsel damit zu tun hat?

Grüße,
Stefko

[Stefko]

Problem gelöst

Oberhalb des Suchfeldes habe ich ein Inhaltselement "Überschrift". Dieser habe ich id="ergebnisse" verpasst.
Dann habe ich das template mod_search_simple.html5 angepasst und zwar dem Button folgendes hinzugefügt:

onclick="window.location.hash = 'ergebnisse';"

und so funktioniert das nun wie gewünscht.

Grüße
Stefko

[Andreas]

@Andreas: an JavaScript hatte ich auch schon gedacht und ja nach der Suche ist natürlich ein ?keywords=Suchwort in der URL. Bin mir aber nicht sicher, wie ich das bewerkstelligen kann, bzw. was Dein Codeschnippsel damit zu tun hat?

Wenn du die Suche ausführst, besitzt das Element div.mod_search ein P-Element mit der Klasse ".header", welches ohne Suchanfrage nicht existiert. D.h. es war so gedacht, dass wenn du auf die Seite kommst, dass JS nach diesem Element sucht und (nur) wenn es dieses findet dorthin scrollt. Das müsste auch ohne Templateänderungen gehen, solchen Inline-JS-Code macht man auch eigentlich nicht mehr. Du kannst den Elementen aus deinen Scripts heraus Eventhandler zuweisen.

[Jens Pielawa]

Oberhalb des Suchfeldes habe ich ein Inhaltselement "Überschrift". Dieser habe ich id="ergebnisse" verpasst.
Dann habe ich das template mod_search_simple.html5 angepasst und zwar dem Button folgendes hinzugefügt:

onclick="window.location.hash = 'ergebnisse';"

und so funktioniert das nun wie gewünscht.

Hallo Stefko,
ich habe dasselbe Problem, aber die von Dir offenbar gefundene Lösung funktioniert bei mir leider nicht.
http://www.neu.bd-beratung.de/impressum.htm
Auf dieser Baustelle habe ich auch ein Suchfeld inmitten der Seite. Beim Klick auf den Button mit einem Suchbegriff scheint es so, dass kurzzeitig der Fokus dahingesetzt wird, jedoch die Ergebnisse danach hinzugefügt werden und man wieder oben auf der Seite steht und zum Scrollen verdammt ist.
Wie sieht denn das bei Deiner Seite aus?

[ihkwdiopk]

Du springst zur Sprungstelle, wenn Du auf den Btn drückst. Aber danach wird erst die Suche durchgeführt; d.h. die Seite wird mit den Suchergebnisse geladen.
Somit solltes Du das JS z.B. bei "onload" anpassen, dass wenn es den Suchquery gibt, er dann zur Sprungstelle springen soll.

[Stefko]

Hi Jens,

ich habe eben mal nachgeschaut und ich hatte die erste Zeile der [mod_search_simple.html5] folgendermaßen abgeändert:

<form onsubmit="window.location.hash = 'ergebnisse';"<?php if ($this->action): ?> action="<?php echo $this->action; ?>"<?php endif; ?> method="get">

Also nicht wie ich oben schrieb onClick beim Button, sondern onSubmit für das komplette Formular.

Versuche es mal damit.

Grüße,
Stefko

[Jens Pielawa]

ich hatte die erste Zeile der [mod_search_simple.html5] folgendermaßen abgeändert

Hallo Stefko,

das habe ich ausprobiert (aktuell aktiv), aber das Verhalten hat sich dadurch nicht geändert. Beim Button-Klick kriegt er kurzzeitig das Sprungziel-Fokus, geht dann aber wieder auf den Anfang der Seite.

[ihkwdiopk]

Probiere er folgendes (jQuery-Variante):

<script>
$(document).ready(function() {
	if($('div.mod_search > p.header').length) {
		window.location.hash = 'ergebnisse'
	} 
});
</script>

Das kannst Du zu Deiner [mod_search_simple.html5] packen.
Wie Andreas schon sagte, ist das jedoch unschön; deshalb würde ich vorschlagen, es im Seitenlayout unter "Eigener JavaScript-Code" zu setzen.

Zur Erklärung des Skripts:
Wenn die Seite geladen ist, prüfe ob es das Element 'div.mod_search > p.header' gibt (in jQuery kann man dies über die Länge prüfen). Falls es das Element gibt, füge der URL den Hash 'ergebnisse' hinzu. Das Resultat ist, dass falls es ein Element auf der Seite gibt, dessen Id entsprechend 'ergebnisse' ist - springe dorthin.

[Jens Pielawa]

Probiere er folgendes (jQuery-Variante):
Wenn die Seite geladen ist, prüfe ob es das Element 'div.mod_search > p.header' gibt (in jQuery kann man dies über die Länge prüfen). Falls es das Element gibt, füge der URL den Hash 'ergebnisse' hinzu. Das Resultat ist, dass falls es ein Element auf der Seite gibt, dessen Id entsprechend 'ergebnisse' ist - springe dorthin.

Und genau das hat jetzt den gewünschten Effekt gebracht. Vielen Dank für dieses kleine Schräubchen.