Übergabe von Parametern in Adresszeile und zum Anker scrollen

S

standby83

Grünschnabel
Hallo,

ich habe ein Problem mit dem Scrollen zu einem bestimmten Anker mittels jQuery. Aber vorweg die aktuelle Situation:

Mit einem Klick auf einen Buchstaben (A - Z) erhält der Nutzer sämtliche Artikel aus der Datenbank, die mit dem Buchstaben beginnen. Ich übergebe den Buchstaben in der URL als Parameter und verarbeite ihn in php mit einer mysql-datenbank weiter.

HTML: 
<a href="<?php echo $_SERVER['SCRIPT_NAME'] . "?action=search_by_letter&amp;letter=a#ergebnis_direkt" ?>" class="letter">A</a>

Die Ergebnisse werden angezeigt. Funktioniert super.

Allerding wird der Anker
PHP: 
echo "<h4 id=\"ergebnis_direkt\">" . $number_of_results . " Suchergebnisse:</h4>";
nicht vernüftig angesprungen wird. Ich komme immer zum Seitenende und nicht zur Überschrift.

Meine Idee war nun mit jQuery zu arbeiten, indem ich überprüfe, ob der Buchstabe geklickt wurde und wenn ja, dass er dann mittels des ScrollTo-Plugins zur entsprechenden Stelle scrollt. Das geht aber nur solange gut, wie die Funktion false zurück gibt.

Code: 
function scrollingTo(){
	$('.letter').click(function(){
		$('body').scrollTo('#ergebnis_direkt', 800 );
		return false;
	});
}


Dann aber wird der Buchstabe nicht als Parameter in der Adresszeile übergeben. Natürlich und logischer Weise, da der Verweis aus href sammt Parametern und Hashwert nicht ausgeführt wird, sondern "nur" die Javascript-Anweisung.

Hat jemand eine Idee, wie ich zum Anker scrollen kann und trotzdem die Parameter übergeben kann?

Herzlichen Dank im Voraus
 
Wie sieht denn der "fertige" HTML Code der Seite aus.

Ist der Link - der den Anker enthält - korrekt geschrieben und ist der Anker selbst auch richtig?
 
Wenn ich den Quelltext aus dem Browser copy and paste und dann lokal teste, wird der Anker vernünftig angesprungen. Ankername und Referenz sind richtig.

Vielleicht noch mal zur Verdeutlichung. Das Szenario ohne ScrollTo:
Klick auf 'a' -> Sprung ans Ende der Seite
Per Hand nach oben zurück scrollen
Klick erneut auf 'a' -> Sprung zur richtigen Stelle

Ebenso wird die richtige Stelle ausgewählt, wenn ich die Adresse mit dem Ankernamen (also:
http://localhost/.../datei.php?action=search_by_letter&letter=a#ergebnis_direkt) direkt in die Adresszeile eingebe.

Wie gesagt, die Alternative ein ScrollTo zu benutzen funktioniert auch, wenn die Funktion false zurück gibt. Aber aber dann bekomme ich die Parameter in der Adresszeile nicht mit übergeben und ich weiß jetzt auch nicht, wie ich meinem Programm ansonsten mitteilen soll, dass der Nutzer die Ergebnisse mit beispielsweise beginnenden 'a' haben möchte.

EDIT:
Vielleicht als Info, die reine HTML-Lösung ohne ScrollTo funktioniert unter Mac OS X und Windows im IE 7, Chrome 18, Safari 5.1.5 und Opera 10.10. Der FF 11.0 macht mir einen Strich durch die Rechnung. Niedrige Versionen konnte ich noch nicht testen.
 
Zuletzt bearbeitet:
Zeig uns trotzdem nochmal bitte a) den Quellcode womit der Link und der Anker gebildet wird und b) den entsprechenden HTML Code der beiden Stellen.

Ist die Seite nur lokal bei dir auf dem Rechner oder kann man sie sich irgendwo im Netzt schon anschauen?

datei.php?action=search_by_letter&letter=a#ergebnis_direkt
Zum Vergrößern anklicken....

Muss da zwischen dem Buchstaben "a" und "#ergenbnis_direkt" nicht noch ein "&" als Trennzeichen dazwischen?
 
a) Die beiden Stellen sind oben.
b) Mach ich

Und ja, das Projekt ist derzeit nur lokal auf meinem Computer. Ich werd schauen, dass ich es schnell irgendwo hochladen kann.

tombe hat gesagt.:
Muss da zwischen dem Buchstaben "a" und "#ergenbnis_direkt" nicht noch ein "&" als Trennzeichen dazwischen?
Zum Vergrößern anklicken....
Nicht das ich wüsste, das '&' Trennt doch nur die Parameter voneinander und das Hash wird ohne Parameter auch nur direkt an den Dateinamen angehangen? á la datei.htm#sprungmarke
 
