✔ Problem mit jquery.scrollTo (bzw. ich bin einfach zu doof)

[tekilla209]

Hallo Leute,

Ich hab folgendes Problem, ich möchte auf meiner Seite die unterseiten per AJAX in ein Div laden. Und dann seitlich ins Bild scrollen lassen.
Hier mal eben mein code (bzw der relevante Teil):

...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="themes/xxx/js/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="themes/xxx/js/pageScroll_init.js"></script>
...
<div id="pageSlider">
     <ul class="elements" style="height:950px; width:2460px;">
          <li id="left-pane">&nbsp;</li>
     </ul>
</div>

Und die javascript-Funktion die ich aufrufe:

function loadNewPage(url) {
	J('#pageSlider .elements').append("<li id='right-pane'>a</li>"); //legt ein neues li an (funktioniert)
	J('#right-pane').load(url); //läd den Content per AJAX (funktioniert)
	J('#page-slider').scrollTo( J('#right-pane'), 1000); //soll zum rechten li rüberscrollen (funktioniert NICHT)
	setTimeout(function() { //warten bis fertiggescrollt
		J('#left-pane').remove(); // das alte li löschen
		J('#right-pane').attr("id", "left-pane"); // das neue li "zum alten machen"
	},1001);
}

warum ich li's benutze und keine div's?
-Weil es mit div's bei serialScroll immer nicht funktioniert hat.

Mein problem ist, dass scrollTo garnichts tut keine Fehlermeldung ect. einfach NICHTS

Hier noch etwas CSS:

#pageSlider {
	width: 2460px;
	/*overflow: hidden;*/
	float: left;
}
#pageSlider #left-pane {
	float: left;
	/*width: 1230px;*/
	height: 950px;
	background: #67443C url('../images/bg_navigation.jpg');
}
#pageSlider #right-pane {
	float: left;
	width: 1230px;
	height: 950px;
}
		#pageSlider li{
			height: 950px;
			float:left;
			margin:0;
			cursor:pointer;
		}

 

[CPoly]

"#page-slider" oder "#pageSlider", du solltest dich für eins entscheiden ;-)

 

[tekilla209]

Herzlichen Dank erstmal. Das ist mal wieder einer dieser typischen kleinen Tippfehler, die mit Stundenlang beschäftigen können
Mein Problem ist nur, dass jetzt mit überall 'pageSlider' bzw'#pageSlider' steht trozdem nichts passiert.
Ausserdem hab ich den Teil in setTimeout in die Callback funktion gepackt

function loadNewPage(url) {
	J('#pageSlider .elements').append("<li id='right-pane'>a</li>");
	J('#right-pane').load(url);
	J('#pageSlider .elements').scrollTo( J('#right-pane'), 500, {onafter:function() {
		J('#left-pane').remove();
		J('#right-pane').attr("id", "left-pane");
	}});
}

Edit: fehler im css! $('#pageSlider') war so breit, dass es nicht scrollen muss.
Jetzt gehtz, aber die onafter funktion wird nicht aufgerufen.

Edit2: onafter muss ja auch onAfter heißen...
auf jedenfall geht mittleiweile alles Danke nochmal.
Thread kann geschlossen werden.

 

[CPoly]

Funktioniert bei mir einwandfrei http://jsfiddle.net/SAkNz/