New page auto load when scrolling down - Page 6

Page 6 of 6 « 1 2 3 4 5 6
Forum moderator: bigblog

New page auto load when scrolling down

Posts: 189

Reputation: 3

Message # 76 | 8:30 PM 2017-01-30

Quote Soldierdevil (

)

VZ, sorry was off. Please accept payments i am getting errors. The last code you provided does not seem to work in the blog module. If at all i would make it work for the blog and site news plus video...actually all modules. That would be great.

Blog Module

Code

<div id="conter">$BODY$</div>
<script type="text/javascript">
if ($("#pagesBlock1").find(".swchItem:contains('»')").text() == '»') {
$("#pagesBlock1").after('<div id="nextCont" class="input_submit alt"><div class="u_pos"></div></div>');
};

$(window).scroll(function() {
if($(".u_pos").length != 0) {
if($('.u_pos').position().top-$(window).scrollTop() < 1000) {
Conte.to()
}
}
});
Conte = {
to:function(){
$("#nextCont").html('<div align="center"><img src="/.s/img/icon/ajsml.gif" border="0" /></div>');
nextik = $("#pagesBlock1").find(".swchItem:contains('»')").attr('onclick').toString();
if(nextik !=undefined) {
num = nextik.match(/\d/);
$.get('/$MODULE_ID$/<?ifnot($PAGE_ID$ == "main")?>'+num+'-0-<?substr($URI_ID$,5)?>/'<?else?>?page'+num<?endif?>, function(next){
$("#nextCont").remove();
$("#allEntries").append( $("#allEntries", next).html() );
$("#allEntries #pagesBlock1").remove();
$("#allEntries").append("<div class=\"catPages1\" id=\"pagesBlock1\" style=\"clear:both;\" align=\"center\">" + $("#pagesBlock1", next).html() + "</div>");
$("#pagesBlock1").after('<div id="nextCont" class="input_submit alt"><div class="u_pos"></div></div>');
$("#nextCont").html('<div class="u_pos"></div>');
if ($("#pagesBlock1", next).find(".swchItem:contains('»')").html() == null) { $("#nextCont").fadeOut(); };
});
}
}
}
</script>
     <style>
  #pagesBlock1 {
      display:none;
  }
     </style>

Appears to work on the main page and page of the entries archive

Video Module
Main Page

Code

<div id="conter">$BODY$</div>
<div class="selector" id="selector" style="display:none">$PAGE_SELECTOR$</div>

<script type="text/javascript">
if ($("#selector").find(".swchItem:contains('»')").text() == '»') {
$("#selector").after('<div id="nextCont" class="input_submit alt"><div class="u_pos"></div></div>');
};

$(window).scroll(function() {
if($(".u_pos").length != 0) {
if($('.u_pos').position().top-$(window).scrollTop() < 1000) {
Conte.to()
}
}
});
Conte = {
to:function(){
$("#nextCont").html('<div align="center"><img src="/.s/img/icon/ajsml.gif" border="0" /></div>');
nextik = $("#selector").find(".swchItem:contains('»')");
if(nextik != undefined) {
nextik = nextik.attr('onclick').toString()
}
if(nextik !=undefined) {
<?ifnot($PAGE_ID$ == "main" || $MODULE_ID$ == "video")?>
num = nextik.split(/\s*-\s*/)[1];
<?else?>
num = nextik.match(/\d/);
<?endif?>
$.get('/$MODULE_ID$/via/*'+num, function(next){
$("#conter").append( $("#conter", next).html() );
$("#selector").html( $("#selector", next).html() );
$("#nextCont").html('<div class="u_pos"></div>');
if ($("#selector", next).find(".swchItem:contains('»')").html() == null) { $("#nextCont").fadeOut(); };
});
}
}
}
</script>

Category Page

Code

<div id="conter">$BODY$</div>
<div class="selector" id="selector" style="display:none">$PAGE_SELECTOR$</div>
<script type="text/javascript">
catName = "$REQUEST_URI$".split(/\s*\/\s*/)[3];
if ($("#selector").find(".swchItem:contains('»')").text() == '»') {
$("#selector").after('<div id="nextCont" class="input_submit alt"><div class="u_pos"></div></div>');
};

$(window).scroll(function() {
if($(".u_pos").length != 0) {
if($('.u_pos').position().top-$(window).scrollTop() < 1000) {
Conte.to()
}
}
});
Conte = {
to:function(){
$("#nextCont").html('<div align="center"><img src="/.s/img/icon/ajsml.gif" border="0" /></div>');
nextik = $("#selector").find(".swchItem:contains('»')");
if(nextik != undefined) {
nextik = nextik.attr('onclick').toString();
}
if(nextik != undefined) {
<?ifnot($PAGE_ID$ == "main" || $MODULE_ID$ == "video")?>
num = nextik.split(/\s*-\s*/)[1];
<?else?>
num = nextik.match(/\d/);
<?endif?>
$.get('/$MODULE_ID$/vic/'+ catName +'/*'+num, function(next){
$("#conter").append( $("#conter", next).html() );
$("#selector").html( $("#selector", next).html() );
$("#nextCont").html('<div class="u_pos"></div>');
if ($("#selector", next).find(".swchItem:contains('»')").html() == null) { $("#nextCont").fadeOut(); };
});
}
}
}
</script>