Ok, mit dem Trennzeichen gebe ich dir recht, aber das hier:

PHP: 
echo "<h4 id=\"ergebnis_direkt\">" . $number_of_results . " Suchergebnisse:</h4>";

ist doch kein Anker den du über einen Link ansprechen kannst.

Das müsste dann doch für den Buchstaben "A" in etwa so aussehen:

HTML: 
<h4><a name="a">Das ist die Sprungmarke für den Buchstaben A</a></h4>
 
tombe hat gesagt.:
PHP: 
echo "<h4 id=\"ergebnis_direkt\">" . $number_of_results . " Suchergebnisse:</h4>";

ist doch kein Anker den du über einen Link ansprechen kannst.

Das müsste dann doch für den Buchstaben "A" in etwa so aussehen:

HTML: 
<h4><a name="a">Das ist die Sprungmarke für den Buchstaben A</a></h4>
Zum Vergrößern anklicken....

Danke für den Tipp. Aber leider ist das noch nicht des Rätsels Lösung und ich glaube, jetzt rollen einige mit den Augen oder es gibt gleich was auf den Deckel. :-(
Ich mag die Referenz von Selfhtml aber sie ist ganz und gar nicht mehr uptodate. Ich erstelle das Projekt in html5 und da ist laut w3c name kein zulässiges Attribut für das a-tag. Gleiches gilt für h1-h6.

Nun könnte ich alles auf HTML4 oder XHTML umstellen und zwischen dem <h4> ein <a> einbauen, aber der Effekt ist leider der Selbe.

Unter html4 wird auch hier ans Ende gesprungen.
HTML: 
echo "<h4><a name=\"ergebnis_direkt\">" . $number_of_results . " Suchergebnisse:</a></h4>";


Und auch unter html5 wird hier wieder ans Ende gesprungen.
HTML: 
echo "<h4 id=\"ergebnis_direkt\">" . $number_of_results . " Suchergebnisse:</h4>";
echo "<h4><a id=\"ergebnis_direkt\">" . $number_of_results . " Suchergebnisse:</a></h4>";

Ich scheine aber das Problem erkannt zu haben. Muss noch was testen und dann poste ich es hier.
 
Ich bin gerade dabei die Dateien für den Server vorzubereiten und schmeiße alle vermeintlich "unwichtigen" Sachen raus. Da klappt es auf einmal. Ohne Murren und ohne weitere Probleme wird der Anker angesprungen und auch das ScrollTo funktioniert in den meisten Browsern trotz auskommentiertem return false in dem JavaScript siehe oben.

Was ist passiert?
Auf der Seite biete ich den Nutzer an direkt (A-Z) oder detailliert (nach bestimmten Eigenschaften) zu suchen. Indem er auf einen Tab klickt, wird der entsprechende Content per JavaScript-Funktion displayBox(link_id, box_display, box_hide) eingeblendet und der andere ausgeblendet.

Tabs:
HTML: 
<div id="subnavi">
    <ul>
        <li class="current"><a href="javascript:displayBox('#detailsuche_link', '#detailsuche', '.contentbox');" id="detailsuche_link"><span>Detaillierte Suche</span></a></li>
        <li><a href="javascript:displayBox('#direktsuche_link', '#direktsuche', '.contentbox');" id="direktsuche_link"><span>Direkte Suche</span></a></li>
    </ul>
</div>

Content:
HTML: 
<div class="contentbox" id="detailsuche">Formular und Suchergebnisse der Detailsuche</div>
<div class="contentbox" id="direktsuche">A-Z-Links und Suchergebnisse der Direktsuche</div>

JavaScript zum Ein- und Ausblenden:
Code: 
function displayBox(link_id, box_display, box_hide){
	
	// hide and display elements
	$(box_hide).hide();
	$(box_display).show();
	
	// mark all links as default and then add to the current link the class for display as current link
	$(link_id).parent().parent().children().removeClass('current');
	$(link_id).parent().addClass('current');
	
}

Bei einem Klick auf einen Buchstaben sprint er einfach zu weit, wenn ich den Inhalt der Detailsuche ausblende. Wenn der Inhalt nicht existiert passiert das nicht und auch nicht, wenn der Inhalt existiert aber angezeigt wird....

Hat jemand Interesse einen Blick in die Dateien zu werfen, dann lade ich es hoch ansonsten, bin ich für jeden weiteren Tipp, wie ich besser mit dem Verstecken des "nicht-sehen-wollen-Inhalts" umgehen soll, sehr dankbar.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück