How also on start show message? Jquery (on scrool)

[fumeeptc]

Hello, i have cool jquery function that with ajax load more results on page scrool.
When all data is loaded it shows “No more results!” what i want is on start (when “No more results!” is hidden) show message “Scrool to show more!”

I tried like for an hour and could not do it

Here are code:

(function($){   
    $.fn.loaddata = function(options) {
        var settings = $.extend({ 
            loading_gif_url : "../images/loading.gif", 
            end_record_text : 'No more results!', 
            data_url        : 'show_more.php',
            start_page      : 1 
        }, options);
        
        var el = this;  
        loading  = false; 
        end_record = false;
        contents(el, settings);
        
		var winHei = $(window).height()+500;
		var docHei = $(document).height()+500;
        $(window).scroll(function() { 
            if($(window).scrollTop() + winHei >= docHei){ 
                contents(el, settings); 
            }
        });     
    }; 
    
    function contents(el, settings){
        var load_img = $('<img/>').attr('src',settings.loading_gif_url).addClass('loading-image'); 
        var record_end_txt = $('<div />').text(settings.end_record_text).addClass('end-record-info'); 
        
        if(loading == false && end_record == false){
            loading = true; 
            el.append(load_img); 
            $.post( settings.data_url, {'page': settings.start_page}, function(data){ 
                if(data.trim().length == 0){ 
                    el.append(record_end_txt); 
                    load_img.remove(); 
                    end_record = true; 
                    return; 
                }
                loading = false; 
                load_img.remove();  
                el.append(data);   
                settings.start_page ++; 
            })
        }
    }

})(jQuery);

$("#results").loaddata();

Any help would be appreciate!

[m_hutley]

Well lets start here:

@fumeeptc

(when “No more results!” is hidden)

No more results is never hidden - it’s simply not put into the DOM until there’s nothing left.
I need a little more information about the behavior you’re trying to set up. You want to display “Scroll to show more!”… only before the first load? After each successful load?

[fumeeptc]

@m_hutley Yes, if there is more to load then display “Scroll to show more!” and it should be after first (10 results loaded at start) load and after each successful load untill there are no more records left!

[m_hutley]

So here’s how I would do it, while trying to stick to the style of the existing code:

===

        end_record_text : 'No more results!', 

After, add:

        more_record_text : "Scroll to show more!",

===

   var record_end_txt = $('<div />').text(settings.end_record_text).addClass('end-record-info'); 

After, add:

 var record_more_txt = $('<div />').text(settings.more_record_text).addClass('more-record-info'); 

===

        el.append(load_img); 

Before, add:

        record_more_txt.remove();

===

            el.append(data); 

After, add:

            el.append(record_more_text);

You’ll probably also need to extend the CSS for end-record-info to include more-record-info.