Bereken document height na content load
Ik heb een pagina met zoekresultaten waar er max 10 worden weergeven maar wanneer je onderaan de pagina bent moet de rest worden geladen. Alleen bij mij wordt de rest al geladen wanneer je net iets naar onder scrollt. Probleem is dat mijn document height het getal is van het document wanneer de rest nog niet is geladen.
Iemand een idee hoe ik de document height krijg nadat de content is geladen? Dus van een dynamic document? Ik heb al geprobeerd de document height te krijgen na $("div").on( 'scroll', function(){} maar dan krijg ik nog steeds de originele document height.
Ik gebruik JQuery
Dit is wat ik heb:
Code (php)
1
2
3
2
3
if($(window).scrollTop() + $(window).height() == $(document).height()) {
// Load articles
}
// Load articles
}
Of gewoon op elke onscroll opnieuw (evt. met een timeout, anders wordt het heel sluggish) (en met >= 0.7 * $(document).height() ipv ==, dan begint ie al als je bijna beneden bent - en staat al klaar als je echt beneden bent)
Gewijzigd op 10/07/2018 18:42:19 door Rob Doemaarwat
Hoe moet ik dat herberekenen volgens jou? Ik dacht dat ik dat kon doen na onderstaande code maar dat blijkt niet zo want ik krijg steeds dezelfde height terug. In JQuery kan je "on" gebruiken wanneer je nieuwe data hebt ingeladen waar de dom nog niets vanaf weet.
Code (php)
1
$("div").on( 'scroll', function(){}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!--
https://www.phphulp.nl/php/forum/topic/bereken-document-height-na-content-load/102287
https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom
https://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>infinite scroller</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; }
#main { margin: 0 25%; background-color: #ffcccc; min-height: 100%; padding-top: 50px; }
div.content { margin: 0 50px 50px; height: 250px; padding: 25px; background-color: #aaaaff; display: none; }
div.content h2 { margin: 0; }
</style>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 250) {
populate(5); // haal volgende 5 items op
}
});
function populate(items) {
// hier haal je de items op uit je database via een AJAX call naar een PHP-scriptje
// hierbij kun je $('#main').children().length als OFFSET gebruiken, en items als LIMIT
for (var i=0; i < items; i++) {
var $html = $('<div class="content"><h2>#'+$('#main').children().length+'</h2><\/div>');
$('#main').append($html);
$html.delay(i * 300).fadeIn('slow');
}
}
populate(10);
});
//]]>
</script>
</body>
</html>
https://www.phphulp.nl/php/forum/topic/bereken-document-height-na-content-load/102287
https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom
https://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>infinite scroller</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; font-family: sans-serif; }
#main { margin: 0 25%; background-color: #ffcccc; min-height: 100%; padding-top: 50px; }
div.content { margin: 0 50px 50px; height: 250px; padding: 25px; background-color: #aaaaff; display: none; }
div.content h2 { margin: 0; }
</style>
<script
src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 250) {
populate(5); // haal volgende 5 items op
}
});
function populate(items) {
// hier haal je de items op uit je database via een AJAX call naar een PHP-scriptje
// hierbij kun je $('#main').children().length als OFFSET gebruiken, en items als LIMIT
for (var i=0; i < items; i++) {
var $html = $('<div class="content"><h2>#'+$('#main').children().length+'</h2><\/div>');
$('#main').append($html);
$html.delay(i * 300).fadeIn('slow');
}
}
populate(10);
});
//]]>
</script>
</body>
</html>
Bedankt voor je reactie maar dat is dus exact wat ik zeg alleen heb je $("div").scroll vervangen door $(window).scroll. Maar beide werken niet voor mij omdat ik steeds de originele height van het document krijg ipv de nieuwe.
Misschien handig om erbij te zeggen dat ik het op mijn telefoon test dmv een app (phonegap). Misschien dat daar andere dingen voor nodig zijn.
Heb je ook gecontroleerd of de uiteindelijke HTML klopt?
En ik neem aan dat je die resultaten ook echt dynamisch toevoegt, waarna je dus opnieuw de (actuele) hoogte zult moeten inspecteren.
Heb je dit alles ook in afzondering getest als een soort van proof-of-concept zoals mijn voorbeeld? Probeer voor de gein die pagina eens op te roepen met de device waar het niet op werkt? Het lijkt mij zaak om eerst te localiseren waar het nu precies misgaat.
Gewijzigd op 11/07/2018 17:51:06 door Thomas van den Heuvel