News
Functions in similar fashion to blog

Code

<div id="conter">$BODY$</div>
<script type="text/javascript">
if ($("#pagesBlock1").find(".swchItem:contains('»')").text() == '»') {
$("#pagesBlock1").after('<div id="nextCont" class="input_submit alt"><div class="u_pos"></div></div>');
};

$(window).scroll(function() {
if($(".u_pos").length != 0) {
if($('.u_pos').position().top-$(window).scrollTop() < 1000) {
Conte.to()
}
}
});
Conte = {
to:function(){
$("#nextCont").html('<div align="center"><img src="/.s/img/icon/ajsml.gif" border="0" /></div>');
nextik = $("#pagesBlock1").find(".swchItem:contains('»')").attr('onclick').toString();
if(nextik !=undefined) {
num = nextik.match(/\d/);
$.get('/$MODULE_ID$/<?ifnot($PAGE_ID$ == "archive")?>'+num+'-0-<?substr($URI_ID$,5)?>/'<?else?>?page'+num<?endif?>, function(next){
$("#nextCont").remove();
$("#allEntries").append( $("#allEntries", next).html() );
$("#allEntries #pagesBlock1").remove();
$("#allEntries").append("<div class=\"catPages1\" id=\"pagesBlock1\" style=\"clear:both;\" align=\"center\">" + $("#pagesBlock1", next).html() + "</div>");
$("#pagesBlock1").after('<div id="nextCont" class="input_submit alt"><div class="u_pos"></div></div>');
$("#nextCont").html('<div class="u_pos"></div>');
if ($("#pagesBlock1", next).find(".swchItem:contains('»')").html() == null) { $("#nextCont").fadeOut(); };
});
}
}
}
</script>
<style>
#pagesBlock1 {
display:none;
}
</style>

PayPal could be not allowing it to process because I did not add much info to my account...
What is your email? and I'll request it.

Hit that "Thanks" button. :)
In life there's ALWAYS limits but do not plan above them.

Post edited by VZ - Monday, 2017-01-30, 9:42 PM

Soldierdevil

Posts: 154

Reputation: 1

Message # 77 | 5:50 AM 2017-02-03

VZ, thank you so much for this help. I really appreciate... but just to let you know, unlike on category pages, entries on the main pages are repeated. Its never loads entries on the second page but that's fine for me because i was most interested in category pages. Thought you loved feedback to fine tune the codes. biggrin

Systems developer

Harina

Posts: 62

Reputation: 0

Message # 78 | 4:42 PM 2018-09-06

Why is the code for blog repeating entries sad

Added (2023-09-25, 11:28 PM)
---------------------------------------------
Anyone who needs a clean infinity scroll for the file catalog main mage that does not repeat entries, here is the code.

Code

<div id="moduleItems">
$BODY$
</div>
<div align="center" id="loading" style="display: none;">
<img src="/.s/img/icon/ajsml.gif" alt="Loading..." />
</div>
<script>
$(document).ready(function() {
var page = 2; // Start with page 2
var isLoading = false;

    function loadNextPage() {
        if (isLoading) return;
        isLoading = true;
        $('#loading').show();

        var url = "/load/?page" + page;

        $.ajax({
            url: url,
            method: "GET",
            success: function(data) {
                var nextPageContent = $(data).find('#allEntries').html();
                if (nextPageContent) {
                    var container = $('#moduleItems');
                    container.append(nextPageContent);
                    page++;
                }
                isLoading = false;
                $('#loading').hide();
            },
            error: function(xhr, status, error) {
                console.error("Error loading content: " + error);
                isLoading = false;
                $('#loading').hide();
            }
        });
    }

    // Attach the loadNextPage function to the scroll event
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
            loadNextPage();
        }
    });

    // Initial load
    loadNextPage();
});

</script>

. Go to file catalog main page and replace $BODY$ with the code above

Added (2023-09-25, 11:40 PM)
---------------------------------------------
for the category page replace $BODY$ with

Code

<div id="moduleItems">
$BODY$
</div>
<div align="center" id="loading" style="display: none;">
<img src="/.s/img/icon/ajsml.gif" alt="Loading..." />
</div>
<script>
$(document).ready(function() {
    var page = 2; // Start with page 2
    var isLoading = false;

    function loadNextPage() {
        if (isLoading) return;
        isLoading = true;
        $('#loading').show();

        var url = "/load/1-" + page;

        $.ajax({
            url: url,
            method: "GET",
            success: function(data) {
                var nextPageContent = $(data).find('#allEntries').html();
                if (nextPageContent) {
                    var container = $('#moduleItems');
                    container.append(nextPageContent);
                    page++;
                }
                isLoading = false;
                $('#loading').hide();
            },
            error: function(xhr, status, error) {
                console.error("Error loading content: " + error);
                isLoading = false;
                $('#loading').hide();
            }
        });
    }

    // Attach the loadNextPage function to the scroll event
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
            loadNextPage();
        }
    });

    // Initial load
    loadNextPage();
});

</script>

Dont forget to delete the line

Code

<?if($PAGE_SELECTOR1$)?><div class="paging-wrapper-bottom">$PAGE_SELECTOR1$</div><?endif?>

New page auto load when scrolling down

Page 6 of 6
«
1
2
3
4
5
6