I have a js pagination system that find .classname elems and paginate them on-the-fly. Clicking on navigation pages the script shows only .classname elements in that interval.
When too much items have to be paginated I would like to add an arrow system to let navigate pages links. The main script is here: https://jsfiddle.net/gyzo2u9c/
(function($) {
var pagify = {
items: {},
container: null,
totalPages: 1,
perPage: 3,
currentPage: 0,
createNavigation: function() {
this.totalPages = Math.ceil(this.items.length / this.perPage);
$('.pagination', this.container.parent()).remove();
var pagination = $('<div class="pagination"></div>').append('<a class="nav prev disabled" data-next="false"><i class="fas fa-caret-left"></i></a>');
for (var i = 0; i < this.totalPages; i++) {
var pageElClass = "page";
if (!i)
pageElClass = "page current";
var pageEl = '<a class="' + pageElClass + '" data-page="' + (
i + 1) + '">' + (
i + 1) + "</a>";
pagination.append(pageEl);
}
pagination.append('<a class="nav next" data-next="true"><i class="fas fa-caret-right"></i></a>');
/*aggiungiamo la paginazione sopra nel calendario*/
if ($(this.container).selector == '#calendario .archivio') {
this.container.before(pagination);
} else {
/*sotto, in tutti gli altri casi*/
this.container.after(pagination);
}
var that = this;
$("body").off("click", ".nav");
this.navigator = $("body").on("click", ".nav", function() {
var el = $(this);
that.navigate(el.data("next"));
});
$("body").off("click", ".page");
this.pageNavigator = $("body").on("click", ".page", function() {
var el = $(this);
that.goToPage(el.data("page"));
$([document.documentElement, document.body]).animate({
scrollTop: ($(".archivio").offset().top - 120)
}, 1);
});
},
navigate: function(next) {
// default perPage to 5
if (isNaN(next) || next === undefined) {
next = true;
}
$(".pagination .nav").removeClass("disabled");
if (next) {
this.currentPage++;
if (this.currentPage > (this.totalPages - 1))
this.currentPage = (this.totalPages - 1);
if (this.currentPage == (this.totalPages - 1))
$(".pagination .nav.next").addClass("disabled");
} else {
this.currentPage--;
if (this.currentPage < 0)
this.currentPage = 0;
if (this.currentPage == 0)
$(".pagination .nav.prev").addClass("disabled");
}
this.showItems();
},
updateNavigation: function() {
var pages = $(".pagination .page");
pages.removeClass("current");
$('.pagination .page[data-page="' + (
this.currentPage + 1) + '"]').addClass("current");
},
goToPage: function(page) {
this.currentPage = page - 1;
$(".pagination .nav").removeClass("disabled");
if (this.currentPage == (this.totalPages - 1))
$(".pagination .nav.next").addClass("disabled");
if (this.currentPage == 0)
$(".pagination .nav.prev").addClass("disabled");
this.showItems();
},
showItems: function() {
this.items.hide().removeClass('item_visibile');
var base = this.perPage * this.currentPage;
this.items.slice(base, base + this.perPage).show().addClass('item_visibile');
this.updateNavigation();
},
init: function(container, items, perPage, currentPage) {
// default perPage to 5
if (isNaN(currentPage) || currentPage === undefined) {
currentPage = 0;
}
this.container = container;
this.currentPage = currentPage;
this.totalPages = 1;
this.perPage = perPage;
this.items = items;
this.createNavigation();
this.showItems();
}
};
// stuff it all into a jQuery method!
$.fn.pagify = function(perPage, itemSelector, currentPage) {
var el = $(this);
var items = $(itemSelector, el);
// default perPage to 5
if (isNaN(perPage) || perPage === undefined) {
perPage = 3;
}
// don't fire if fewer items than perPage
if (items.length <= perPage) {
return true;
}
pagify.init(el, items, perPage, currentPage);
};
})(jQuery);
jQuery(".archive").pagify(2, ".item");
How/Where I have to add the arrow alghoritm?
Thank you in advanced
Solution:
(function($) {
var pagify = {
items: {},
container: null,
totalPages: 1,
perPage: 3,
currentPage: 0,
nextpageInterval: 20,
createNavigation: function() {
this.generateUI();
var that = this;
$("body").off("click", ".nav");
this.navigator = $("body").on("click", ".nav", function() {
var el = $(this);
that.navigate(el.data("next"));
});
$("body").off("click", ".page");
this.pageNavigator = $("body").on("click", ".page", function() {
var el = $(this);
that.goToPage(el.data("page"));
$([document.documentElement, document.body]).animate({
scrollTop: ($(".archivio").offset().top-120)
}, 1);
});
},
getPageList: function(totalPages, page, maxLength) {
if (maxLength < 5) throw "maxLength must be at least 5";
function range(start, end) {
return Array.from(Array(end - start + 1), (_, i) => i + start);
}
var sideWidth = 1;
var leftWidth = (maxLength - sideWidth*2 - 3) >> 1;
var rightWidth = (maxLength - sideWidth*2 - 2) >> 1;
if (totalPages <= maxLength) {
// no breaks in list
return range(1, totalPages);
}
if (page <= maxLength - sideWidth - 1 - rightWidth) {
// no break on left of page
return range(1, maxLength - sideWidth - 1)
.concat(0, range(totalPages - sideWidth + 1, totalPages));
}
if (page >= totalPages - sideWidth - 1 - rightWidth) {
// no break on right of page
return range(1, sideWidth)
.concat(0, range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
}
// Breaks on both sides
return range(1, sideWidth)
.concat(0, range(page - leftWidth, page + rightWidth),
0, range(totalPages - sideWidth + 1, totalPages));
},
generateUI: function(){
this.totalPages = Math.ceil(this.items.length / this.perPage);
var pages = this.getPageList(this.totalPages, this.currentPage, this.nextpageInterval);
$('.pagination', this.container.parent()).remove();
var pagination = $('<div class="pagination"></div>');
for (var i = 0; i < pages.length; i++) {
var pageElClass = "page";
if (pages[i] == (this.currentPage + 1)){
pageElClass = "page current";
}
if(pages[i] != 0){
var lbl = pages[i];
if(i == 0 && pages[i + 1] == 0){
lbl = '<i class="fas fa-step-backward"></i>';
}else if(i == (pages.length-1) && pages[i - 1] == 0){
lbl = '<i class="fas fa-step-forward"></i>';
}
var pageEl = '<a class="' + pageElClass + '" data-page="' + (
pages[i]) + '">' + (
lbl) + "</a>";
pagination.append(pageEl);
}else{
if(i == 1){
var prevEl = '<a class="nav prev disabled" data-next="false"><i class="fas fa-caret-left"></i></a>';
pagination.append(prevEl);
}else{
var nextEl = '<a class="nav next" data-next="true"><i class="fas fa-caret-right"></i></a>';
pagination.append(nextEl);
}
}
}
/*aggiungiamo la paginazione sopra nel calendario*/
if ($(this.container).selector == '#calendario .archivio'){
this.container.before(pagination);
} else {
/*sotto, in tutti gli altri casi*/
this.container.after(pagination);
}
},
navigate: function(next) {
// default perPage to 5
if (isNaN(next) || next === undefined) {
next = true;
}
$(".pagination .nav").removeClass("disabled");
if (next) {
this.currentPage++;
if (this.currentPage > (this.totalPages - 1))
this.currentPage = (this.totalPages - 1);
if (this.currentPage == (this.totalPages - 1))
$(".pagination .nav.next").addClass("disabled");
}
else {
this.currentPage--;
if (this.currentPage < 0)
this.currentPage = 0;
if (this.currentPage == 0)
$(".pagination .nav.prev").addClass("disabled");
}
this.showItems();
},
updateNavigation: function() {
var pages = $(".pagination .page");
pages.removeClass("current");
$('.pagination .page[data-page="' + (
this.currentPage + 1) + '"]').addClass("current");
this.generateUI();
},
goToPage: function(page) {
this.currentPage = page - 1;
$(".pagination .nav").removeClass("disabled");
if (this.currentPage == (this.totalPages - 1))
$(".pagination .nav.next").addClass("disabled");
if (this.currentPage == 0)
$(".pagination .nav.prev").addClass("disabled");
this.showItems();
},
showItems: function() {
this.items.hide().removeClass('item_visibile');
var base = this.perPage * this.currentPage;
this.items.slice(base, base + this.perPage).show().addClass('item_visibile');
this.updateNavigation();
},
init: function(container, items, perPage, currentPage) {
// default perPage to 5
if (isNaN(currentPage) || currentPage === undefined) {
currentPage = 0;
}
this.container = container;
this.currentPage = currentPage;
this.totalPages = 1;
this.perPage = perPage;
this.items = items;
this.createNavigation();
this.showItems();
}
};
// stuff it all into a jQuery method!
$.fn.pagify = function(perPage, itemSelector, currentPage) {
var el = $(this);
var items = $(itemSelector, el);
// default perPage to 5
if (isNaN(perPage) || perPage === undefined) {
perPage = 3;
}
// don't fire if fewer items than perPage
if (items.length <= perPage) {
return true;
}
pagify.init(el, items, perPage, currentPage);
};
})(jQuery);
Related
The problem here is that when you reach the last item by doing a touch move,
If you touch move with the previous item, it doesn't work.
function slideCustom () {
const listWrap = document.querySelector('.list-item-wrap');
const listItem = document.querySelector('.list-item-wrap .list-item');
const listItems = document.querySelectorAll('.list-item-wrap .list-item');
const listItemPrev = document.querySelector('.m-slide-list-wrap .list-prev-btn');
const listItemNext = document.querySelector('.m-slide-list-wrap .list-next-btn');
const listItemCount = listItems.length;
const listItemWidth = listItem.offsetWidth;
let currentIndex = 0;
let touchStartX = null;
listWrap.style.width = listItemWidth * listItemCount + 'px';
function moveSlide(num) {
listWrap.style.left = -(num * ( listItemWidth + 10 )) + 'px';
currentIndex = num;
}
listItems.forEach((item, index) => {
item.addEventListener('click', function() {
moveSlide(index);
listItems.forEach(i => i.classList.remove('active'));
this.classList.add('active');
});
});
moveSlide(currentIndex);
listItemPrev.addEventListener('click', () => {
if (currentIndex > 0) {
moveSlide(currentIndex - 1);
listItems[currentIndex + 1].classList.remove("active");
listItems[currentIndex].classList.add("active");
}
});
listItemNext.addEventListener('click', () => {
if (currentIndex < listItemCount - 1) {
moveSlide(currentIndex + 1);
listItems[currentIndex - 1].classList.remove("active");
listItems[currentIndex].classList.add("active");
}
});
if (listItemCount < 2) {
listItemPrev.remove();
listItemNext.remove();
}
listWrap.addEventListener('touchstart', (event) => {
touchStartX = event.touches[0].clientX;
});
listWrap.addEventListener('touchmove', (event) => {
let touchMoveX = event.touches[0].clientX;
let touchDiffX = touchMoveX - touchStartX;
if (touchStartX !== null) {
if (touchDiffX > 0 && currentIndex > 0) {
moveSlide(currentIndex - 1);
listItems[currentIndex + 1].classList.remove("active");
listItems[currentIndex].classList.add("active");
} else if (touchDiffX < 0 && currentIndex < listItemCount - 1) {
moveSlide(currentIndex + 1);
listItems[currentIndex - 1].classList.remove("active");
listItems[currentIndex].classList.add("active");
} else if (touchDiffX < 0 && currentIndex === listItemCount - 1) {
moveSlide(currentIndex);
} else if (touchDiffX > 0 && currentIndex === 0) {
moveSlide(currentIndex);
}
touchStartX = null;
}
});
}
For example, assuming that there are 7 items,
When you touch move from right to left and reach the last 7th item,
I want to touch move the 7th item from left to right and move to the previous 6th item.
I'm currently building a small slider in Javascript
which is working pretty well (almost) but I have an issue !
You will find here the codepen link :
Slider
Line 22, 32, 38
I have my two navigations supposed to add a class active (after remove) but I have a shift with my next/prev button and the other buttons below the slider. I can't find a solution and it's a pain :( !
Any idea ? Thank you !
Try to use this your changed code:
var currentSlide = 0;
var prevSlide = 0;
var slider = document.getElementById('slider').children[0];
var slides = document.getElementsByClassName('slider-item');
var links = document.getElementsByClassName('link');
var prev = document.querySelector('.prev');
var next = document.querySelector('.next');
var btnActive = document.getElementsByClassName('set-active');
for (var i = 0; i < slides.length; i++) {
slider.style.width = (slides[0].clientWidth * slides.length) + 'px';
links[i].innerHTML = i + 1;
links[i].addEventListener('click', function(e) {
e.preventDefault();
prevSlide = currentSlide;
currentSlide = this.getAttribute('data-href');
slider.style.left = '-' + (100 * currentSlide) + '%';
utils.addClass(links[currentSlide], 'active');
utils.removeClass(links[prevSlide], 'active');
});
}
function updateSlide() {
slider.style.left = '-' + (100 * currentSlide) + '%';
utils.addClass(links[currentSlide], 'active');
utils.removeClass(links[prevSlide], 'active');
}
prev.addEventListener('click', function() {
if(currentSlide == 0)
return
prevSlide = currentSlide;
currentSlide--;
updateSlide();
});
next.addEventListener('click', function() {
if(currentSlide == 10)
return
prevSlide = currentSlide;
currentSlide++;
updateSlide();
});
var utils = utils || (function() {
'use strict';
return {
hasClass: function(el, cl) {
var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
return !!el.className.match(regex);
},
addClass: function(el, cl) {
el.className += ' ' + cl;
},
removeClass: function(el, cl) {
var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
el.className = el.className.replace(regex, ' ');
},
toggleClass: function(el, cl) {
var testClass = this.hasClass(el, cl) ? this.removeClass(el, cl) : this.addClass(el, cl);
},
getNextElementSibling: function(el) {
if (el.nextElementSibling) {
return el.nextElementSibling;
} else {
do {
el = el.nextSibling;
}
while (el && el.nodeType !== 1);
return el;
}
},
elementInViewport: function(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 && rect.left >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight)
);
},
sameHeight: function(el) {
var maxHeight = 0;
for (var i = 0; i < el.length; i++) {
var thisHeight = el[i].offsetHeight;
if (thisHeight > maxHeight) {
maxHeight = thisHeight;
}
}
for (i = 0; i < el.length; i++) {
el[i].style.height = maxHeight + 'px';
}
}
};
})();
On a project, I use datatables 1.10.2 with, to have pagination with bootstrap style, this script :
$.extend($.fn.dataTableExt.oPagination, {
bootstrap: {
fnInit: function(oSettings, nPaging, fnDraw) {
var els, fnClickHandler, oLang;
oLang = oSettings.oLanguage.oPaginate;
fnClickHandler = function(e) {
e.preventDefault();
if (oSettings.oApi._fnPageChange(oSettings, e.data.action)) {
return fnDraw(oSettings);
}
};
$(nPaging).addClass("pagination").append("<ul>" + "<li class=\"prev disabled\">← " + oLang.sPrevious + "</li>" + "<li class=\"next disabled\">" + oLang.sNext + " → </li>" + "</ul>");
els = $("a", nPaging);
$(els[0]).bind("click.DT", {
action: "previous"
}, fnClickHandler);
return $(els[1]).bind("click.DT", {
action: "next"
}, fnClickHandler);
},
fnUpdate: function(oSettings, fnDraw) {
var an, i, iEnd, iHalf, iListLength, iStart, ien, j, oPaging, sClass, _results;
oPaging = oSettings.oInstance.fnPagingInfo();
iListLength = 5;
an = oSettings.aanFeatures.p;
i = void 0;
ien = void 0;
j = void 0;
sClass = void 0;
iStart = void 0;
iEnd = void 0;
iHalf = Math.floor(iListLength / 2);
if (oPaging.iTotalPages < iListLength) {
iStart = 1;
iEnd = oPaging.iTotalPages;
} else if (oPaging.iPage <= iHalf) {
iStart = 1;
iEnd = iListLength;
} else if (oPaging.iPage >= (oPaging.iTotalPages - iHalf)) {
iStart = oPaging.iTotalPages - iListLength + 1;
iEnd = oPaging.iTotalPages;
} else {
iStart = oPaging.iPage - iHalf + 1;
iEnd = iStart + iListLength - 1;
}
i = 0;
ien = an.length;
_results = [];
while (i < ien) {
$("li:gt(0)", an[i]).filter(":not(:last)").remove();
j = iStart;
while (j <= iEnd) {
sClass = (j === oPaging.iPage + 1 ? "class=\"active\"" : "");
$("<li " + sClass + ">" + j + "</li>").insertBefore($("li:last", an[i])[0]).bind("click", function(e) {
e.preventDefault();
oSettings._iDisplayStart = (parseInt($("a", this).text(), 10) - 1) * oPaging.iLength;
return fnDraw(oSettings);
});
j++;
}
if (oPaging.iPage === 0) {
$("li:first", an[i]).addClass("disabled");
} else {
$("li:first", an[i]).removeClass("disabled");
}
if (oPaging.iPage === oPaging.iTotalPages - 1 || oPaging.iTotalPages === 0) {
$("li:last", an[i]).addClass("disabled");
} else {
$("li:last", an[i]).removeClass("disabled");
}
_results.push(i++);
}
return _results;
}
}
});
if ($.fn.DataTable.TableTools) {
$.extend(true, $.fn.DataTable.TableTools.classes, {
container: "DTTT btn-group",
buttons: {
normal: "btn",
disabled: "disabled"
},
collection: {
container: "DTTT_dropdown dropdown-menu",
buttons: {
normal: "",
disabled: "disabled"
}
},
print: {
info: "DTTT_print_info modal"
},
select: {
row: "active"
}
});
$.extend(true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
collection: {
container: "ul",
button: "li",
liner: "a"
}
});
}
}).call(this);
It works when I have a single datatable but when I have multiple datatables it break at the line if (oPaging.iTotalPages < iListLength) {. I seen than oSettings.oInstance is null for all datatables expect the last one.
What can I do to make it working?
add the plugin below
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": oSettings._iDisplayLength === -1 ?
0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
};
I have the following script and am trying to add mouse enter and leave events on a slideshow such that when the mouse is over the image it won't switch to the next one, and once removed it continues.
I can get the slide to stop when the mouse is over but once the mouse is out the slideshow won't proceed.
I am unsure if these 2 lines are in the right place:
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
jQuery(function () {
jQuery('a').focus(function () {
this.blur();
});
SI.Files.stylizeAll();
slider.init();
});
---> var MOUSE_IN = false;
var slider = {
num: -1,
cur: 0,
cr: [],
al: null,
at: 10 * 1000, /* change 1000 to control speed*/
ar: true,
anim:'slide',
fade_speed:600,
init: function () {
if (!slider.data || !slider.data.length) return false;
var d = slider.data;
slider.num = d.length;
var pos = Math.floor(Math.random() * 1);
for (var i = 0; i < slider.num; i++) {
if(slider.anim == 'fade')
{
jQuery('#' + d[i].id).hide();
}
else{
jQuery('#' + d[i].id).css({
left: ((i - pos) * 1000)
});
}
jQuery('#slide-nav').append('<a id="slide-link-' + i + '" href="#" onclick="slider.slide(' + i + ');return false;" onfocus="this.blur();">' + (i + 1) + '</a>');
}
jQuery('img,div#slide-controls', jQuery('div#slide-holder')).fadeIn();
---> jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
---> jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
slider.text(d[pos]);
slider.on(pos);
if(slider.anim == 'fade')
{
slider.cur = -1;
slider.slide(0);
}
else{
slider.cur = pos;
window.setTimeout('slider.auto();', slider.at);
}
},
auto: function () {
if (!slider.ar) return false;
if(MOUSE_IN) return false;
var next = slider.cur + 1;
if (next >= slider.num) next = 0;
slider.slide(next);
},
slide: function (pos) {
if (pos < 0 || pos >= slider.num || pos == slider.cur) return;
window.clearTimeout(slider.al);
slider.al = window.setTimeout('slider.auto();', slider.at);
var d = slider.data;
if(slider.anim == 'fade')
{
for (var i = 0; i < slider.num; i++) {
if(i == slider.cur || i == pos) continue;
jQuery('#' + d[i].id).hide();
}
if(slider.cur != -1){
jQuery('#' + d[slider.cur].id).stop(false,true);
jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed);
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
else
{
jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}
}
else
{
for (var i = 0; i < slider.num; i++)
jQuery('#' + d[i].id).stop().animate({
left: ((i - pos) * 1000)
},
1000, 'swing');
}
slider.on(pos);
slider.text(d[pos]);
slider.cur = pos;
},
on: function (pos) {
jQuery('#slide-nav a').removeClass('on');
jQuery('#slide-nav a#slide-link-' + pos).addClass('on');
},
text: function (di) {
slider.cr['a'] = di.client;
slider.cr['b'] = di.desc;
slider.ticker('#slide-client span', di.client, 0, 'a');
slider.ticker('#slide-desc', di.desc, 0, 'b');
},
ticker: function (el, text, pos, unique) {
if (slider.cr[unique] != text) return false;
ctext = text.substring(0, pos) + (pos % 2 ? '-' : '_');
jQuery(el).html(ctext);
if (pos == text.length) jQuery(el).html(text);
else window.setTimeout('slider.ticker("' + el + '","' + text + '",' + (pos + 1) + ',"' + unique + '");', 30);
}
};
if (!window.SI) {
var SI = {};
};
SI.Files = {
htmlClass: 'SI-FILES-STYLIZED',
fileClass: 'file',
wrapClass: 'cabinet',
fini: false,
able: false,
init: function () {
this.fini = true;
var ie = 0
if (window.opera || (ie && ie < 5.5) || !document.getElementsByTagName) {
return;
}
this.able = true;
var html = document.getElementsByTagName('html')[0];
html.className += (html.className != '' ? ' ' : '') + this.htmlClass;
},
stylize: function (elem) {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
elem.parentNode.file = elem;
elem.parentNode.onmousemove = function (e) {
if (typeof e == 'undefined') e = window.event;
if (typeof e.pageY == 'undefined' && typeof e.clientX == 'number' && document.documentElement) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
};
var ox = oy = 0;
var elem = this;
if (elem.offsetParent) {
ox = elem.offsetLeft;
oy = elem.offsetTop;
while (elem = elem.offsetParent) {
ox += elem.offsetLeft;
oy += elem.offsetTop;
};
};
var x = e.pageX - ox;
var y = e.pageY - oy;
var w = this.file.offsetWidth;
var h = this.file.offsetHeight;
this.file.style.top = y - (h / 2) + 'px';
this.file.style.left = x - (w - 30) + 'px';
};
},
stylizeById: function (id) {
this.stylize(document.getElementById(id));
},
stylizeAll: function () {
if (!this.fini) {
this.init();
};
if (!this.able) {
return;
};
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == 'file' && input.className.indexOf(this.fileClass) != -1 && input.parentNode.className.indexOf(this.wrapClass) != -1) this.stylize(input);
};
}
};
(function (jQuery) {
jQuery.fn.pngFix = function (settings) {
settings = jQuery.extend({
blankgif: 'blank.gif'
},
settings);
var ie55 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 5.5') != -1);
var ie6 = (navigator.appName == 'Microsoft Internet Explorer' && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf('MSIE 6.0') != -1);
if (jQuery.browser.msie && (ie55 || ie6)) {
jQuery(this).each(function () {
var bgIMG = jQuery(this).css('background-image');
if (bgIMG.indexOf(".png") != -1) {
var iebg = bgIMG.split('url("')[1].split('")')[0];
jQuery(this).css('background-image', 'none');
jQuery(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='" + settings.sizingMethod + "')";
}
});
}
return jQuery;
};
})(jQuery);
jQuery(function () {
if (jQuery.browser.msie && jQuery.browser.version < 7) {
}
});
The position of both lines is fine, they just add an event handler to the mouse in/out event. The problem you experience is actually in tha auto function, if you note, at the end of the init function you have:
window.setTimeout('slider.auto();', slider.at)
This line makes a call to the auto function after a slider.at time (which is 10 seconds in your example), the auto function checks if MOUSE_IN is set to true, if it's not, then calls the slide function, then in the slide function you have another call to the auto function:
slider.al = window.setTimeout('slider.auto();', slider.at);
But once you set the MOUSE_IN variable to true the auto function simply returns and it stop the execution of further slide functions, to solve this, you may want to either handle the MOUSE_IN logic in the slide function, or before returning false in the auto function, call with a time out the auto function again.
Thought this would work but it doesnt, the mouseleave eventdoesnt seem to fire.
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
while(MOUSE_IN==true)
{
jQuery('#slider-holder').mouseenter(function(){MOUSE_IN = true;});
jQuery('#slider-holder').mouseleave(function(){MOUSE_IN = false;});
}
I have a jQuery Mobile carousel in my application, I need to populate data in a drop-down as soon as the carousel is flipped, this is done. Now the new implementation is that as soon as the user pauses on the carousel for >= 3 seconds then only the drop-down should be updated. So how am I suppose to capture this pause time? I am using iscroll.js
Interesting parts on the code is:
var myScroll;
var old_page=0;
function loaded() {
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function(){
var currPage = myScroll.currPageX+1;
var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML);
var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML);
if(currPage <= lastPage && currPage >= firstPage){
if(old_page < currPage){
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
document.getElementById("prev").style.visibility="visible";
}
else if(old_page > currPage){
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
document.getElementById("next").style.visibility="visible";
}
old_page = currPage;
if(old_page == lastPage ){
document.getElementById("next").style.visibility="hidden";
}
else if(old_page == firstPage ){
document.getElementById("prev").style.visibility="hidden";
}
}
else{
myScroll.scrollToPage(lastPage-1,0);
}
}
});
}
function gotoNextPage(){
if(document.getElementById("prev").style.visibility == "hidden"){
document.getElementById("prev").style.visibility="visible";
}
var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML);
var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML);
if( currPage == (lastPage-1) ){
document.getElementById("next").style.visibility="hidden";
}
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (currPage+1) + ')').className = 'active';
myScroll.scrollToPage('next', 750);
}
function gotoPrevPage(){
if(document.getElementById("next").style.visibility == "hidden"){
document.getElementById("next").style.visibility="visible";
}
var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML);
var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML);
if( (currPage-1) == firstPage ){
document.getElementById("prev").style.visibility="hidden";
}
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (currPage-1) + ')').className = 'active';
myScroll.scrollToPage('prev', 750);
}
document.addEventListener('DOMContentLoaded', loaded, false);
Tidying up and adding the additional functionality I get this :
function loaded() {
var $$ = document.querySelector;
var firstPage = parseInt($$('#indicator > li:first-child').innerHTML, 10);
var lastPage = parseInt($$('#indicator > li:last-child').innerHTML, 10);
var myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function() {
var currPage = myScroll.currPageX + 1;
if(currPage <= lastPage && currPage >= firstPage) {
$$('#indicator > li.active').className = '';
$$('#indicator > li:nth-child(' + currPage + ')').className = 'active';
document.getElementById("prev").style.visibility = (currPage == firstPage) ? "hidden" : "visible";
document.getElementById("next").style.visibility = (currPage == lastPage) ? "hidden" : "visible";
}
else {
myScroll.scrollToPage(lastPage-1,0);
}
}
});
var hoverTimeout;
var wrapper = document.getElementById('wrapper');
var items = wrapper.getElementsByTagName("???");
for(var i=0; i<items.length; i++) {
var item = items[i];
item.onmouseover = function() {
var that = this;
hoverTimeout = setTimeout(function() {
updateDropdown(that);//adjust this statement to call existing function
}, 3000);
};
item.onmouseout = function() {
clearTimeout(hoverTimeout);
};
}
}
To get it working, you will need to :
in the var items = ... statement, change ??? to the tag name of the scrolled elements within the wrapper (eg 'img').
in the setTimeout(...) statement, call some existing function that update the drop-down.
EDIT
In jQuery it will be something like this :
$(function() {
var $wrapper = $('#wrapper'),
$indicatorElements = $('#indicator li'),
$prev = $("#prev"),
$next = $("#next"),
hoverTimeout;
var myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function() {
var currPage = this.currPageX;
if(currPage <= ($indicatorElements.length-1) && currPage >= 0) {
$indicatorElements.removeClass('active').eq(currPage).addClass('active');
$prev.css('visibility', (currPage == 0) ? "hidden" : "visible");
$next.css('visibility', (currPage == ($indicatorElements.length-1)) ? "hidden" : "visible");
}
else {
this.scrollToPage($indicatorElements.length-1, 0);
}
}
});
$wrapper.find("img").each(function(i, item) {
$(item).hover(function() {
hoverTimeout = setTimeout(function() {
updateDropdown(item);//adjust this statement to call existing function
}, 3000);
}, function() {
clearTimeout(hoverTimeout);
};
});
});
Both version are untested and probably need debugging.