CODEWITHSUNDEEP
phpjavascriptjqueryhtml
DomingoSL
DomingoSL

Reputation: 15494

Loading content on a webpage only when a part of the webpage is displayed on the browser

in some pages i see when you arrive at the end of the page the page automatic loads new data. For example, some blogs when you get to the end of the page (that only loads 10 articles when you get there), the page load 10 articles more without pressing anything, so the questions will be, How do i execute/triger a php/javascript commands when something is displaying or the user gets to a particular position of the page? (USING A LOADER IMAGE OF COURSE)

--edit-- IMPORTANT: Please i dont need a triger by scroll, i need to triger from a display object, like when some image is in focus. Thanks!

Upvotes: 2

Views: 322

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Here is some code that runs on .scroll() and calculates how far from the bottom the current scroll is ..

http://jsfiddle.net/hRSE8/ (in this example, i add manually some text to showcase the effect of adding content and the scroll system adjusting to it)

At a specified distance you can load content with .ajax()

in short

$(window).scroll(function(){
    var $this = $(this);
    var $body = $('body');
    var distance = $body.outerHeight() - $this.height() - $this.scrollTop() );
});

Update

Here is an updated example that will show when an element is in view (additional update to match specs in comment)

Demo

<script type="text/javascript">
  $(document).ready(function(){
    $(window).scroll(function(){

        var $window = $(window);

        var visibleTop = $window.scrollTop();
        var visibleBottom = visibleTop + $window.height();

        var elementTop = $('#myloader').offset().top;
        if ( elementTop > visibleTop && elementTop < visibleBottom)
            {
               // loader in view
               // so we remove the loader from the DOM
               $('#myloader').remove();

               // and run the code ..
               $('#tweetsFeed').jTweetsAnywhere(
                             { searchParams: ['ors=patanemo+bocaina+cuyagua+todasana+parguito+%23surfVE&lang=es&geocode=8,-66,1000km'],
                               count: 6 });
            }

    });
  });
</script>

And you need to put in your page the loader with <img src="loader.gif" id="myloader" />

Upvotes: 1

Ivan
Ivan

Reputation: 1561

If you're using the jQuery framework, have a look at infinite scroll:

http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Upvotes: 1

spinon
spinon

Reputation: 10847

I have never had to do this before but how I would do it is like this:

I would calculate the scroll position of the page using:

$(window).scrollTop();

Then I would find the scroll position an element on the page:

$(element selector).scrollTop()

Once the first number is bigger than the second number (plus maybe a buffer) then go ahead and make your ajax call to load whatever content you want.

This is all theoretical as I have never done but it seems logical. Anyone feel free to correct me where I might be wrong.

EDIT: You could also use the answer from this post: Check if element is visible after scrolling

to see if an element is visible on the screen and then load at that time.

Though either of these solutions would require you to add an event handler for the scroll event.

Upvotes: 0

Related Questions