Sprung von Header zu Header

[Purdey]

Hallo ich habe folgende Struktur und möchte hier von H2 zu H2 springen.

<div id="boxeins">
 <div class="new">
  <h2>Überschrift 1</h2>
 </div>
</div>

<div id="boxzwei">
 <div class="new">
  <h2>Überschrift 2</h2>
 </div>
</div>

<div id="boxeins">
 <div class="new">
  <h2>Überschrift 3</h2>
 </div>
</div>

Navigation soll über die Tasten U (Keycode == 85) und J (Keycode == 74) erfolgen.

jQuery(function () {

  $(document).keydown(function (evt) {
    if (evt.keyCode == 74) { 
    	evt.preventDefault(); 
        scrollToNew(); 
    }

     if (evt.keyCode == 85) { 
        evt.preventDefault(); 
        scrollToLast(); 
    }
  });

});

Wie muss ich nun scrollToNew() und scrollToLast() füllen um immer nur zum nächsten h2 oder div zu springen und dann wieder zum nächsten und so weiter? Ich hoffe es ist verständlich?

 

[Jungspund]

Wenn du mit Javascript arbeitest, sollte das hier der Falsche Foren Bereich sein

aber das hier sollte funktionieren, nicht getestet:

$(document).bind('keypress', function(e) {
        var code = (e.keyCode ? e.keyCode : e.which);
            if(code == 74) { //Enter keycode
            //Do something
            }

});

ok Sorry habs jetzt erst richtig durchgelesen, was willst du mit dem "scrollen" bezwecken?

 

[Purdey]

oh misst, kann ich das umsetzen oder muss ich es neu einstellen.
Danke für den Code, ich möchte mittels dem Scrollen zwischen Beiträgen hin und her switchen wie bei google + mit j und k. der Beitrag soll dann immer an eine Positon x gescrollt werden unterhalb des fixed headers.

 

[slowfly]

Also du musst zuerst das Element finden, zu welchem du scrollen willst. Gleichzeitig musst du wissen, wo du im Moment bist.

Und wenn du das jQuery-Element hast, kannst du da drauf ".scroll()" aufrufen.

Also iiiirgendwie so

var hazweis = $("h2");
// wenn wir keine aktuelle Position haben, zum ersten scrollen
if(this.aktuellePosition == leer){
  hazweis[0].scroll();
  // dazu die aktuelle Position setzen.
  this.aktuellePosition = hazweis[0];
}else{
  // found == 0 bedeutet, aktuelle Position nicht gefunden, ansonsten gefunden
  var found = 0;

  // durch alle loopen
  for(var i = 0; i < hazweis.length && found == 0; i++){
    // wenn wir die aktuelle Position gefunden haben,...
    if(hazweis[i] == this.aktuellePosition){
      // zum nächsten Element scrollen
      hazweis[i+1].scroll();
      // aktuelle Position neu setzen
      this.aktuellePosition = hazweis[i+1];
      found = 1;
    }
  }
}

Ist natürlich alles ohne Überprüfung. Also wenn man beim letzten angekommen ist, muss man natürlich wieder zum ersten Scrollen, oder was es dann sein darf. Oder wenn es gar keine Einträge auf der Seite gibt, usw.

Aber das ist natürlich nur ein Weg von vielen und muss dazu sagen, dass mein JS/jQuery-Wissen wohl eher noch in den Kinderschuhen steckt ;P

Gruss
slowy

 

[Jungspund]

ok:
1.das dritte div hat die gleiche id wie das erste div
2.um es dir zu vereinfachen, solltest du alle div´s erst einmal mit einem anderen div umschließen,
welches folgende Attribute besitzt.

style="overflow:auto height:400px";

Die höhe spielt dabei nun aber keine Reihe, sondern legt nur die maximale größe deines Rahmens fest.

3.geb den untergeordneten Beiträgen fürs erste auch erst einmal ein feste maximalgröße, damit dein Rahmen auch etwas zum scrollen hat.

4.http://api.jquery.com/position/
5.http://demos.flesler.com/jquery/scrollTo/ guck dir mal das Plugin für JQuery an, könnte in deinem Fall extrem hilfreich sein

 

[Purdey]

ich habe natürlich noch ein div außen herum hatte das nur zur Vereinfachung mal weg gelassen Vereinfachung. Leider klappt das noch net so recht, es springt nicht von h2 zu h2 bisher