We Keep Coding

Javascript prevent click fire when drag happens

I am using this code for dragging container left / right. This works well. User can also click on the "thumb". The problem is that click happens also after drag. It should be either drag or click. How can I isolate one or another? It has to work on tablets of course.
var thumbContainer = document.querySelector('.aplbox-thumb-container'),
thumbContainerWrap = document.querySelector('.aplbox-thumb-container-wrap'),
startXThumb,
startTouchThumb
if ("ontouchstart" in window) {
thumbContainer.addEventListener("touchstart", dragStartThumb);
}
thumbContainer.addEventListener("mousedown", dragStartThumb);
function dragStartThumb(e) {
if (e.preventDefault) e.preventDefault();
e.stopPropagation()
if (!startTouchThumb) {
startTouchThumb = true;
document.addEventListener('mousemove', dragMoveThumb)
document.addEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.addEventListener('touchmove', dragMoveThumb)
document.addEventListener('touchend', dragEndThumb);
}
var point;
if (e.type == 'touchstart') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var currX = thumbContainer.style.transform.replace(/[^\d.]/g, '');
currX = parseInt(currX) || 0;
startXThumb = point.pageX + currX;
}
}
function dragMoveThumb(e) {
if (startTouchThumb) {
var point;
if (e.type == 'touchmove') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var diff = point.pageX - startXThumb;
if (diff > 0) diff = 0;
else if (diff < -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth) diff = -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth;
thumbContainer.style.transform = 'translateX(' + diff + 'px)';
}
}
function dragEndThumb(e) {
e.stopPropagation()
if (startTouchThumb) {
startTouchThumb = false;
document.removeEventListener('mousemove', dragMoveThumb)
document.removeEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.removeEventListener('touchmove', dragMoveThumb)
document.removeEventListener('touchend', dragEndThumb);
}
}
}
//click thumb
thumbContainerWrap.addEventListener('click', function(e) {
if (e.target.closest('.aplbox-thumb')) {
console.log('click')
}
})
.aplbox-thumb-container-wrap {
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
width: 100%;
height: 100px;
overflow: hidden;
box-sizing: border-box;
}
.aplbox-thumb-container {
position: relative;
padding: 5px 0;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(0);
touch-action: none;
}
.aplbox-thumb {
width: 100px;
height: 70px;
margin-right: 5px;
box-sizing: border-box;
background: #333;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 5px;
}
<div class="aplbox-thumb-container-wrap">
<div class="aplbox-thumb-container" style="width: 1300px;">
<div class="aplbox-thumb" data-id="0"></div>
<div class="aplbox-thumb" data-id="1"></div>
<div class="aplbox-thumb" data-id="2"></div>
<div class="aplbox-thumb" data-id="3"></div>
<div class="aplbox-thumb" data-id="4"></div>
<div class="aplbox-thumb" data-id="5"></div>
<div class="aplbox-thumb" data-id="6"></div>
<div class="aplbox-thumb" data-id="7"></div>
<div class="aplbox-thumb" data-id="8"></div>
<div class="aplbox-thumb" data-id="9"></div>
<div class="aplbox-thumb" data-id="10"></div>
<div class="aplbox-thumb" data-id="11"></div>
</div>
</div>

