[FRAGE] Infinite Scroll mit nur einem template ?

pr0bot

New member
Hallo,

Ich bin noch ziemlich unerfahren mit JavaScript und JQuery und greife deshalb auf das Plug-in "Infinite-Scroll" zurück.
Das Plug-in lädt Inhalte dynamisch nach, wenn der User ans Ende der Seite gelangt. Jedoch lädt es nur Inhalte von externen templates nach und bietet nicht die Möglichkeit z.B. weitere div-tags innerhalb des templates mit anzuhängen.

Wie müsste man das Plug-in verändern damit dies möglich wird ?

Hier das Plug-in: https://github.com/paulirish/infinite-scroll

Mein Beispiel-Code das 2 weitere templates mit dem gleichen Inhalt nachlädt:

HTML:
<!document html>
<html>
	<head>
		<title>Infinite-Scroll-Test</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="jquery.infinitescroll.js"></script>
		<script type="text/javascript" src="manual-trigger.js"></script>
	</head>
	
	<body>
		<div id="content">
			
			<p>Lieber Entdecker dieses Textes. Diese Zeilen erzählen von einem einschneidenden Erlebnis in unserem bzw. meinem Leben. Die ganze Geschichte spielt auf La Palma, wo wir, das sind Catrin und ich, unseren Jahresurlaub verbracht haben.
				</p>
			<p>Bestens vorbereitet, durch einen Marco Polo Reiseführer, die Ausschreibung des Freizeitveranstalters und nicht zu vergessen, die 248 Bilder auf CD – Rom, von Dr. G., der kurze Zeit vor uns auf La Palma gewesen ist und immer wieder ...
				</p>
			<p>Uns konnte nichts mehr aufhalten. Nach den 2 noch zu arbeitenden Tagen, an denen mir sowieso alles am M. gluteus vorbeiging, und dem gnädigerweise gewährten freien Tag vor der Abreise, gings dann am  1. März  vom Flughafen Stuttgart aus ...
				</p>
			<p>Nachdem dann diese Bedenken aus dem Weg geräumt waren und wir uns schon ausmalten, welche tollen Wanderungen wir unternehmen würden, kam erst mal die Ernüchterung, daß von der Reiseleitung her keine größeren Wanderungen vorgesehen ...
				</p>
			<p>Doch wie Ihr sicher wißt kommt alles anders und sowieso als man denkt und plant. Dies passierte in der Form, daß das Wetter am Samstag vor der Wanderung beschloß garstig zu werden und der Atlantik tobte und fing an mächtig Wellen zu schlagen...
				</p>
			<p>Jetzt gab´s kein Halten mehr und nach einer heißen Dusche vielen wir in den Speisesaal ein wie die Heuschrecken und aßen alles auf was uns in die Quere kam und versuchten unsere Enttäuschung über das miese Wetter durch den Genuß von Rotwein...
				</p>
			<p>Die Antwort ließ nicht lange auf sich warten. Alles begann mit einem harmlosen Gluckern in meinem Colon descendens am Dienstagmorgen nach dem Frühstück. Ich freute mich noch darüber, daß meine Darmtätigkeit trotz des Umgebungswechsels ...
				</p>
	
		</div>
		
		<a id="next" href="index2.html">next page?</a>
		
<script type="text/javascript">
$(document).ready(function(){
	$('#content').infinitescroll({
		navSelector: "#next:last",
		nextSelector: "#next:last",
		itemSelector: "#content",
		debug: false,
		dataType: 'html',
    maxPage: 6,
		path: function(index) {
			return "index" + index + ".html";
		}
		// appendCallback	: false, // USE FOR PREPENDING
    }, function(newElements, data, url){
      // used for prepending data
    	// $(newElements).css('background-color','#ffef00');
    	// $(this).prepend(newElements);
    });
});
</script>
		
	</body>
</html>

Gruß,
pr0bot
 
Kannst du mal einen Testlink machen, wo wir uns das live ansehen können. Zusammen mit einer genaueren Erklärung, was du gerne hättest. Bei mir ist das nicht so ganz angekommen...
 
Übrigens ist
Code:
<!document html>
<html>
Quatsch. Korrekt ist es der <!DOCTYPE html>.
 
Hallo,

zwei Beispiele:

Infinite Scroll mit einem oder mehr content-templates:

Infinite Scroll Testing


Endless Scroll mit nur einem content-template:

jQuery ScrollPagination


Beim ersten Beispiel wir bei jedem nachladen das nächste Template geladen.
Beim zweiten Beispiel wird immer wieder der selbe Inhalt aus einem Template geladen.

Ich benutze nun das Plug-in aus dem zweiten Beispiel und habe für jeden Inhalte ein eigenes <div>. Ich übergebe dem Template noch eine Variable die sich beim nachladen um eins erhöht und entscheide so, welcher Inhalt aus dem Template nachgeladen wird.


HTML:
<div>

	<script type="text/javascript">
	
		var currentSize = 0;
		$(function(){
			$('#content').scrollPagination({
				'contentPage': '${LINK_wissenstapete}', // the url you are fetching the results
				'contentData': {'abc':$('#content').children().size()}, // these are the variables you can pass to the request, for example: children().size() to know which page you are
				'scrollTarget': $(window), // who gonna scroll? in this example, the full window
				'heightOffset': 0.01, // it gonna request when scroll is 10 pixels before the page ends
				'beforeLoad': function(){ // before load function, you can display a preloader div
					var currentSize = $('#content').children().size();
					console.log("beforeload " + currentSize);
				},
				'afterLoad': function(elementsLoaded){ // after loading content, you can use this function to animate your new elements
					 var i = 0;
					 currentSize = $('#content').children().size();
					 //console.log('1 ' + $('#content').scrollPagination().scrollPagination.defaults.contentPage + '&contentID=' + currentSize)
					 //$('#content').scrollPagination().scrollPagination.defaults.contentData ={'contentID':currentSize};
					 
					 console.log("afterload " + currentSize;
					 if ($('#content').children().size() > 100){ // if more than 100 results already loaded, then stop pagination (only for testing)
						$('#content').stopScrollPagination();
					 }
				}
			});
			
		});

	</script>
	
	<div id="content">
    	<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

</div>
    	 
    </div>
    <div class="loading" id="loading">Wait a moment... it's loading!</div>
    <div class="loading" id="nomoreresults">Sorry, no more results for your pagination demo.</div>
</div>



Demo-Content:
HTML:
<%LSIF VAR1="${contentID}" OP="==" VAR2="1"%>
	<div> 
	--${contentID}--
		1 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
	</div>
<%/LSIF%>
<%LSIF VAR1="${contentID}" OP="==" VAR2="2"%>
	<div> 
	--${contentID}--
		2 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
	</div>
<%/LSIF%>
<%LSIF VAR1="${contentID}" OP="==" VAR2="3"%>
	<div> 
	--${contentID}--
		3 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
	</div>
<%/LSIF%>
<%LSIF VAR1="${contentID}" OP="==" VAR2="4"%>
	<div> 
	--${contentID}--
		4 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
	</div>
<%/LSIF%>
<%LSIF VAR1="${contentID}" OP="==" VAR2="5"%>
	<div> 
	--${contentID}--
		5 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
	</div>
<%/LSIF%>
<%LSIF VAR1="${contentID}" OP="==" VAR2="6"%>
	<div> 
	--${contentID}--
		6 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
	</div>
<%/LSIF%>


Funktioniert ganz gut.

Gruß,
pr0bot
 
Zurück
Oben