1

As I'm a newbie on javascript, I'm here to learn some techniques. I'm trying to implement inside my code an infinite Ajax scroll. This is my php page:

<div class="row row-sm padder-lg ">
<?php
foreach ($top->feed->entry as $key => $value) 
{
    $value->title->label = str_ireplace( "- ".$value->author->label, "",  $value->title->label);
    if($key >= $this->config->item("items_top"))
        return false;
    $image = $value->image[2]->label;
    if($image == '')
        $image = base_url()."assets/images/no-cover.png";
    $image = str_ireplace("170x170", "200x200", $image);
?>      
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
    <div class="item">
        <div class="pos-rlt">
            <a onclick="get_more('<?php echo addslashes($value->title->label); ?>','<?php echo addslashes($value->author->label); ?>','<?php echo $image; ?>'); ?>');"  href="#">           
                <div class="item-overlay opacity r r-2x bg-black">
                    <div class="center text-center m-t-n">
                        <i class="icon-control-play i-2x"></i>
                    </div>                      
                </div>
                <a href="#">
                    <div class="r r-2x img-full" style="background:url('<?php echo $image; ?>') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;  background-size: cover;">
                        <div style="height:180px;overflow:hidden;"></div>
                    </div>
                </a>
             </a>
        </div>

    </div>
</div>
<?php
}
?>
<script>
$(".removehref").attr("href","#");
</script>

I decided to use this jQuery for the purpose: Infinite AJAX Scroll In the example this is what I supposed to do:

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
</div>

<div id="pagination">
  <a href="page1.html">1</a>
  <a href="page2.html" class="next">2</a>
</div>

Easy and simple...however not in my case. Indeed the container is more complicated, there is a loop inside, what I supposed to do? And what about the pagination?

EDIT As suggested this is more appropriated for my case without using the jQuery above, however I'm confused about the use.

How could I use my loop foreach into function doSomething() { ?

 <script>
        $(document).scroll(function(e){
            // grab the scroll amount and the window height
            var scrollAmount = $(window).scrollTop();
            var documentHeight = $(document).height();
            // calculate the percentage the user has scrolled down the page
            var scrollPercent = (scrollAmount / documentHeight) * 100;
            if(scrollPercent > 50) {
                // run a function called doSomething
               doSomething();
            }
            function doSomething() {
                // do something when a user gets 50% of the way down my page
            }
        });
</script>
NineCattoRules
  • 2,253
  • 6
  • 39
  • 84

1 Answers1

1

If it doesn't fit your needs, it might be better to write your own. They're not too complicated.

Normally for something like this, you have 2 files:

  1. Your HTML page with an AJAX function
  2. A PHP script on the server receiving the call from AJAX and returning the value

So you'd store the code fetching your content on the server in a PHP script. Then you'd either have a button to click or a test that would automatically call your AJAX function, send the request to the PHP script on the server, return the result to your AJAX, and then append to the page.

Take a look at http://api.jquery.com/jquery.post/ for an AJAX call.

To automatically load more when you reach the end, you can use jQuery's .height() to get the height of the page and .scrollTop() to test against the current position on the page. If scrollTop is equal (or greater) than height, then call your AJAX function.

dartanian300
  • 247
  • 2
  • 16