I need to run this script on a specific page but also, only for a specific body class. example: On this page it has <body class="category-type-plp">
How do I assign my script to "category-type-plp" ??
plpSpaceRemove: function() {
$(document).ready(function() {
if ($('.bv-tile.bv-inline-rating-outer').length % 4 === 0) {
for (let i = 0; i < ($('.bv-tile.bv-inline-rating-outer').length / 4); i++) {
let remove = true;
$('.bv-tile.bv-inline-rating-outer').slice(i * 4, 4 * (i + 1)).each(function() {
if ($(this).find(".bv-stars-wrap
").length != 0) {
remove = false;
}
});
if (remove) {
$('.bv-tile.bv-inline-rating-outer').slice(i * 4, 4 * (i + 1)).each(function() {
if ($(this).find(".bv-stars-wrap
").length === 0) {
$(this).css("display", "none");
}
});
}
}
}
else {
for (let i = 0; i < ($('.bv-tile.bv-inline-rating-outer').length / 3); i++) {
let remove = true;
$('.bv-tile.bv-inline-rating-outer').slice(i * 3, 3 * (i + 1)).each(function() {
if ($(this).find('.bv-stars-wrap
').length != 0) {
remove = false;
}
});
You can check if your body has a certain class:
if (!$('body').hasClass('some-class')) return;
Related
I am using JS to paginate a data set. I also have the possibility to filter my dataset through tags. I want to hide the pagination navigation when I only have one page of results either for all results or when I use the filter. Here is the JS code:
var itemsNumber = 8,
$items,
pages = 1,
current = 1;
function makePages() {
$items = $(".filtered-div:visible");
pages = Math.ceil($items.length / itemsNumber);
$("#pages").empty();
for (var p = 1; p <= pages; p++) {
$("#pages").append($('' + p + ""));
}
showPage(1);
}
function showPage(page) {
$items
.hide()
.slice((page - 1) * itemsNumber, page * itemsNumber)
.show();
current = page;
$("div.ctrl-nav a").show();
if (current == 1) {
$("div.ctrl-nav a:first").hide();
} else if (current == pages) {
$("div.ctrl-nav a:last").hide();
}
$("div.ctrl-nav a.active").removeClass("active");
$("#pages a")
.eq(current - 1)
.addClass("active");
}
makePages();
$("div.ctrl-nav").on("click", "a", function () {
var action = $(this).html();
if (action == '<i class="fas fa-angle-left" aria-hidden="true"></i>') {
current--;
} else if (
action == '<i class="fas fa-angle-right" aria-hidden="true"></i>'
) {
current++;
} else if (+action > 0) {
current = +action;
}
if (current <= 1) {
current = 1;
} else if (current >= pages) {
current = pages;
}
showPage(current);
});
var $myitems = $(".filtered-div");
$(".btn-container").on("click", ".btn", function () {
var value = $(this).data("filter");
if (value == "all") {
$myitems.show();
} else {
var $selected = $myitems
.filter(function () {
return $(this).data("tag").indexOf(value) != -1;
})
.show();
$myitems.not($selected).hide();
}
$(this).addClass("active").siblings().removeClass("active");
makePages();
});
You can find my code at this codepen
As you already have a variable which stores the pages just ask it how many pages you have and hide the nav.
Before
function makePages() {
$items = $(".filtered-div:visible");
pages = Math.ceil($items.length / itemsNumber);
$("#pages").empty();
for (var p = 1; p <= pages; p++) {
$("#pages").append($('' + p + ""));
}
showPage(1);
}
After
function makePages() {
$items = $(".filtered-div:visible");
pages = Math.ceil($items.length / itemsNumber);
$("#pages").empty();
for (var p = 1; p <= pages; p++) {
$("#pages").append($('' + p + ""));
}
showPage(1);
if(pages <= 1) {
$("div.ctrl-nav").hide();
} else {
$("div.ctrl-nav").show();
}
}
You can check the selected data and itemsNumber.
If they are equal then hiden pagniation.
Refer
var $myitems = $(".filtered-div");
$(".btn-container").on("click", ".btn", function () {
var value = $(this).data("filter");
if (value == "all") {
$myitems.show();
} else {
var $selected = $myitems
.filter(function () {
return $(this).data("tag").indexOf(value) != -1;
})
.show();
if(itemsNumber == $selected.length) {
$("div.ctrl-nav").hide();
} // compare
$myitems.not($selected).hide();
}
$(this).addClass("active").siblings().removeClass("active");
makePages();
});
Please, help. How to make it impossible to press a button when it reaches the last element in the array. For some reason, it reaches the last element of the array, and you can also click once. And also when you click on the minus and it comes to the first element you can also click once and then button is disable.
Fiddle: https://jsfiddle.net/ameli7777/po7qdwk8/2/
const totalCount = document.querySelector('.total-count');
const buttonMinus = document.querySelector('.btn-minus');
const buttonPlus = document.querySelector('.btn-plus');
const pointCount = document.querySelector('.point-count');
let point = [0.01, 0.02, 0.03, 0.05, 0.08, 0.10, 0.20, 0.30, 0.50, 0.80, 1, 2, 3, 5, 8, 10, 20];
let i = 5;
let count;
pointCount.innerHTML = point[0];
document.addEventListener('click', (e) => {
if(e.target.classList.contains('btn-plus')) {
if(i !== point.length - 1) {
i += 1;
pointCount.innerHTML = point[i];
} else {
buttonPlus.classList.add('disable-btn');
}
buttonMinus.classList.remove('disable-btn');
}
if(e.target.classList.contains('btn-minus')) {
if (i === 0) {
buttonMinus.classList.add('disable-btn');
} else {
i -= 1;
pointCount.innerHTML = point[i];
}
buttonPlus.classList.remove('disable-btn');
};
count = point[i] * 20;
totalCount.innerHTML = "$" + count.toFixed(2);
});
That's because you are using if / else condition which means you can either move through the array OR disable the button. This way, it is possible to do both actions at once:
document.addEventListener('click', (e) => {
if(e.target.classList.contains('btn-plus')) {
if(i !== point.length - 1) {
i += 1;
pointCount.innerHTML = point[i];
}
if (i === point.length - 1) {
buttonPlus.classList.add('disable-btn');
}
buttonMinus.classList.remove('disable-btn');
}
if(e.target.classList.contains('btn-minus')) {
if (i !== 0) {
i -= 1;
pointCount.innerHTML = point[i];
}
if (i === 0) {
buttonMinus.classList.add('disable-btn');
}
buttonPlus.classList.remove('disable-btn');
};
count = point[i] * 20;
totalCount.innerHTML = "$" + count.toFixed(2);
});
Here is the working fiddle: https://jsfiddle.net/j0kczaLn/2/
My goal is, if a page contains the specified button, click it, and increase the amt_clicked by 1. When amt_clicked is greater than 15, wait for 60 seconds and reset amt_clicked. I have no idea how do this if statement. Example:
var amt_clicked = 0;
while (1) {
while (amt_clicked < 15) {
if (button found) { // this is where I am lost
iimPlay("TAG POS={{amt_clicked}} TYPE=BUTTON ATTR=TXT:Get");
amt_clicked++;
}
}
iimPlay("WAIT SECONDS=60");
amt_clicked = 0;
}
This will run 20 times per second, using the window.setInterval() function:
var amt_clicked = 0;
var amt_cooldown = 1200;
setInterval(function(){
if (amt_cooldown === 0)
amt_cooldown = 1200;
else if (amt_cooldown < 1200)
amt_cooldown -= 1;
else if (amt_clicked > 15) {
amt_clicked = 1;
amt_cooldown -= 1;
} else {
amt_clicked -= 1;
//Click
}, 50);
You can use combination of setInterval and setTimeout.
I have added comments to code for you to understand.
var amt_clicked = 0;
var setTimeoutInProcess = false;
//processing the interval click function
setInterval(() => {
checkButtonAgain();
}, 200);
function checkButtonAgain() {
var element = document.getElementById('iNeedtoBeClicked');
//if clicked 15 times then need to wait for 60 seconds
if (amt_clicked === 15) {
if (!setTimeoutInProcess) {
setTimeoutInProcess = true;
setTimeout(function() {
//resetting the amt-clicked
amt_clicked = 0;
setTimeoutInProcess = false;
}, 60000);
} else {
console.log('waiting');
}
} else if (typeof(element) != 'undefined' && element != null) {
//triggering click and increasing the amt_clicked
element.click();
amt_clicked++;
}
console.log(amt_clicked);
}
<button id="iNeedtoBeClicked">Click ME Button</button>
I have a cycle of links and I determined click event on them. And I want to define if navbar[1].clicked == true {doing something} else if navbar[2].cliked == true {doing something} etc. "By if else in " reveal functional callbackFn".
Here is the code:
var navbar = document.getElementById("navbar").getElementsByTagName("a");
for (var i = 0; i < navbar.length; i++) {
navbar[i].addEventListener('click', function() { reveal('top'); });
}
function reveal(direction) {
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if (navbar[1].clicked == true) {
currentPage = 0;
} else if(navbar[1].clicked == true) {
currentPage = 1;
} else if(navbar[2].clicked == true) {
currentPage = 2;
} else if(navbar[3].clicked == true) {
currentPage = 3;
} else if(navbar[4].clicked == true) {
currentPage = 4;
};
classie.add(pages[currentPage], 'page--current');
};
}
This is typically a problem of closure.
You can make the following change
Here the call back function of the addEventListener is an IIFE, & in the reveal function pass the value of i
var navbar = document.getElementById("navbar").getElementsByTagName("a");
for (var i = 0; i < navbar.length; i++) {
navbar[i].addEventListener('click', (function(x) {
reveal('top',x);
}(i))};
}
In this function you will have access to
function reveal(direction,index) {
// not sure what this function is mean by, but you will have the value of `i` which is denote the clicked element
callbackFn = function() {
// this is the part where is running the turning of pages
classie.remove(pages[currentPage], 'page--current');
if (index == 1) {
currentPage = 0;
} else if (index == 1) {
currentPage = 1;
} else if (index == 2) {
currentPage = 2;
} else if (index == 3) {
currentPage = 3;
} else if (index == 4) {
currentPage = 4;
};
classie.add(pages[currentPage], 'page--current');
};
}
Here is the solution in my case.
Thank you brk for helping in any case, thanks again.
// determine clicked item
var n;
$('#navbar a').click(function(){
if($(this).attr('id') == 'a') {
n = 0;
} else if($(this).attr('id') == 'b') {
n = 1;
} else if($(this).attr('id') == 'c') {
n = 2;
} else if($(this).attr('id') == 'd') {
n = 3;
} else if($(this).attr('id') == 'e') {
n = 4;
};
});
var pages = [].slice.call(document.querySelectorAll('.pages > .page')),
currentPage = 0,
revealerOpts = {
// the layers are the elements that move from the sides
nmbLayers : 3,
// bg color of each layer
bgcolor : ['#52b7b9', '#ffffff', '#53b7eb'],
// effect classname
effect : 'anim--effect-3'
};
revealer = new Revealer(revealerOpts);
// clicking the page nav
document.querySelector("#a").addEventListener('click', function() { reveal('cornertopleft'); });
document.querySelector("#b").addEventListener('click', function() { reveal('bottom'); });
document.querySelector("#c").addEventListener('click', function() { reveal('left'); });
document.querySelector("#d").addEventListener('click', function() { reveal('right'); });
document.querySelector("#e").addEventListener('click', function() { reveal('top'); });
// moving clicked item's `n` into the function
function reveal(direction) {
var callbackTime = 750;
callbackFn = function() {
classie.remove(pages[currentPage], 'page--current');
currentPage = n;
classie.add(pages[currentPage], 'page--current');
};
revealer.reveal(direction, callbackTime, callbackFn);
}
I have 4 vertical sliding panels and I am using the following code for it. Is there any way I can simplify the code?
$(".sliding-panels").click(function() {
var n = $(this).attr("number");
$(".panel" + n).toggleClass("panel-active");
if (n == 1) {
$(".panel2").toggleClass("panel-push-right");
$(".panel3").toggleClass("panel-push-right");
$(".panel4").toggleClass("panel-push-right");
}
else if (n == 2) {
$(".panel1").toggleClass("panel-push-left");
$(".panel3").toggleClass("panel-push-right");
$(".panel4").toggleClass("panel-push-right");
}
else if (n == 3) {
$(".panel1").toggleClass("panel-push-left");
$(".panel2").toggleClass("panel-push-left");
$(".panel4").toggleClass("panel-push-right");
}
else if (n == 4) {
$(".panel1").toggleClass("panel-push-left");
$(".panel2").toggleClass("panel-push-left");
$(".panel3").toggleClass("panel-push-left");
}
});
How about replacing the if statement with:
var i, toggle_class;
for (i = 1; i <= 4; ++i) {
if (i === n) { toggle_class = "panel-active"; }
else if (i < n) { toggle_class = "panel-push-left"; }
else /* i > n */ { toggle_class = "panel-push-right"; }
$(".panel" + i ).toggleClass(toggle_class);
}
This may be a bit of a stretch, but assuming all the elements have the same class (maybe it even is .sliding-panels?) and are in order, i.e.
<div class="panel1"></div>
<div class="panel2"></div>
<div class="panel3"></div>
...
you can do:
var $panels = $(".sliding-panels").click(function() {
var n = $(this).attr("number") - 1;
$panels.toggleClass(function(index) {
return index === n ?
'panel-active' :
(index < n ? 'panel-push-left' : 'panel-push-right');
});
});
Let jQuery handle the element traversal.