Question

I am very sorry. This is follow up for my question here :
Why I can't get this jquery code to work?

All the solutions worked actually its my mistake not explaining it well enough.

What happens is that I have this code to load more posts when it is clicked:

// load more
$(".loadmore").click(function(){
    if ($.cookie('n_more')) {
        count = $.cookie('n_more');
        count++;
        $.cookie('n_more', count, { path: '/', expires: 100 });
    } else {
        $.cookie('n_more', 1, { path: '/', expires: 100 });
    }
    $(".QueryElement").trigger('change');
    var posts_visible = <?php echo $news['num_per_page']; ?>;
    var posts_more = <?php echo $news['num_per_more']; ?>;
    var newposition = posts_visible + (posts_more * $.cookie('n_more'));
    var lastpos = newposition;
    var thispost = $("#post-" + lastpos).position();
    $('html,body').animate({
        scrollTop: thispost.top
    },1000);
});

That code works fine for me because it calls the .QueryElement change trigger and the change trigger contains:

    $(".QueryElement").change(function() {

    // i hide almost all code here i think they are not related to the issue
    $("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'));

    });

The logic is I am attempting to trigger change when the user clicks on load more posts, thats fine and the new posts get loaded, perfect.

But the scroll animation does not work, i think because the load() content happens at the same time and the animate scroll does not recognize the new post IDs that are being loaded?? I am not sure..

but I really want to know how to initialize that animate onclick and also guarantee that the load() function is done. I am not sure what to do from here.

EDIT: Yes it works if I set the position to visible DIV/ID BEFORE the load() but can’t get it to scroll while the new content is loaded into page and new divs are inserted.

This works for example var lastpos = newposition - 1; because I set it to one div back (before content is loaded via load more)

Answer 1

In your change(...) function I would take advantage of the $.load complete argument and perform the scroll there. In-fact, it almost appears everything after the .trigger. could reside within that callback.

EDITv2

using the code you posted, this is the change. I’ve moved everything from the trigger in to the load’s complete event. without knowing everything else going on in your code, as far as I can tell this should work.

// load more
$(".loadmore").click(function(){
  if ($.cookie('n_more')) {
    count = $.cookie('n_more');
    count++;
    $.cookie('n_more', count, { path: '/', expires: 100 });
  } else {
    $.cookie('n_more', 1, { path: '/', expires: 100 });
  }
  $(".QueryElement").trigger('change');
});

$(".QueryElement").change(function() {
  // i hide almost all code here i think they are not related to the issue
  $("#result").load('<?php bloginfo('template_directory'); ?>/GetResults.php?' + $.cookie('nw-query'),function(){
    var posts_visible = <?php echo $news['num_per_page']; ?>;
    var posts_more = <?php echo $news['num_per_more']; ?>;
    var newposition = posts_visible + (posts_more * $.cookie('n_more'));
    var lastpos = newposition;
    var thispost = $("#post-" + lastpos).position();
    $('html,body').animate({
        scrollTop: thispost.top
    },1000);
  });
});