Pagination, $(window).scroll(function(){ were should this go.

[paul1]

Hi, I have a JS file that runs pagination top and bottom, everything runs fine but on reloading a new page from the bottom you have to scroll up to the top, please can any help me with the location I should put the $(window).scroll(function(){ . Thankyou.

/*** jQuery jPages v0.7* Client side pagination with jQuery* http://luis-almeida.github.com/jPages** Licensed under the MIT license.* Copyright 2012 Luís Almeida* https://github.com/luis-almeida*/;(function($, window, document, undefined) {  var name = "jPages",	  instance = null,	  defaults = {		containerID: "",		first: false,		previous: "← previous",		next: "next →",		last: false,		links: "numeric", // blank || title		startPage: 1,		perPage: 5,		midRange: 5,		startRange: 1,		endRange: 1,		keyBrowse: false,		scrollBrowse: false,		pause: 0,		clickStop: false,		delay: 50,		direction: "forward", // backwards || auto || random ||		animation: "", // http://daneden.me/animate/ - any entrance animations		fallback: 400,		minHeight: true,		callback: undefined // function( pages, items ) { }	  };   function Plugin(element, options) {	this.options = $.extend({}, defaults, options);	this._container = $("#" + this.options.containerID);	if (!this._container.length) return;	this.jQwindow = $(window);	this.jQdocument = $(document);	this._holder = $(element);	this._nav = {};	this._first = $(this.options.first);	this._previous = $(this.options.previous);	this._next = $(this.options.next);	this._last = $(this.options.last);	/* only visible items! */	this._items = this._container.children(":visible");	this._itemsShowing = $([]);	this._itemsHiding = $([]);	this._numPages = Math.ceil(this._items.length / this.options.perPage);	this._currentPageNum = this.options.startPage;	this._clicked = false;	this._cssAnimSupport = this.getCSSAnimationSupport();	this.init();  }  Plugin.prototype = {	constructor : Plugin,	getCSSAnimationSupport : function() {	  var animation = false,		  animationstring = 'animation',		  keyframeprefix = '',		  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),		  pfx = '',		  elm = this._container.get(0);	  if (elm.style.animationName) animation = true;	  if (animation === false) {		for (var i = 0; i < domPrefixes.length; i++) {		  if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {			pfx = domPrefixes[i];			animationstring = pfx + 'Animation';			keyframeprefix = '-' + pfx.toLowerCase() + '-';			animation = true;			break;		  }		}	  }	  return animation;	},	init : function() {	  this.setStyles();	  this.setNav();	  this.paginate(this._currentPageNum);	  this.setMinHeight();	},	setStyles : function() {	  var requiredStyles = "<style>" +	  ".jp-invisible { visibility: hidden !important; } " +	  ".jp-hidden { display: none !important; }" +	  "</style>";	  $(requiredStyles).appendTo("head");	  if (this._cssAnimSupport && this.options.animation.length)		this._items.addClass("animated jp-hidden");	  else this._items.hide();	},	setNav : function() {	  var navhtml = this.writeNav();	  this._holder.each(this.bind(function(index, element) {		var holder = $(element);		holder.html(navhtml);		this.cacheNavElements(holder, index);		this.bindNavHandlers(index);		this.disableNavSelection(element);	  }, this));	  if (this.options.keyBrowse) this.bindNavKeyBrowse();	  if (this.options.scrollBrowse) this.bindNavScrollBrowse();	},	writeNav : function() {	  var i = 1, navhtml;	  navhtml = this.writeBtn("first") + this.writeBtn("previous");	  for (; i <= this._numPages; i++) {		if (i === 1 && this.options.startRange === 0) navhtml += "<span>...</span>";		if (i > this.options.startRange && i <= this._numPages - this.options.endRange)		  navhtml += "<a href='#' class='jp-hidden'>";		else		  navhtml += "<a>";		switch (this.options.links) {		  case "numeric":			navhtml += i;			break;		  case "blank":			break;		  case "title":			var title = this._items.eq(i - 1).attr("data-title");			navhtml += title !== undefined ? title : "";			break;		}		navhtml += "</a>";		if (i === this.options.startRange || i === this._numPages - this.options.endRange)		  navhtml += "<span>...</span>";	  }	  navhtml += this.writeBtn("next") + this.writeBtn("last") + "</div>";	  return navhtml;	},	writeBtn : function(which) {	  return this.options[which] !== false && !$(this["_" + which]).length ?	  "<a class='jp-" + which + "'>" + this.options[which] + "</a>" : "";	},	cacheNavElements : function(holder, index) {	  this._nav[index] = {};	  this._nav[index].holder = holder;	  this._nav[index].first = this._first.length ? this._first : this._nav[index].holder.find("a.jp-first");	  this._nav[index].previous = this._previous.length ? this._previous : this._nav[index].holder.find("a.jp-previous");	  this._nav[index].next = this._next.length ? this._next : this._nav[index].holder.find("a.jp-next");	  this._nav[index].last = this._last.length ? this._last : this._nav[index].holder.find("a.jp-last");	  this._nav[index].fstBreak = this._nav[index].holder.find("span:first");	  this._nav[index].lstBreak = this._nav[index].holder.find("span:last");	  this._nav[index].pages = this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");	  this._nav[index].permPages =		this._nav[index].pages.slice(0, this.options.startRange)		  .add(this._nav[index].pages.slice(this._numPages - this.options.endRange, this._numPages));	  this._nav[index].pagesShowing = $([]);	  this._nav[index].currentPage = $([]);	},	bindNavHandlers : function(index) {	  var nav = this._nav[index];	  // default nav	  nav.holder.bind("click.jPages", this.bind(function(evt) {		var newPage = this.getNewPage(nav, $(evt.target));		if (this.validNewPage(newPage)) {		  this._clicked = true;		  this.paginate(newPage);		}		evt.preventDefault();	  }, this));	  // custom first	  if (this._first.length) {		this._first.bind("click.jPages", this.bind(function() {		  if (this.validNewPage(1)) {			this._clicked = true;			this.paginate(1);		  }		}, this));	  }	  // custom previous	  if (this._previous.length) {		this._previous.bind("click.jPages", this.bind(function() {		  var newPage = this._currentPageNum - 1;		  if (this.validNewPage(newPage)) {			this._clicked = true;			this.paginate(newPage);		  }		}, this));	  }	  // custom next	  if (this._next.length) {		this._next.bind("click.jPages", this.bind(function() {		  var newPage = this._currentPageNum + 1;		  if (this.validNewPage(newPage)) {			this._clicked = true;			this.paginate(newPage);		  }		}, this));	  }	  // custom last	  if (this._last.length) {		this._last.bind("click.jPages", this.bind(function() {		  if (this.validNewPage(this._numPages)) {			this._clicked = true;			this.paginate(this._numPages);		  }		}, this));	  }	},	disableNavSelection : function(element) {	  if (typeof element.onselectstart != "undefined")		element.onselectstart = function() {		  return false;		};	  else if (typeof element.style.MozUserSelect != "undefined")		element.style.MozUserSelect = "none";	  else		element.onmousedown = function() {		  return false;		};	},	bindNavKeyBrowse : function() {	  this.jQdocument.bind("keydown.jPages", this.bind(function(evt) {		var target = evt.target.nodeName.toLowerCase();		if (this.elemScrolledIntoView() && target !== "input" && target != "textarea") {		  var newPage = this._currentPageNum;		  if (evt.which == 37) newPage = this._currentPageNum - 1;		  if (evt.which == 39) newPage = this._currentPageNum + 1;		  if (this.validNewPage(newPage)) {			this._clicked = true;			this.paginate(newPage);		  }		}	  }, this));	},	elemScrolledIntoView : function() {	  var docViewTop, docViewBottom, elemTop, elemBottom;	  docViewTop = this.jQwindow.scrollTop();	  docViewBottom = docViewTop + this.jQwindow.height();	  elemTop = this._container.offset().top;	  elemBottom = elemTop + this._container.height();	  return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));	  // comment above and uncomment below if you want keyBrowse to happen	  // only when container is completely visible in the page	  /*return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) &&				(elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );*/	},	bindNavScrollBrowse : function() {	  this._container.bind("mousewheel.jPages DOMMouseScroll.jPages", this.bind(function(evt) {		var newPage = (evt.originalEvent.wheelDelta || -evt.originalEvent.detail) > 0 ?		(this._currentPageNum - 1) : (this._currentPageNum + 1);		if (this.validNewPage(newPage)) {		  this._clicked = true;		  this.paginate(newPage);		}		evt.preventDefault();		return false;	  }, this));	},	getNewPage : function(nav, target) {	  if (target.is(nav.currentPage)) return this._currentPageNum;	  if (target.is(nav.pages)) return nav.pages.index(target) + 1;	  if (target.is(nav.first)) return 1;	  if (target.is(nav.last)) return this._numPages;	  if (target.is(nav.previous)) return nav.pages.index(nav.currentPage);	  if (target.is(nav.next)) return nav.pages.index(nav.currentPage) + 2;	},	validNewPage : function(newPage) {	  return newPage !== this._currentPageNum && newPage > 0 && newPage <= this._numPages;	},	paginate : function(page) {	  var itemRange, pageInterval;	  itemRange = this.updateItems(page);	  pageInterval = this.updatePages(page);	  this._currentPageNum = page;	  if ($.isFunction(this.options.callback))		this.callback(page, itemRange, pageInterval);	  this.updatePause();	},	updateItems : function(page) {	  var range = this.getItemRange(page);	  this._itemsHiding = this._itemsShowing;	  this._itemsShowing = this._items.slice(range.start, range.end);	  if (this._cssAnimSupport && this.options.animation.length) this.cssAnimations(page);	  else this.jQAnimations(page);	  return range;	},	getItemRange : function(page) {	  var range = {};	  range.start = (page - 1) * this.options.perPage;	  range.end = range.start + this.options.perPage;	  if (range.end > this._items.length) range.end = this._items.length;	  return range;	},	cssAnimations : function(page) {	  clearInterval(this._delay);	  this._itemsHiding		.removeClass(this.options.animation + " jp-invisible")		.addClass("jp-hidden");	  this._itemsShowing		.removeClass("jp-hidden")		.addClass("jp-invisible");	  this._itemsOriented = this.getDirectedItems(page);	  this._index = 0;	  this._delay = setInterval(this.bind(function() {		if (this._index === this._itemsOriented.length) clearInterval(this._delay);		else {		  this._itemsOriented		  .eq(this._index)		  .removeClass("jp-invisible")		  .addClass(this.options.animation);		}		this._index = this._index + 1;	  }, this), this.options.delay);	},	jQAnimations : function(page) {	  clearInterval(this._delay);	  this._itemsHiding.addClass("jp-hidden");	  this._itemsShowing.fadeTo(0, 0).removeClass("jp-hidden");	  this._itemsOriented = this.getDirectedItems(page);	  this._index = 0;	  this._delay = setInterval(this.bind(function() {		if (this._index === this._itemsOriented.length) clearInterval(this._delay);		else {		  this._itemsOriented		  .eq(this._index)		  .fadeTo(this.options.fallback, 1);		}		this._index = this._index + 1;	  }, this), this.options.delay);	},	getDirectedItems : function(page) {	  var itemsToShow;	  switch (this.options.direction) {		case "backwards":		  itemsToShow = $(this._itemsShowing.get().reverse());		  break;		case "random":		  itemsToShow = $(this._itemsShowing.get().sort(function() {			return (Math.round(Math.random()) - 0.5);		  }));		  break;		case "auto":		  itemsToShow = page >= this._currentPageNum ?		  this._itemsShowing : $(this._itemsShowing.get().reverse());		  break;		default:		  itemsToShow = this._itemsShowing;	  }	  return itemsToShow;	},	updatePages : function(page) {	  var interval, index, nav;	  interval = this.getInterval(page);	  for (index in this._nav) {		if (this._nav.hasOwnProperty(index)) {		  nav = this._nav[index];		  this.updateBtns(nav, page);		  this.updateCurrentPage(nav, page);		  this.updatePagesShowing(nav, interval);		  this.updateBreaks(nav, interval);		}	  }	  return interval;	},	getInterval : function(page) {	  var neHalf, upperLimit, start, end;	  neHalf = Math.ceil(this.options.midRange / 2);	  upperLimit = this._numPages - this.options.midRange;	  start = page > neHalf ? Math.max(Math.min(page - neHalf, upperLimit), 0) : 0;	  end = page > neHalf ?		Math.min(page + neHalf - (this.options.midRange % 2 > 0 ? 1 : 0), this._numPages) :		Math.min(this.options.midRange, this._numPages);	  return {start: start,end: end};	},	updateBtns : function(nav, page) {	  if (page === 1) {		nav.first.addClass("jp-disabled");		nav.previous.addClass("jp-disabled");	  }	  if (page === this._numPages) {		nav.next.addClass("jp-disabled");		nav.last.addClass("jp-disabled");	  }	  if (this._currentPageNum === 1 && page > 1) {		nav.first.removeClass("jp-disabled");		nav.previous.removeClass("jp-disabled");	  }	  if (this._currentPageNum === this._numPages && page < this._numPages) {		nav.next.removeClass("jp-disabled");		nav.last.removeClass("jp-disabled");	  }	},	updateCurrentPage : function(nav, page) {	  nav.currentPage.removeClass("jp-current");	  nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");	},	updatePagesShowing : function(nav, interval) {	  var newRange = nav.pages.slice(interval.start, interval.end).not(nav.permPages);	  nav.pagesShowing.not(newRange).addClass("jp-hidden");	  newRange.not(nav.pagesShowing).removeClass("jp-hidden");	  nav.pagesShowing = newRange;	},	updateBreaks : function(nav, interval) {	  if (		interval.start > this.options.startRange ||		(this.options.startRange === 0 && interval.start > 0)	  ) nav.fstBreak.removeClass("jp-hidden");	  else nav.fstBreak.addClass("jp-hidden");	  if (interval.end < this._numPages - this.options.endRange) nav.lstBreak.removeClass("jp-hidden");	  else nav.lstBreak.addClass("jp-hidden");	},	callback : function(page, itemRange, pageInterval) {	  var pages = {			current: page,			interval: pageInterval,			count: this._numPages		  },		  items = {			showing: this._itemsShowing,			oncoming: this._items.slice(itemRange.start + this.options.perPage, itemRange.end + this.options.perPage),			range: itemRange,			count: this._items.length		  };	  pages.interval.start = pages.interval.start + 1;	  items.range.start = items.range.start + 1;	  this.options.callback(pages, items);	},	updatePause : function() {	  if (this.options.pause && this._numPages > 1) {		clearTimeout(this._pause);		if (this.options.clickStop && this._clicked) return;		else {		  this._pause = setTimeout(this.bind(function() {			this.paginate(this._currentPageNum !== this._numPages ? this._currentPageNum + 1 : 1);		  }, this), this.options.pause);		}	  }	},	setMinHeight : function() {	  if (this.options.minHeight && !this._container.is("table, tbody")) {		setTimeout(this.bind(function() {		  this._container.css({ "min-height": this._container.css("height") });		}, this), 1000);	  }	},	bind : function(fn, me) {	  return function() {		return fn.apply(me, arguments);	  };	},	destroy : function() {	  this.jQdocument.unbind("keydown.jPages");	  this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");	  if (this.options.minHeight) this._container.css("min-height", "");	  if (this._cssAnimSupport && this.options.animation.length)		this._items.removeClass("animated jp-hidden jp-invisible " + this.options.animation);	  else this._items.removeClass("jp-hidden").fadeTo(0, 1);	  this._holder.unbind("click.jPages").empty();	}  };  $.fn[name] = function(arg) {	var type = $.type(arg);	if (type === "object") {	  if (this.length && !$.data(this, name)) {		instance = new Plugin(this, arg);		this.each(function() {		  $.data(this, name, instance);		});	  }	  return this;	}	if (type === "string" && arg === "destroy") {	  instance.destroy();	  this.each(function() {		$.removeData(this, name);	  });	  return this;	}	if (type === 'number' && arg % 1 === 0) {	  if (instance.validNewPage(arg)) instance.paginate(arg);	  return this;	}	return this;  };})(jQuery, window, document);

[niche]

If I understand you correctly, why not use an anchor?

[paul1]

The problem I am having is that the function is calling jpages,

$(function() {      /* initiate plugin */    $("div.holder").jPages({	  containerID: "itemContainer"    });  });

Can I use something like this that would also scroll to ID at the top of the page, or would this have to be incorporated into jpages above.

[justsomeguy]

It looks like you can pass a function as an option called callback, which will get executed each time a new page is loaded. You can have that function scroll to wherever you want to scroll.

[paul1]

Thanks, will the callback function be incorporated in the jquery plugin or will I have to incorporate this into jpages. The issue also is that at the moment if I use the scroll top method, anything on the page that is being clicked will scroll to the top, except the pagination $("div.holder"), so if I am correct I would need --- the plugin then a call back function to a scroll top function.

[paul1]

Sorry I get what you mean now there is a callback function in jpages already undefined, can I use that function in jpages to scroll to the top of a page. Thanks.

[paul1]

If anybody is using jpages and wants the page to scroll to the top input this scroll back method in callback on jpages

callback: function( pages, items ){	    $('html').animate({scrollTop:0}, 'slow');//IE, FF	    $('body').animate({scrollTop:0}, 'slow');//chrome,	    }

Please can anyone let me know if there is a better method or if there could be any problems with this. Thanks for pointing me in the right direction again.

[ospc]

Hi Paul,

 

I'm new with jquery...Can you tell me where exactly you place your script callback into jpages.js? Please advise. Thanks

[justsomeguy]

That code doesn't go in jpages.js, it goes in the code that uses jpages, like the code in post 3. When you use jpages you pass an object with a set of options, and the callback can be one of the options.

[ospc]

I got it now . Thanks so much for quick reply. I really appreciate it.