I am working on a pagination script (code below); and I don't know how to select the current pagination number after clicking on the next previous buttons (I have added a comment to the missing bit below: removeClass('current'); and addClass('current') to active pagination number; ). The style should work the same as directly clicking on the page number $("#pagin li a").click(function()...
here is a picture:
pagination style when current page selected
Thank you in advance for your help!
pageSize = 4;
incremSlide = 5;
startPage = 0;
numberPage = 0;
var pageCount = $(".browsethearchive-items").length / pageSize;
var totalSlidepPage = Math.floor(pageCount / incremSlide);
for(var i = 0 ; i<pageCount;i++){
$("#pagin").append('<li>'+(i+1)+'</li> ');
if(i>pageSize){
$("#pagin li").eq(i).hide();
}
}
var prev = $("<li/>").addClass("prev").html("Prev").click(function(){
startPage-=1;
incremSlide-=1;
numberPage--;
slide();
});
prev.hide();
var next = $("<li/>").addClass("next").html("Next").click(function(){
startPage+=1;
incremSlide+=1;
numberPage++;
slide();
});
$("#pagin").prepend(prev).append(next);
$("#pagin li").first().find("a").addClass("current");
slide = function(sens){
$("#pagin li").hide();
for(t=startPage;t<incremSlide;t++){
$("#pagin li").eq(t+1).show();
}
if(startPage == 0){
next.show();
prev.hide();
}else if(numberPage == totalSlidepPage ){
next.hide();
prev.show();
}else{
next.show();
prev.show();
}
}
showPage = function(page) {
$(".browsethearchive-items").hide();
$(".browsethearchive-items").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(1);
$("#pagin li a").eq(0).addClass("current");
var $listItems = $('#pagin li a');
var activeLink;
$("#pagin li a").click(function() {
$listItems.removeClass('current');
$(this).addClass('current');
var activeLink=$(this);
showPage(parseInt($(this).text()));
});
var i = 1;
$(".prev").click(function() {
// removeClass('current');
// addClass('current') to active pagination number;
if (i != 1) {
showPage(--i);
}
});
$(".next").click(function() {
// removeClass('current');
// addClass('current') to active pagination number;
if (i < ($('.browsethearchive-items').length)/4) {
showPage(++i);
}
});
UPDATE here is a fiddle with the working code — > https://jsfiddle.net/JoChicau/em19ku8v/39/ — > thanks to #biberman!
You can select the list element with the class "current" in this way:
$("#pagin li a.current")
For setting the class "current" to the next or previous list element you can use the jQuery methods next() and prev(). Since you set the class to the anchor inside the list element you first have to select the parent of the anchor with the parent() function to get the list element itself and after using next() or prev() select the anchor inside the new list element with find("a").
Working example:
$(".prev").click(function() {
let prevLi = $("#pagin li a.current").parent().prev().find("a");
if (prevLi[0]) {
$("#pagin li a.current").removeClass("current");
prevLi.addClass("current");
}
});
$(".next").click(function() {
let nextLi = $("#pagin li a.current").parent().next().find("a");
if (nextLi[0]) {
$("#pagin li a.current").removeClass("current");
nextLi.addClass("current");
}
});
ul {
list-style: none;
}
li {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
}
li:not(.next, .prev) {
background-color: grey;
}
li a.current {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pagin">
<li class="prev"><</li>
<li><a class="current">1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li class="next">></li>
</ul>
Additionally i would recommend to add and remove the classes directly to/from the li tag because it makes the script a bit easier (for example no need for parent() and find("a")).
Working example:
$(".prev").click(function() {
let prevLi = $("#pagin li.current").prev();
if (prevLi.find('a')[0]) {
$("#pagin li.current").removeClass("current");
prevLi.addClass("current");
}
});
$(".next").click(function() {
let nextLi = $("#pagin li.current").next();
if (nextLi.find('a')[0]) {
$("#pagin li.current").removeClass("current");
nextLi.addClass("current");
}
});
ul {
list-style: none;
}
li {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
}
li:not(.next, .prev) {
background-color: grey;
}
li.current {
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="pagin">
<li class="prev"><</li>
<li class="current"><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
<li><a>4</a></li>
<li><a>5</a></li>
<li class="next">></li>
</ul>
Warning: below code is untested.
Set an id containing the page number on every <a> representing a page. For instance
$("#pagin").append(`<li>${i+1}</li> `);
Then use this id to target the right <a>
$(".prev").click(function() {
if (i != 1) {
i--;
$listItems.removeClass('current');
$(`#pagin li a#page-${i}`).addClass('current');
showPage(i);
}
});
I'm getting error from using top property in my jquery code. The code is about navigation dots on my slider. This is the link to my page: http://54.169.61.153/teavana
Below is my code. I'm getting error in the console saying that:
Uncaught TypeError: Cannot read property 'top' of undefined
$(document).ready(function () {
var one = $("#slider").offset();
var two = $("#tabsDiv").offset();
var three = $("#teaWare").offset();
var four = $("#videoo").offset();
$(window).scroll(function () {
var screenPosition = $(document).scrollTop();
if (screenPosition < one.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu1").addClass("active");
}
if (screenPosition >= two.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu2").addClass("active");
}
if (screenPosition >= three.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu3").addClass("active");
}
if (screenPosition >= four.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu4").addClass("active");
}
});
$(window).scroll();
$(".one, .two").click(function () { $(window).scroll(); });
});
I'm not sure why it can't read the property top. Any help?
I've some trouble with my script, I'm trying to figure out how I can make a mask/filter over the website when the menu is opened. In the HTML is a class called cmask and there is also a class called cmask is-active
It only has to do this when the screen is smaller than 900px. I've been trying to use cmask.addClass("is-active") and removeclass but its not working like that and it keeps crashing(makes the other part of the script not working anymore). Does someone knows what im doing wrong?
//scrolling----------------
//scrolling----------------
//scrolling----------------
var nav = $("#nav_id");
var nav_overflow = $("#nav_overflow");
var page_end_logo_nav = $("#page_end_logo_nav").visible();
var logo_container = $("#logo_container");
var nav_ani_speed = 200 //in ms
var nav_state = 0 // 0 is nav 1 is hamburger visable
var hamburger = $("#hamburgermenu") //hamburger elemnt
var distanceY;
var shrinkOn;
var winkel_mand = $("#winkel_mand")
//set scroll for desktop nav
function nav_desktop_check() {
distanceY = window.pageYOffset || document.documentElement.scrollTop;
shrinkOn = 100;
//run the header script
if (distanceY > shrinkOn) {
if (nav_state === 0) {
nav_hamburger();
}
} else {
if (nav_state === 1 ){
if ($(window).width() >= 900){
nav_normal_desktop();
}
}
}
}
//tablet nav check
function tablet_nav_check() {
if (nav_state === 0){
if ($(window).width() <= 900){
nav_hamburger();
}
}
}
tablet_nav_check()
//hambutton onclikc
hamburger.click(function() {
if (nav_state === 1){
if ($(window).width() >= 900){
nav_normal_desktop();
} else {
nav_normal_mobile();
}
logo_animation();
remove_winkel_icon_check()
} else{
nav_hamburger()
}
});
//nav to hamburger
function nav_hamburger() {
hamburger.removeClass("active")
nav_overflow.animate({
width: 0
}, nav_ani_speed, function() {
hamburger.addClass("active")
});
nav_state = 1;
logo_animation();
}
//hamburger to nav
function nav_normal_desktop() {
hamburger.addClass("active");
hamburger.removeClass("active");
nav_overflow.css("width", "auto");
nav_witdh = nav_overflow.innerWidth();
nav_overflow.css("width", 0);
nav_overflow.animate({
width: nav_witdh
}, nav_ani_speed, function() {
hamburger.removeClass("active")
});
nav_state = 0;
}
function nav_normal_mobile() {
nav_overflow.animate({
width: "100%"
}, nav_ani_speed, function() {
hamburger.removeClass("active")
});
nav_state = 0;
}
First I would add semicolons to all statements where it could fit, just to be sure you are not missing a mandatory one.
I've made a small overlay mask example
Javascript
$('#element').on("click",function() {
if($('#overlay').length == 0) {
$(this).wrap('<div id="overlay"><div>');
} else {
$(this).unwrap();
}
});
CSS
#element {
width:200px;
height:200px;
background-color:#f00;
}
#inner {
width:100px;
height:100px;
background-color:#0ff;
}
#overlay
{
background-color:#000;
opacity:0.3;
width:200px;
height:200px;
}
http://jsfiddle.net/5aw0wsy4/
I am a newbie and I can't figure out how to get rid of "#!/". I did not create this code each time I open a page it comes up like this:
site/index.html#!/
site/index.html#!/page_home
site/index.html#!/page_portfolio
pages.js:
$(window).load(function() {
var act='';
$('#content > ul > li').css({position:'absolute', display:'none'});
$('#content > ul > li').find('.box1').css({height:'0'})
$('#menu > li > a span').css({opacity:'0'})
$('#menu > li > a').hover(function(){
$(this).find(' > span').stop().animate({opacity:'1'},600);
}, function(){
if (!$(this).hasClass('active')) {
$(this).find(' > span').stop().animate({opacity:'0'},600);
}
})
$('#menu > li').each(function(num){
$(this).data({num:num})
})
$('#content > ul > li').each(function(num){
$(this).data({num:num})
})
if (location.hash.slice(0,3)=='#!/') {
page=location.hash.slice(3);
open_page('#'+page);
fl=false;
}
if ((location.hash=='#')||(location.hash=='')) {
open_page('');
fl=true;
$('#content').stop().animate({height:'668'})
}
$('a').click(function(){
if ($(this).attr('href').slice(0,3)=='#!/') {
page=$(this).attr('href').slice(3);
open_page('#'+page);
return false;
}
if ($(this).attr('data-type')=='close') {
close_page()
}
})
function open_page(page){
location.hash='#!/'+page.slice(1);
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
num=$(page).data('num');
$('#menu > li').each(function(){
if ($(this).data('num')==num) {
$(this).find('> a').addClass('active').find('> span').stop().animate({opacity:'1'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
}
})
fl=false;
$('#content').stop().animate({height:'868'})
if (act!='') {
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
})
} else {
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
}
}
function close_page(page){
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
location.hash='#';
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
act='';
fl=true;
$('#content').stop().animate({height:'668'})
});
return false;
}
})
I have a liquid carousel slider set up on one of my websites located over here http://www.edhubdemo.com/wp/. The slider is located under the Our Works and the Our Clients' area and currently users can scroll through the works by clicking on the next/previous buttons. Now what I want to do is that the 'click' function should be triggered itself after every 3 seconds so that the slider moves to the next 4 set of works itself. I tried using the trigger function but I guess I couldn't integrate it correctly. Here's the code inside the liquid carousel javascript file:
(function($){
$.fn.liquidcarousel = function(options) {
var defaults = {
duration: 10000
};
var options = $.extend(defaults, options);
return this.each(function() {
var divobj = $(this);
$(divobj).css('overflow', 'hidden');
$('> .wrapper', divobj).css('overflow', 'hidden');
$('> .wrapper', divobj).css('float', 'left');
$('> .wrapper > ul', divobj).css('float', 'left');
$('> .wrapper > ul', divobj).css('margin', '0');
$('> .wrapper > ul', divobj).css('padding', '0');
$('> .wrapper > ul', divobj).css('display', 'block');
$('> .wrapper > ul > li', divobj).css('display', 'block');
$('> .wrapper > ul > li', divobj).css('float', 'left');
var visiblelis = 0;
var totallis = $('> .wrapper > ul > li', this).length;
var currentposition = 0;
var additionalmargin = 0;
var totalwidth = 0;
$(window).resize(function(e){
var divwidth = $(divobj).width();
var availablewidth = divwidth;
var heighest = 0;
$('> .wrapper > ul > li', divobj).css("height", "auto");
$('> .wrapper > ul > li', divobj).each(function () {
if ( $(this).outerHeight() > heighest ) {
heighest = $(this).outerHeight();
}
});
$(divobj).height(heighest);
$('> .wrapper', divobj).height(heighest);
$('> .wrapper > ul', divobj).height(heighest);
$('> .wrapper > ul > li', divobj).height(heighest);
var liwidth = $('> .wrapper > ul > li:first', divobj).outerWidth(true);
var originalmarginright = parseInt($('> .wrapper > ul > li', divobj).css('marginRight'));
var originalmarginleft = parseInt($('> .wrapper > ul > li', divobj).css('marginLeft'));
totalwidth = liwidth + additionalmargin;
previousvisiblelis = visiblelis;
visiblelis = Math.floor((availablewidth / liwidth));
if (visiblelis < totallis) {
additionalmargin = Math.floor((availablewidth - (visiblelis * liwidth))/visiblelis);
} else {
additionalmargin = Math.floor((availablewidth - (totallis * liwidth))/totallis);
}
halfadditionalmargin = Math.floor(additionalmargin/2);
totalwidth = liwidth + additionalmargin;
if (visiblelis > previousvisiblelis || totallis <= visiblelis) {
currentposition -= (visiblelis-previousvisiblelis);
if (currentposition < 0 || totallis <= visiblelis ) {
currentposition = 0;
}
}
$('> .wrapper > ul', divobj).css('marginLeft', -(currentposition * totalwidth));
if (visiblelis >= totallis || ((divwidth >= (totallis * liwidth)) && options.hidearrows) ) {
if (options.hidearrows) {
$('> .prev', $(divobj).parents(".widget")).hide();
$('> .next', $(divobj).parents(".widget")).hide();
additionalmargin = Math.floor((divwidth - (totallis * liwidth))/totallis);
halfadditionalmargin = Math.floor(additionalmargin/2);
totalwidth = liwidth + additionalmargin;
$('> .wrapper > ul > li', divobj).css('marginRight', originalmarginright + halfadditionalmargin);
$('> .wrapper > ul > li', divobj).css('marginLeft', originalmarginleft + halfadditionalmargin);
}
$('> .wrapper', divobj).width(totallis * totalwidth);
$('> ul', divobj).width(totallis * totalwidth);
$('> .wrapper', divobj).css('marginLeft', 0);
currentposition = 0;
} else {
$('.prev', $(divobj).parents(".widget")).show();
$('.next', $(divobj).parents(".widget")).show();
$('> .wrapper', divobj).width(visiblelis * totalwidth);
$('> ul', divobj).width(visiblelis * totalwidth);
}
});
$('.next', $(divobj).parents(".widget")).click(function(){
if (totallis <= visiblelis) {
currentposition = 0;
} else if ((currentposition + (visiblelis*2)) < totallis) {
currentposition += visiblelis;
} else if ((currentposition + (visiblelis*2)) >= totallis -1) {
currentposition = totallis - visiblelis;
}
$('> .wrapper > ul', divobj).stop();
$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
$('.prev', $(divobj).parents(".widget")).click(function(){
if ((currentposition - visiblelis) > 0) {
currentposition -= visiblelis;
} else if ((currentposition - (visiblelis*2)) <= 0) {
currentposition = 0;
}
$('> .wrapper > ul', divobj).stop();
$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
});
$('.next', $(divobj).parents(".widget")).dblclick(function(e){
e.preventDefault();
clearSelection();
});
$('.prev', $(divobj).parents(".widget")).dblclick(function(e){
e.preventDefault();
clearSelection();
});
function clearSelection() {
if (document.selection && document.selection.empty) {
document.selection.empty();
} else if (window.getSelection) {
var sel = window.getSelection();
sel.removeAllRanges();
}
}
$(window).resize();
});
This is the part of the code which moves the slider forward when the next button is clicked:
$('.next', $(divobj).parents(".widget")).click(function(){
if (totallis <= visiblelis) {
currentposition = 0;
} else if ((currentposition + (visiblelis*2)) < totallis) {
currentposition += visiblelis;
} else if ((currentposition + (visiblelis*2)) >= totallis -1) {
currentposition = totallis - visiblelis;
}
$('> .wrapper > ul', divobj).stop();
$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
And this is the part of the code which makes the slider move backwards when the previous button is clicked:
$('.prev', $(divobj).parents(".widget")).click(function(){
if ((currentposition - visiblelis) > 0) {
currentposition -= visiblelis;
} else if ((currentposition - (visiblelis*2)) <= 0) {
currentposition = 0;
}
$('> .wrapper > ul', divobj).stop();
$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
});
select your element in jQuery
var next = $('.next', $(divobj).parents(".widget"));
then call a click on it every 3 secs
setInterval(next.click, 3000);
However the best would be to create a function for this task (sliding the carousel), and call that function from a click. Then you can call that function directly instead of simulating a click.
Simulate a mouse click event on .next by using createEvent("MouseEvents")
$('.next', $(divobj).parents(".widget")).each(function (idx, elm) {
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
elm.dispatchEvent(ev);
});
I did .each because a class is non-unique, you may want to only call it for the first one.
This can then be made into a function that repeats itself every 3 seconds, e.g.
(function (obj, waitFor) { // wrap to catch variables
var repeatAction = function repeatAction() { // function to be given timeout (stored in variable
obj.each(function (idx, elm) { // and named so it can reference itself; makes life easier);
var ev = document.createEvent("MouseEvents");
ev.initMouseEvent("click", true, false, self, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
elm.dispatchEvent(ev);
});
window.setTimeout(repeatAction, waitFor); // re-invocation of itself
};
window.setTimeout(repeatAction, waitFor); // initial invocation
}($('.next', $(divobj).parents(".widget")), 3000)); // passing vars
Edit: As requested, this function inserted into the code. I've also fixed syntax as best I could (there were some errors in OP's syntax) and "beautified" it.