Eeuwig ladende content

[bn2vs]

Hey,

Ik wil een webpagina met "scrollviewer" maken die een aantal items toont. Nu wil ik dat als je naar beneden scrolt, er nieuwe items worden bijgeladen, zodat je nooit het einde bereikt, zoals je bij Google Reader hebt.

Mijn pagina word met PHP gegenereerd en de date uit een MySQL db geplukt. Voor de functionaliteit die ik wil is er duidelijk ook een hoop JS en AJAX nodig.

Ik ben op zoek naar een library/script/whatev dat het mogelijk maakt makkelijk een dergelijke "eeuwig ladende scrollviewer" te maken, zonder al die JS en AJAX te moeten schrijven. Kent iemand zo iets?

Cheers!
Jeroen De Dauw

 

[Tha Devil]

Zo moeilijk is het niet, helemaal wanneer je bijvoorbeeld jQuery gebruikt.

Kwestie van een PHP-script waarin je aangeeft hoeveel resultaten je al hebt en hoeveel je er terug wilt hebben.

Daarnaast een JS functie welke de hoogte berekend van je pagina en wanneer je een bepaalde scrollhoogte hebt gepasseerd.

Voorbeeldje:
[js]
Tab.prototype.scroll = function(event) {

var tab = event.data[0];
var documentHeight = $(document).height();
var resultsHeight = 0;

$("#galleries .result").each(function() {
resultsHeight += $(this).height();
});

var galleriesScrollTop = $("#galleries").scrollTop();
var result = ( ( galleriesScrollTop / 2 ) + ( 0.01 * Math.pow(documentHeight, 2) ) ) / resultsHeight;
var threshold = ( result <= 0.60 ) ? result : 0.60;
//$("#resultCount").html(galleriesScrollTop +' / '+ resultsHeight +' >= '+ (galleriesScrollTop / resultsHeight) +' ('+threshold+')');
if( ( galleriesScrollTop / resultsHeight ) >= threshold )
{
tab.loadAjax();
}
}
[/js]
Verder nog een functie die een AJAX-call maakt naar de PHP-pagina met als POST of GET-waardes het huidige aantal geladen items + het aantal nieuwe items.
[js]
Tab.prototype.loadAjax = function() {
var t = this;

this.isLoading = true;

$("#galleries").append($("<div />").attr("id","loading"));

var adult = t.filterList.list[0].active == 'true' ? t.filterList.list[0].value[1] : t.filterList.list[0].value[0];
$.getJSON('xml.php?query=' + t.term + '&number=' + t.currentPage + '&adult='+ adult, function(json) {

t.totalPages = json.totalPages;
t.results.push(json);
t.isLoading = false;

$("#loading").remove();

if(t.isActive()) {
t.display();
}
});
}
[/js]

Uiteraard in JS bijhouden hoeveel items er geladen zijn

Voorbeeld code komt uit een project waaraan ik vorige schoolperiode heb gewerkt, complete zaakje kun je hier vinden: http://klanten.eswarrior.com/kalooga/

 

[bn2vs]

Hey,

Dat ziet er redelijk simpel uit ja Tijd dat ik eens deftig jQuery leer.

Thanks voor de awesome code, en je project ziet er echt nice uit :thumb:

Cheers!
Jeroen De Dauw

 

[bn2vs]

Hey,

Zou ik enkele delen van jouw code (de scroll related stuff) en de social networking icons van jouw project mogen gebruiken voor een open source project?

Cheers!
Jeroen De Dauw

 

[Tha Devil]

Geen probleem, zolang er een kleine vermelding in de source komt

 

[bn2vs]

Nice Als wie vermeld ik je? "Tha Devil"?

 

[Tha Devil]

"Tha Devil - www.helpmij.nl"

Zoiets, zolang de username + helpmij.nl vermeld is vind ik het prima