Bereken document height na content load

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Danny von Gaal

Danny von Gaal

10/07/2018 16:47:27
Quote Anchor link
Hallo,

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
if($(window).scrollTop() + $(window).height() == $(document).height()) {
   // Load articles
}
 
PHP hulp

PHP hulp

17/10/2018 12:56:23
 
Rob Doemaarwat

Rob Doemaarwat

10/07/2018 18:39:20
Quote Anchor link
Kun je dit niet (her-) berekenen "nadat de content is geladen"?

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
 
Danny von Gaal

Danny von Gaal

11/07/2018 12:49:45
Quote Anchor link
Hallo Rob,

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)
PHP script in nieuw venster Selecteer het PHP script
1
$("div").on( 'scroll', function(){}
 
Rob Doemaarwat

Rob Doemaarwat

11/07/2018 13:09:37
Quote Anchor link
Ja, dus in die onscroll functie doe je steeds die hoogte check. Elke keer dat de gebruiker scrollt bepaalt die functie dan de actuele hoogte. Eventuele content die later wordt gelaten wordt dus bij de volgende onscroll vanzelf meegerekend.
 
Thomas van den Heuvel

Thomas van den Heuvel

11/07/2018 14:49:47
Quote Anchor link
Kwartiertje Googlen.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!--
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>
 
Danny von Gaal

Danny von Gaal

11/07/2018 15:58:56
Quote Anchor link
Hallo Thomas,

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.
 
Thomas van den Heuvel

Thomas van den Heuvel

11/07/2018 17:49:53
Quote Anchor link
Heb je vastgesteld dat de divs in kwestie wel afmetingen hebben (die ook veranderen?)? Als dat niet het geval is, verandert de documenthoogte mogelijk ook niet.

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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.