1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to add a transition effect in the Quick Pager plugin?

Discussion in 'jQuery' started by Furlan86, Jun 23, 2015.

  1. #1
    Hi, everybody!! :)

    As per the title, I'd like to add some lines of code in this plugin in order to get the same transition effect that appears when switching between pages in another plugin named Text Pager, about which I provided you the code and commented the lines that should (and I mean should) be just right for me:
    /**
    *
    *  Text Pager - jQuery plugin for create pages on div
    *  Copyright (c) 2014 Dmitrij Waśkowski
    *
    *  Licensed under the MIT license:
    *  http://www.opensource.org/licenses/mit-license.php
    *
    *  Project home:
    *  https://github.com/dwaskowski/jquery_textpager
    *
    *  Version:  1.0
    *
    */
    
    
    !function(e, t, o, n) {
        e.fn.textpager = function(options) {
            var parent = $('<div>').insertBefore($(this));
            $(this).css('overflow','hidden').appendTo($(parent));
            var eOptions = {
                controlArrows:          (typeof(options) !== "undefined" && options !== null && typeof(options.controlArrows) !== "undefined" && options.controlArrows !== null) ? options.controlArrows : '',
                controlArrowsEnabel:    (typeof(options) !== "undefined" && options !== null && typeof(options.controlArrowsEnabel) !== "undefined" && options.controlArrowsEnabel !== null) ? options.controlArrowsEnabel : true,
                controlPages:           (typeof(options) !== "undefined" && options !== null && typeof(options.controlPages) !== "undefined" && options.controlPages !== null) ? options.controlPages : '',
                controlPagesEnabel:     (typeof(options) !== "undefined" && options !== null && typeof(options.controlPagesEnabel) !== "undefined" && options.controlPagesEnabel !== null) ? options.controlPagesEnabel : true,
                controlPagesContent:    (typeof(options) !== "undefined" && options !== null && typeof(options.controlPagesContent) !== "undefined" && options.controlPagesContent !== null) ? options.controlPagesContent : 'div'
            };
    
            var fulltextHeight = 0;
            $(this).children().each(function(){
                fulltextHeight += $(this).height();
            });
    
            var textareaHeight = $(this).height();
            var textareaWidth = $(this).width();
    
            if(textareaHeight<fulltextHeight){
                var pageNow = 1;
                var margTop = 0;
                var pages = Math.ceil(fulltextHeight/textareaHeight);
    
                if (eOptions.controlArrows==='') {
                    $('<div>').addClass('tp-control-arrows').appendTo($(parent));
                    eOptions.controlArrows = $(parent).find('.tp-control-arrows');
                    $('<a>').addClass('tp-control-arrow-left').addClass('unactive').html('<span><</span>').appendTo($(eOptions.controlArrows));
                    $('<a>').addClass('tp-control-arrow-right').html('<span>></span>').appendTo($(eOptions.controlArrows));
                }
                if (eOptions.controlPages==='') {
                    $('<div>').addClass('tp-control-pages').appendTo($(parent));
                    eOptions.controlPages = $(parent).find('.tp-control-pages');
                }
                var controlElements = '';
                for (var pageCount=0;pageCount<pages;pageCount++) {
                    controlElements += $('<'+eOptions.controlPagesContent+'>')
                            .attr('data-page',''+(pageCount+1))
                            .html('<span>'+(pageCount+1)+'</span>')
                            .addClass('tp-page')
                            .addClass(!pageCount ? 'active' : '')
                            .prop("outerHTML");
                }
                $(eOptions.controlPages).html(controlElements);
                $(this).css('height',textareaHeight+'px').css('padding',0);
                var contentHtml = $(this).html();
                $(this).html('');
                $('<div>').addClass('tp-horizontalbox').css('height',textareaHeight+'px').css('width',textareaWidth+'px').appendTo($(this));
                $('<div>').addClass('tp-vertivalbox').html(contentHtml).css('width',textareaWidth+'px').appendTo($(this).find('.tp-horizontalbox'));
    
                var self = this;
                $(eOptions.controlArrows).find('.tp-control-arrow-left').unbind('click').click(function(){
                    var thisPage = pageNow-1;
                    if(thisPage<1){
                        return;
                    }
                    if(thisPage==1){
                        $(this).addClass('unactive');
                    }
                    $(eOptions.controlArrows).find('.tp-control-arrow-right').removeClass('unactive');
                    var nextPage = (thisPage-pageNow)*textareaHeight;
                    margTop -= nextPage;
                    pageNow = thisPage;
                    $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').removeClass('active');
                    $(eOptions.controlPages).find(eOptions.controlPagesContent+'[data-page="'+thisPage+'"]').addClass('active');
                    self.animateStep(self, textareaWidth, margTop, false); // piece of code that calls the animateStep function
                });
                $(eOptions.controlArrows).find('.tp-control-arrow-right').unbind('click').click(function(){
                    var thisPage = pageNow+1;
                    if(thisPage>pages){
                        return;
                    }
                    if(thisPage==pages){
                        $(this).addClass('unactive');
                    }
                    $(eOptions.controlArrows).find('.tp-control-arrow-left').removeClass('unactive');
                    var nextPage = (thisPage-pageNow)*textareaHeight;
                    margTop -= nextPage;
                    pageNow = thisPage;
                    $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').removeClass('active');
                    $(eOptions.controlPages).find(eOptions.controlPagesContent+'[data-page="'+thisPage+'"]').addClass('active');
                    self.animateStep(self, textareaWidth, margTop, true); // piece of code that calls the animateStep function
                });
                $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').unbind('click').click(function(){
                    var thisPage = $(this).data('page');
                    if(thisPage===pageNow) {
                        return;
                    }
                    var goAhead = true;
                    if(thisPage<pageNow) {
                        goAhead = false;
                    }
    
                    if (thisPage==1) {
                        $(eOptions.controlArrows).find('.tp-control-arrow-left').addClass('unactive');
                        $(eOptions.controlArrows).find('.tp-control-arrow-right').removeClass('unactive');
                    } else if(thisPage==pages) {
                        $(eOptions.controlArrows).find('.tp-control-arrow-right').addClass('unactive');
                        $(eOptions.controlArrows).find('.tp-control-arrow-left').removeClass('unactive');
                    } else {
                        $(eOptions.controlArrows).find('.tp-control-arrow-right').removeClass('unactive');
                        $(eOptions.controlArrows).find('.tp-control-arrow-left').removeClass('unactive');
                    }
    
                    var nextPage = (thisPage-pageNow)*textareaHeight;
                    margTop -= nextPage;
                    pageNow = thisPage;
                    $(eOptions.controlPages).find(eOptions.controlPagesContent+'.tp-page').removeClass('active');
                    $(this).addClass('active');
                    self.animateStep(self, textareaWidth, margTop, goAhead); // piece of code that calls the animateStep function
                });
    
    
            }
    
            // function that creates the transition effect
            this.animateStep = function(parent, textareaWidth, margTop, goAhead){
                $(parent).find('.tp-horizontalbox')
                    .animate({
                        marginLeft: (goAhead ? "-="+textareaWidth : "+="+textareaWidth)
                    }, 400, function(){
                        $(this)
                        .css({
                            marginLeft: (goAhead ? "+="+(textareaWidth*2) : "-="+(textareaWidth*2))
                        })
                        .find('.tp-vertivalbox')
                        .css({
                            marginTop: margTop
                        });
                        $(this)
                        .animate({
                            marginLeft: (goAhead ? "-="+textareaWidth : "+="+textareaWidth)
                        }, 400)
                        .find('.tp-vertivalbox')
                        .animate({
                            opacity: 1
                        }, 400);
                    })
                    .find('.tp-vertivalbox')
                    .animate({
                        opacity: 0
                    }, 400);
            }
        };
    
    }(jQuery, window, document);
    Code (JavaScript):
    And this is the code regarding Quick Pager wherein I'd like to implement only the function stated above:
    (function($) {
    
        $.fn.quickPagination=function(options) {
    
            var defaults = {
                pageSize: 10,
                currentPage: 1,
                holder: null,
                pagerLocation: "after"
            };
    
            var options = $.extend(defaults, options);
    
    
            return this.each(function() {
    
    
                var selector = $(this);
                var pageCounter = 1;
    
                selector.wrap("<div class='simplePagerContainer'></div>");
    
                selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();
           
                selector.children().each(function(i) {
    
                    if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
                    $(this).addClass("simplePagerPage"+pageCounter);
                    }
                    else {
                        $(this).addClass("simplePagerPage"+(pageCounter+1));
                        pageCounter ++;
                    }
               
                });
           
           
                selector.children().hide();
                selector.children(".simplePagerPage"+options.currentPage).show();
    
                if(pageCounter <= 1) {
                    return;
                }
    
    
                var pageNav = "<ul class='simplePagerNav'>";
                for (i=1;i<=pageCounter;i++) {
                    if (i==options.currentPage) {
                        pageNav += "<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
                    }
                    else {
                        pageNav += "<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#'>"+i+"</a></li>";
                    }
                }
                pageNav += "</ul>";
    
                if(!options.holder) {
                    switch(options.pagerLocation)
                    {
                    case "before":
                        selector.before(pageNav);
                    break;
                    case "both":
                        selector.before(pageNav);
                        selector.after(pageNav);
                    break;
                    default:
                        selector.after(pageNav);
                    }
                }
                else {
                    $(options.holder).append(pageNav);
                }
    
    
                selector.parent().find(".simplePagerNav a").click(function() {
    
    
                    var clickedLink = $(this).attr("rel");
                    options.currentPage = clickedLink;
    
                    if(options.holder) {
                        $(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
                        $(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
                    }
                    else {
    
                        $(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");
    
                        $(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
                    }
    
    
                    selector.children().hide();
                    selector.find(".simplePagerPage"+clickedLink).show();
    
                    return false;
                });
            });
        }
    
    
    })(jQuery);
    Code (JavaScript):
    And obviously thanks in advance to all of you for your time and attention!!

    Regards.

    Furlan86
     
    Last edited: Jun 23, 2015
    Furlan86, Jun 23, 2015 IP