Question

I have a jQuery Carousel script and I want to modify it’s behavior slightly. Here is the script and test case in jsfiddle: http://jsfiddle.net/A4vHf/1/ . Below is the JS code.

(function($) {

    $.fn.easyPaginate = function(options){

        var defaults = {                
            step: 4,
            delay: 100,
            numeric: true,
            nextprev: true,
            auto:false,
            pause:4000,
            clickstop:true,
            controls: 'pagination',
            current: 'current' 
        }; 

        var options = $.extend(defaults, options); 
        var step = options.step;
        var lower, upper;
        var children = $(this).children();
        var count = children.length;
        var obj, next, prev;        
        var page = 1;
        var timeout;
        var clicked = false;

        function show(){
            clearTimeout(timeout);
            lower = ((page-1) * step);
            upper = lower+step;
            $(children).each(function(i){
                var child = $(this);
                child.hide();
                if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
                if(options.nextprev){
                    if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                    if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
                };
            }); 
            $('li','#'+ options.controls).removeClass(options.current);
            $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

            if(options.auto){
                if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
            };
        };

        function auto(){
            if(upper <= count){ page++; show(); }           
        };

        this.each(function(){ 

            obj = this;

            if(count>step){

                var pages = Math.floor(count/step);
                if((count/step) > pages) pages++;

                var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);

                if(options.nextprev){
                    prev = $('<li class="prev">Previous</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;
                            page--;
                            show();
                        });
                };

                if(options.numeric){
                    for(var i=1;i<=pages;i++){
                    $('<li data-index="'+ i +'">'+ i +'</li>')
                        .appendTo(ol)
                        .click(function(){  
                            clicked = true;
                            page = $(this).attr('data-index');
                            show();
                        });                 
                    };              
                };

                if(options.nextprev){
                    next = $('<li class="next">Next</li>')
                        .hide()
                        .appendTo(ol)
                        .click(function(){
                            clicked = true;         
                            page++;
                            show();
                        });
                };

                show();
            };
        }); 

    };  

})(jQuery);

My goal is to make the class="prev" and class="next" buttons always visible. I removed the hide(); methods from the code, but I also need to remove the click event handlers because otherwise I can still click on the buttons even when I’m on the last or first pages accordingly – and that’s here things get messed up. I have to bind and unbind the click events but don’t know how to do it properly. So here is my modified version:

(function($) {

$.fn.easyPaginate = function(options){

    var defaults = {                
        step: 4,
        delay: 100,
        numeric: true,
        nextprev: true,
        auto:false,
        pause:4000,
        clickstop:true,
        controls: 'pagination',
        current: 'current' 
    }; 

    var options = $.extend(defaults, options); 
    var step = options.step;
    var lower, upper;
    var children = $(this).children();
    var count = children.length;
    var obj, next, prev;        
    var page = 1;
    var timeout;
    var clicked = false;

    function show(){
        clearTimeout(timeout);
        lower = ((page-1) * step);
        upper = lower+step;
        $(children).each(function(i){
            var child = $(this);
            child.hide();
            if(i>=lower && i<upper){ setTimeout(function(){ child.fadeIn('fast') }, ( i-( Math.floor(i/step) * step) )*options.delay ); }
            if(options.nextprev){
                if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
                if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
            };
        }); 
        $('li','#'+ options.controls).removeClass(options.current);
        $('li[data-index="'+page+'"]','#'+ options.controls).addClass(options.current);

        if(options.auto){
            if(options.clickstop && clicked){}else{ timeout = setTimeout(auto,options.pause); };
        };
    };

    function auto(){
        if(upper <= count){ page++; show(); }           
    };

    this.each(function(){ 

        obj = this;

        if(count>step){

            var pages = Math.floor(count/step);
            if((count/step) > pages) pages++;

            var ol = $('<ol id="'+ options.controls +'"></ol>').insertAfter(obj);

            if(options.nextprev){
                prev = $('<li class="prev">Previous</li>')
                    .appendTo(ol)
                    .bind('click', function() {
                        clicked = true;
                        page--;
                        show();
                    });
            };

            if(options.numeric){
                for(var i=1;i<=pages;i++){
                $('<li data-index="'+ i +'">'+ i +'</li>')
                    .appendTo(ol)
                    .click(function(){  
                        clicked = true;
                        page = $(this).attr('data-index');
                        show();
                    });                 
                };              
            };

            if(options.nextprev){
                next = $('<li class="next">Next</li>')
                    .appendTo(ol)
                    .bind('click', function() {
                        clicked = true;         
                        page++;
                        show();
                    });
            };

            show();
        };
    }); 

};  

})(jQuery);

Answer 1

What about just checking inside your event handlers if the user has reached the bounds of the pages?

        if(options.nextprev){
            prev = $('<li class="prev">Previous</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any more pages in the negative direction
                    if (page > 0) {
                        clicked = true;
                        page--;
                        show();
                    }
                });
        }

        if(options.nextprev){
            next = $('<li class="next">Next</li>')
                .appendTo(ol)
                .bind('click', function() {

                    //check to see if there are any pages in the positive direction
                    if ((page + 1) < count) {
                        clicked = true;         
                        page++;
                        show();
                    }
                });
        }

Update

If you want the previous and next buttons to never dissapear then you need to remove the code in the show() function that fades the elements in and out. That section of code is this:

        if(options.nextprev){
            if(upper >= count) { next.fadeOut('fast'); } else { next.fadeIn('fast'); };
            if(lower >= 1) { prev.fadeIn('fast'); } else { prev.fadeOut('fast'); };
        };

A simple fix is to just comment this section-out, here is a demo: http://jsfiddle.net/A4vHf/18/