5 Replies - 1097 Views - Last Post: 21 July 2015 - 05:03 PM

#1 Furlan86   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 24-June 15

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

Posted 24 June 2015 - 09:12 AM

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 this other 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);
            });
            $(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);
            });
            $(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);
            });


        }

        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);


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);


And obviously thanks in advance to all of you for your time and attention!!

Regards.

Furlan86

Is This A Good Question/Topic? 0
  • +

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

#2 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6259
  • View blog
  • Posts: 24,028
  • Joined: 23-August 08

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

Posted 24 June 2015 - 09:42 AM

Moved to jQuery
Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2674
  • View blog
  • Posts: 7,892
  • Joined: 15-January 14

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

Posted 24 June 2015 - 10:51 AM

The second one just does a hide and then a show at the end. The first one has that animationStep function to set up the animation. You'll need to replace the hide and show with something similar to that, although you'll need to figure out how to map the elements that the first one is using to the page structure that the second one is using. You may need to change the page structure and then update the code in the second one to use the new structure.
Was This Post Helpful? 0
  • +
  • -

#4 Furlan86   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 24-June 15

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

Posted 09 July 2015 - 04:50 PM

Thanks a lot, though honestly in the end I changed the Quick Pager plugin with this other plugin named Sweet Pages! :bigsmile:

Now, however, I'm having trouble with the second-level ULs, because I need to paginate ONLY the first-level list items, not all of them.

So I added a class "section" to the first-level LIs and tried to change the following line of code
var li = ul.find('li')
in this way
var li = ul.find('li.section')
but it doesn't work, because the plugin doesn't calculate correctly the height of the #holder UL anymore! :(

Here's the original code:
(function($){

// Creating the sweetPages jQuery plugin:
$.fn.sweetPages = function(opts){
	
	// If no options were passed, create an empty opts object
	if(!opts) opts = {};
	
	var resultsPerPage = opts.perPage || 3;
	
	// The plugin works best for unordered lists, althugh ols would do just as well:
	var ul = this;
	var li = ul.find('li');
	
	li.each(function(){
		// Calculating the height of each li element, and storing it with the data method:
		var el = $(this);
		el.data('height',el.outerHeight(true));
	});
	
	// Calculating the total number of pages:
	var pagesNumber = Math.ceil(li.length/resultsPerPage);
	
	// If the pages are less than two, do nothing:
	if(pagesNumber<2) return this;

	// Creating the controls div:
	var swControls = $('<div class="swControls">');
	
	for(var i=0;i<pagesNumber;i++)
	{
		// Slice a portion of the lis, and wrap it in a swPage div:
		li.slice(i*resultsPerPage,(i+1)*resultsPerPage).wrapAll('<div class="swPage" />');
		
		// Adding a link to the swControls div:
		swControls.append('<a href="" class="swShowPage">'+(i+1)+'</a>');
	}

	ul.append(swControls);
	
	var maxHeight = 0;
	var totalWidth = 0;
	
	var swPage = ul.find('.swPage');
	swPage.each(function(){
		
		// Looping through all the newly created pages:
		
		var elem = $(this);

		var tmpHeight = 0;
		elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

		if(tmpHeight>maxHeight)
			maxHeight = tmpHeight;

		totalWidth+=elem.outerWidth();
		
		elem.css('float','left').width(ul.width());
	});
	
	swPage.wrapAll('<div class="swSlider" />');
	
	// Setting the height of the ul to the height of the tallest page:
	ul.height(maxHeight);
	
	var swSlider = ul.find('.swSlider');
	swSlider.append('<div class="clear" />').width(totalWidth);

	var hyperLinks = ul.find('a.swShowPage');
	
	hyperLinks.click(function(e){
		
		// If one of the control links is clicked, slide the swSlider div 
		// (which contains all the pages) and mark it as active:

		$(this).addClass('active').siblings().removeClass('active');
		
		swSlider.stop().animate({'margin-left':-(parseInt($(this).text())-1)*ul.width()},'slow');
		e.preventDefault();
	});
	
	// Mark the first link as active the first time this code runs:
	hyperLinks.eq(0).addClass('active');
	
	// Center the control div:
	swControls.css({
		'left':'50%',
		'margin-left':-swControls.width()/2
	});
	
	return this;
	
}})(jQuery);


$(document).ready(function(){
	/* The following code is executed once the DOM is loaded */
	
	// Calling the jQuery plugin and splitting the
	// #holder UL into pages of 3 LIs each:
	
	$('#holder').sweetPages({perPage:3});
	
	// The default behaviour of the plugin is to insert the 
	// page links in the ul, but we need them in the main container:

	var controls = $('.swControls').detach();
	controls.appendTo('#main');
	
});
Any ideas??

Thanks again!! :)
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2674
  • View blog
  • Posts: 7,892
  • Joined: 15-January 14

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

Posted 10 July 2015 - 08:43 AM

I'm not sure how all of that fits with your page, but maybe you need to change the code so that it calculates the height using one set of elements, and then uses another set to do the paging or whatever else it does.
Was This Post Helpful? 0
  • +
  • -

#6 Furlan86   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 24-June 15

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

Posted 21 July 2015 - 05:03 PM

Not in this case. Actually it was enough just to add a simple > inside the LI selector on lines 13 and 52 to reach the goal! ;)

But thanks anyway for your help!! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1