Declare the variable moved. In the dragStartThumb function set this variable to false, and in the dragMoveThumb function set it to true and in the onclick event check this variable. Like below. Something like #Amirhoseinh73 wrote, but instead of setting the flag to true in the touchend function we set the flag to true in the mousemove function, because we don't want have always variable set to true.
var thumbContainer = document.querySelector('.aplbox-thumb-container'),
thumbContainerWrap = document.querySelector('.aplbox-thumb-container-wrap'),
startXThumb,
startTouchThumb
let moved = false;
if ("ontouchstart" in window) {
thumbContainer.addEventListener("touchstart", dragStartThumb);
}
thumbContainer.addEventListener("mousedown", dragStartThumb);
function dragStartThumb(e) {
moved = false;
//if (e.preventDefault) e.preventDefault();
e.stopPropagation()
if (!startTouchThumb) {
startTouchThumb = true;
document.addEventListener('mousemove', dragMoveThumb)
document.addEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.addEventListener('touchmove', dragMoveThumb)
document.addEventListener('touchend', dragEndThumb);
}
var point;
if (e.type == 'touchstart') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
//e.preventDefault();
} else {
point = e;
//e.preventDefault();
}
var currX = thumbContainer.style.transform.replace(/[^\d.]/g, '');
currX = parseInt(currX) || 0;
startXThumb = point.pageX + currX;
}
}
function dragMoveThumb(e) {
moved = true;
if (startTouchThumb) {
var point;
if (e.type == 'touchmove') {
var touches = e.changedTouches;
if (touches.length > 1) {
return false;
}
point = touches[0];
e.preventDefault();
} else {
point = e;
e.preventDefault();
}
var diff = point.pageX - startXThumb;
if (diff > 0) diff = 0;
else if (diff < -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth) diff = -thumbContainer.offsetWidth + thumbContainerWrap.offsetWidth;
thumbContainer.style.transform = 'translateX(' + diff + 'px)';
}
}
function dragEndThumb(e) {
e.stopPropagation()
if (startTouchThumb) {
startTouchThumb = false;
document.removeEventListener('mousemove', dragMoveThumb)
document.removeEventListener('mouseup', dragEndThumb);
if ("ontouchstart" in window) {
document.removeEventListener('touchmove', dragMoveThumb)
document.removeEventListener('touchend', dragEndThumb);
}
}
}
//click thumb
thumbContainerWrap.addEventListener('click', function(e) {
if (e.target.closest('.aplbox-thumb') && !moved) {
console.log('click')
}
})
.aplbox-thumb-container-wrap {
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
width: 100%;
height: 100px;
overflow: hidden;
box-sizing: border-box;
}
.aplbox-thumb-container {
position: relative;
padding: 5px 0;
height: 100%;
display: flex;
flex-direction: row;
transform: translateX(0);
touch-action: none;
}
.aplbox-thumb {
width: 100px;
height: 70px;
margin-right: 5px;
box-sizing: border-box;
background: #333;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 5px;
}
<div class="aplbox-thumb-container-wrap">
<div class="aplbox-thumb-container" style="width: 1300px;">
<div class="aplbox-thumb" data-id="0"></div>
<div class="aplbox-thumb" data-id="1"></div>
<div class="aplbox-thumb" data-id="2"></div>
<div class="aplbox-thumb" data-id="3"></div>
<div class="aplbox-thumb" data-id="4"></div>
<div class="aplbox-thumb" data-id="5"></div>
<div class="aplbox-thumb" data-id="6"></div>
<div class="aplbox-thumb" data-id="7"></div>
<div class="aplbox-thumb" data-id="8"></div>
<div class="aplbox-thumb" data-id="9"></div>
<div class="aplbox-thumb" data-id="10"></div>
<div class="aplbox-thumb" data-id="11"></div>
</div>
</div>

How can I change li color when the navbar become sticky?

I would like to change the color of links on my Navbar when the position becomes sticky. ("links-color") is a css class to replace the existing classes on li's.
The code for Sticky position is working already.
var customNav = document.querySelector(".navbarcontainer");
var mylinks = document.querySelectorAll(".nav-link");
var CustomSticky = customNav.offsetTop;
function myNav() {
console.log("CustomSticy= " + CustomSticky);
console.log("scrollY=" + window.scrollY);
if (window.scrollY >= CustomSticky) {
customNav.classList.add("sticky-navbar");
mylinks.classlist.add("links-color")
} else {
customNav.classList.remove("sticky-navbar ");
mylinks.classlist.remove("links-color")
}
}
window.addEventListener('scroll', myNav);

Try this:
var $header = $('header');
var $sticky = $header.before($header.clone().addClass("sticky"));
$(window).on("scroll", function(){
var scrollFromTop = $(window).scrollTop();
$("body").toggleClass("scroll", (scrollFromTop > 100));
});
header.sticky ul li a {
color: red;
}
body.scroll header.sticky {
transform: translateY(0);
}
header.sticky {
position: sticky;
top: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.85);
z-index: 5;
}
<header>
<nav class="nav-wrapper">
<div class="logo">
<a href="#">
logo
</a>
</div>
<ul class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
</ul>
</nav>
</header>

if your dom elements are aligned --
.navbarcontainer.sticky-navbar -> ul -> li -> a.link-color
then
.sticky-navbar li{ color: red }

How to clone selected divs

Javascript report designer should allow to create copies of selected divs into same panel.
I tried to use
function DesignerClone() {
$(".ui-selected").each(function () {
var newDiv = $(this).prop('outerHTML'),
parentpanel = $(this).parent(".designer-panel-body");
parentpanel.prepend(newDiv);
});
}
but all divs are lost. and empty panel appears.
To reproduce, run code snippet and select some divs by mouse click.
After that press clone button.
How to clone boxes ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>
.designer-panel-body {
min-height: 1px;
overflow: hidden;
margin: 0;
padding: 0;
}
.panel-footer {
background-color: inherit;
}
.designer-panel,
.designer-resetmargins {
margin: 0;
padding: 0;
}
.designer-verticalline,
.designer-horizontalline,
.designer-rectangle {
font-size: 1pt;
border: 1px solid #000000;
}
.designer-field {
border: 1px solid lightgray;
white-space: pre;
overflow: hidden;
}
.ui-selecting {
background-color: lightskyblue;
color: white;
}
.ui-selected {
background-color: lightskyblue;
border-color: darkblue;
color: white;
}
.designer-label {
white-space: pre;
}
.designer-field,
.designer-label {
font-family: "Times New Roman";
font-size: 10pt;
z-index: 2;
}
.designer-verticalline,
.designer-horizontalline,
.designer-rectangle,
.designer-field,
.designer-image,
.designer-label {
position: absolute;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
function DesignerClone() {
$(".ui-selected").each(function () {
var newDiv = $(this).prop('outerHTML'),
parentpanel = $(this).parent(".designer-panel-body");
parentpanel.prepend(newDiv);
});
}
function getpos(e) {
return {
X: e.pageX,
Y: e.pageY
};
}
function Rect(start, stop) {
this.left = Math.min(start.X, stop.X);
this.top = Math.min(start.Y, stop.Y);
this.width = Math.abs(stop.X - start.X);
this.height = Math.abs(stop.Y - start.Y);
}
$(function () {
var startpos;
var selected = $([]),
offset = {
top: 0,
left: 0
};
$(".designer-verticalline, .designer-rectangle, .designer-field, .designer-image").resizable();
var $liigutatavad = $(".designer-verticalline, .designer-horizontalline, .designer-rectangle, .designer-field, .designer-image, .designer-label");
$liigutatavad.draggable({
start: function (event, ui) {
var $this = $(this);
if ($this.hasClass("ui-selected")) {
// if this is selected, attach current offset
// of each selected element to that element
selected = $(".ui-selected").each(function () {
var el = $(this);
el.data("offset", el.offset());
});
} else {
// if this is not selected, clear current selection
selected = $([]);
$liigutatavad.removeClass("ui-selected");
}
offset = $this.offset();
},
drag: function (event, ui) {
// drag all selected elements simultaneously
var dt = ui.position.top - offset.top,
dl = ui.position.left - offset.left;
selected.not(this).each(function () {
var $this = $(this);
var elOffset = $this.data("offset");
$this.css({
top: elOffset.top + dt,
left: elOffset.left + dl
});
});
}
});
// ...but manually implement selection to prevent interference from draggable()
$(".designer-panel-body").on("click", "div", function (e) {
if ( /*!e.metaKey &&*/ !e.shiftKey && !e.ctrlKey) {
// deselect other elements if meta/shift not held down
$(".designer-panel-body").removeClass("ui-selected");
$(this).addClass("ui-selected");
} else {
if ($(this).hasClass("ui-selected")) {
$(this).removeClass("ui-selected");
} else {
$(this).addClass("ui-selected");
}
}
});
$(".designer-panel-body").selectable({});
});
</script>
</head>
<body>
<button type="button" class="btn btn-default" onclick="javascript:false;DesignerClone()">
<span class="glyphicon glyphicon-paste"></span>
</button>
<div class='panel designer-panel'>
<div class='panel-body designer-panel-body panel-warning' style='height:4cm'>
<div class='designer-field' contenteditable='true' style='top:2.30cm;left:5.84cm;width:10.24cm;height:0.63cm;font-family:Arial;font-size:14pt;font-weight:bold;'>vnimi+' '+dok.tasudok</div>
<div class='designer-field' contenteditable='true' style='top:2.30cm;left:16.37cm;width:2.68cm;height:0.61cm;font-size:14pt;'>DOK.kuupaev</div>
<div class='rectangle' style='border-width: 1px;background-color:#FFFFFF;top:2.99cm;left:1.34cm;width:18.05cm;height:5.29cm'></div>
<div class='designer-field' contenteditable='true' style='top:3.01cm;left:1.53cm;width:9.71cm;height:0.55cm;font-size:12pt;'>m.FIRMA</div>
<div class='designer-field' contenteditable='true' style='top:3.01cm;left:12.13cm;width:3.13cm;height:0.53cm;font-size:12pt;'>ise.telefon</div>
</div>
<div class='bg-warning'>
<div class='panel-footer'><i class='glyphicon glyphicon-chevron-up'></i> GroupHeader 1: str(dokumnr)+str(koopia,2)</div>
</div>
</div>
</body>
</html>

.appendTo takes selected element and removes it from previous position in the DOM.
jQuery.clone() is what you might be looking for.

can't use scroll function correctly after click

I made a function that increment class on a li list everytime i scroll on the page, so now i want to make the function on click but there is a conflict, for example if i click and i want to scroll again the increment function stop, how can i fix it ?
var scrollable = $('ul li').length - 1,
count = 0,
allowTransition = true;
$('body').bind('mousewheel', function(e) {
if (allowTransition) {
allowTransition=false;
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--
} else {
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++
} else {
return false;
}
}
setTimeout(function() {
allowTransition=true;
}, 1000);
}
});
$('ul li').on('click', function() {
$('ul li').removeClass('active');
$(this).addClass('active');
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>

here is a working script http://codepen.io/mozzi/pen/oLWZjY
you needed to reset allowTransition flag andd update the current count
var scrollable = $('ul li').length - 1,
count = 0,
allowTransition = true;
$('body').bind('mousewheel', function(e) {
//alert(count);
if (allowTransition) {
allowTransition=false;
if (e.originalEvent.wheelDelta / 120 > 0) {
if (scrollable >= count && count > 0) {
$('.active').removeClass('active').prev().addClass('active');
count--;
} else {
allowTransition=true;
return false;
}
} else {
if (scrollable > count) {
$('.active').removeClass('active').next().addClass('active');
count++;
} else {
allowTransition=true;
return false;
}
}
setTimeout(function() {
allowTransition=true;
}, 1000);
}
});
$('ul li').on('click', function() {
$('ul li').removeClass('active');
$(this).addClass('active');
count = $(this).attr('count');
allowTransition=true;
});
body{
overflow:hidden;
}
ul li {
height: 20px;
width: 20px;
background: blue;
margin: 5px;
list-style: none
}
ul li.active {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active" count='0'></li>
<li count='1'></li>
<li count='2'></li>
<li count='3'></li>
</ul>

How to customize pagination jQuery?

In my project I'm using jqPagination plugin. I really like the functionality, but I was wondering if it's possible to customize it in the way that max-page number always appears outside of the input box. Here is my link to the jsfiddle https://jsfiddle.net/webIra7/hqz90Lwj/1/
<div class="some-container">
<div class="loaded-page">First page </div>
<div class="loaded-page">Second page</div>
<div class="loaded-page">Third page</div>
</div>
<div class="gigantic pagination">
‹
<input class="pagenumber" type="text" readonly="readonly" />
›
</div>

You can access to plugin properties like this:
($('.pagination').jqPagination('option', 'max_page'))
Check the fiddle to see it working: https://jsfiddle.net/ivan0013/hqz90Lwj/5/

According to the customization section of the documentation for the jqPagination plugin, you can pass a page_string to the options. The default value is 'Page {current_page} of {max_page}'.
You could change the page_string in the options to be just 'Page {current_page}', then put the max page number in a separate HTML element outside of the pagination element.
See updated fiddle here.

You can calculate the maxPageNumber outside the jqPagination object and set this value to a span element after the next button.
To change the page format string you can use:
page_string: 'Page {current_page}',
Do not copy or include the src code of plugin, you may include it with:
<script src="https://rawgit.com/beneverard/jqPagination/master/js/jquery.jqpagination.min.js"></script>
The snippet:
$(document).ready(function () {
// hide all but the first of our paragraphs
$('.some-container div.loaded-page:not(:first)').hide();
// compute the maxPageNumber
var maxPageNumber = $('.some-container div.loaded-page').length;
// set this value as you wish:
$('#maxPageNumber').text(maxPageNumber);
// initialize the jqPagination
$('.pagination').jqPagination({
max_page: maxPageNumber,
page_string: 'Page {current_page}', // change the string format
paged: function (page) {
// a new 'page' has been requested
// hide all paragraphs
$('.some-container div.loaded-page').hide();
// but show the one we want
$($('.some-container div.loaded-page')[page - 1]).show();
}
});
});
.pagenumber::-ms-clear {
width: 0;
height: 0;
}
.pagination {
display: inline-block;
border-radius: 3px;
}
.pagination a {
display: block;
float: left;
width: 20px;
height: 20px;
outline: none;
border-right: 1px solid #CDCDCD;
border-left: 1px solid #CDCDCD;
color: #555555;
vertical-align: middle;
text-align: center;
text-decoration: none;
font-size: 15px;
font-family: Helvetica, Arial, sans-serif;
/* ATTN: need a better font stack */
background-color: #f3f3f3;
}
.pagination a:hover, .pagination a:focus, .pagination a:active {
background-color: #006699;
color: white;
border: 1px solid #cdcdcd;
}
.pagination a.previous:hover, .pagination a.previous:focus, .pagination a.previous:active, .pagination a.next:hover,
.pagination a.next:focus, .pagination a.next:active, .pagination a.disabled, .pagination a.disabled:hover,
.pagination a.disabled:focus, .pagination a.disabled:active {
background-color: #006699;
color: #A8A8A8;
cursor: default;
color: white;
}
.pagination a:first-child {
border: none;
border-radius: 2px 0 0 2px;
}
.pagination a:last-child {
border: none;
border-radius: 0 2px 2px 0;
}
.pagination input {
float: left;
margin: 0;
padding: 0;
width: 115px;
height: 20px;
outline: none;
border: none;
vertical-align: middle;
text-align: center;
}
/* gigantic class for demo purposes */
.gigantic.pagination {
margin: 0;
}
.gigantic.pagination a {
font-size: 30px;
background-color: #eee;
border-radius: 0;
color: #006699;
float: left;
height: 35px;
width: 35px;
line-height: 30px;
border: solid 1px #ccc;
}
.gigantic.pagination input {
width: 120px;
font-size: 15px;
font-family: Helvetica, Arial, sans-serif;
margin: 0;
padding: 7px 0;
}
/* log element for demo purposes */
.log {
display: none;
background-color: #EDEDED;
height: 300px;
width: 524px;
overflow: auto;
margin-left: 0;
list-style: none;
padding: 10px;
}
.log li {
margin-top: 0;
margin-bottom: 5px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://rawgit.com/beneverard/jqPagination/master/js/jquery.jqpagination.min.js"></script>
<div class="some-container">
<div class="loaded-page">First page </div>
<div class="loaded-page">Second page</div>
<div class="loaded-page">Third page</div>
</div>
<div class="gigantic pagination">
‹
<input class="pagenumber" type="text" readonly="readonly" />
›
<span id="maxPageNumber" style='margin-top: 1.00em;margin-left:1.25em; display:inline-block;'/>
</div>

HTML:
<div class="some-container">
<div class="loaded-page">First page </div>
<div class="loaded-page">Second page</div>
<div class="loaded-page">Third page</div>
</div>
<div class="gigantic pagination">
‹
<input class="pagenumber" type="text" readonly="readonly" />
›
<input class="maxPageNumber" type="text" readonly="readonly" id="maxPag" />
</div>
JS:
(function(e) {
"use strict";
e.jqPagination = function(t, n) {
var r = this;
r.$el = e(t);
r.el = t;
r.$input = r.$el.find(".pagenumber");
r.$el.data("jqPagination", r);
r.init = function() {
r.options = e.extend({}, e.jqPagination.defaultOptions, n);
r.options.max_page === null && (r.$input.data("max-page") !== undefined ? r.options.max_page = r.$input.data("max-page") : r.options.max_page = 1);
r.$input.data("current-page") !== undefined && r.isNumber(r.$input.data("current-page")) && (r.options.current_page = r.$input.data("current-page"));
r.$input.removeAttr("readonly");
r.updateInput(!0);
r.$input.on("focus.jqPagination mouseup.jqPagination", function(t) {
if (t.type === "focus") {
var n = parseInt(r.options.current_page, 10);
e(this).val(n).select()
}
if (t.type === "mouseup") return !1
});
r.$input.on("blur.jqPagination keydown.jqPagination", function(t) {
var n = e(this),
i = parseInt(r.options.current_page, 10);
if (t.keyCode === 27) {
n.val(i);
n.blur()
}
t.keyCode === 13 && n.blur();
t.type === "blur" && r.setPage(n.val())
});
r.$el.on("click.jqPagination", "a", function(t) {
var n = e(this);
if (n.hasClass("disabled")) return !1;
if (!t.metaKey && !t.ctrlKey) {
t.preventDefault();
r.setPage(n.data("action"))
}
})
};
r.setPage = function(e, t) {
if (e === undefined) return r.options.current_page;
var n = parseInt(r.options.current_page, 10),
i = parseInt(r.options.max_page, 10);
if (isNaN(parseInt(e, 10))) switch (e) {
case "first":
e = 1;
break;
case "prev":
case "previous":
e = n - 1;
break;
case "next":
e = n + 1;
break;
case "last":
e = i
}
e = parseInt(e, 10);
if (isNaN(e) || e < 1 || e > i) {
r.setInputValue(n);
return !1
}
r.options.current_page = e;
r.$input.data("current-page", e);
r.updateInput(t)
};
r.setMaxPage = function(e, t) {
if (e === undefined) return r.options.max_page;
if (!r.isNumber(e)) {
console.error("jqPagination: max_page is not a number");
return !1
}
if (e < r.options.current_page) {
console.error("jqPagination: max_page lower than current_page");
return !1
}
r.options.max_page = e;
r.$input.data("max-page", e);
r.updateInput(t)
};
r.updateInput = function(e) {
var t = parseInt(r.options.current_page, 10);
r.setInputValue(t);
r.setLinks(t);
e !== !0 && r.options.paged(t)
};
r.setInputValue = function(e) {
var t = r.options.page_string,
n = r.options.max_page;
t = t.replace("{current_page}", e).replace("{max_page}", n);
r.$input.val(t);
$("#maxPag").val("of " + n);
};
r.isNumber = function(e) {
return !isNaN(parseFloat(e)) && isFinite(e)
};
r.setLinks = function(e) {
var t = r.options.link_string,
n = parseInt(r.options.current_page, 10),
i = parseInt(r.options.max_page, 10);
if (t !== "") {
var s = n - 1;
s < 1 && (s = 1);
var o = n + 1;
o > i && (o = i);
r.$el.find("a.first").attr("href", t.replace("{page_number}", "1"));
r.$el.find("a.prev, a.previous").attr("href", t.replace("{page_number}", s));
r.$el.find("a.next").attr("href", t.replace("{page_number}", o));
r.$el.find("a.last").attr("href", t.replace("{page_number}", i))
}
r.$el.find("a").removeClass("disabled");
n === i && r.$el.find(".next, .last").addClass("disabled");
n === 1 && r.$el.find(".previous, .first").addClass("disabled")
};
r.callMethod = function(t, n, i) {
switch (t.toLowerCase()) {
case "option":
if (i === undefined && typeof n != "object") return r.options[n];
var s = {
trigger: !0
},
o = !1;
e.isPlainObject(n) && !i ? e.extend(s, n) : s[n] = i;
var u = s.trigger === !1;
s.current_page !== undefined && (o = r.setPage(s.current_page, u));
s.max_page !== undefined && (o = r.setMaxPage(s.max_page, u));
o === !1 && console.error("jqPagination: cannot get / set option " + n);
return o;
case "destroy":
r.$el.off(".jqPagination").find("*").off(".jqPagination");
break;
default:
console.error('jqPagination: method "' + t + '" does not exist');
return !1
}
};
r.init()
};
e.jqPagination.defaultOptions = {
current_page: 1,
link_string: "",
max_page: null,
page_string: "Page {current_page}",
page_string2: "of {max_page}",
paged: function() {}
};
e.fn.jqPagination = function() {
var t = this,
n = e(t),
r = Array.prototype.slice.call(arguments),
i = !1;
if (typeof r[0] == "string") {
r[2] === undefined ? i = n.first().data("jqPagination").callMethod(r[0], r[1]) : n.each(function() {
i = e(this).data("jqPagination").callMethod(r[0], r[1], r[2]);
});
return i
}
t.each(function() {
new e.jqPagination(this, r[0])
})
}
})(jQuery);
if (!console) {
var console = {},
func = function() {
return !1
};
console.log = func;
console.info = func;
console.warn = func;
console.error = func
};
$(document).ready(function() {
// hide all but the first of our paragraphs
$('.some-container div.loaded-page:not(:first)').hide();
$('.pagination').jqPagination({
max_page : $('.some-container div.loaded-page').length,
paged : function(page) {
// a new 'page' has been requested
// hide all paragraphs
$('.some-container div.loaded-page').hide();
// but show the one we want
$($('.some-container div.loaded-page')[page - 1]).show();
}
});
$('.pagination2').jqPagination({
max_page : $('.some-container div.loaded-page').length,
paged : function(page) {
// a new 'page' has been requested
// hide all paragraphs
$('.some-container div.loaded-page').hide();
// but show the one we want
$($('.some-container div.loaded-page')[page - 1]).show();
}
});
});
CSS:
.pagenumber::-ms-clear{
width: 0;
height: 0;
}
.pagination{
display: inline-block;
border-radius: 3px;
}
I include <input class="maxPageNumber" type="text" readonly="readonly" id="maxPag" /> change page_string: "Page {current_page} of {max_page}" to page_string: "Page {current_page}", page_string2: "of {max_page}" and include $("#maxPag").val("of" + n);