Would anyone be so kind as to advise me how to amend this JavaScript please? I'll admit I don't have much experience working with JavaScript and I've tried myself but ended up a bit lost.
To explain, WooCommerce outputs products on my site in .columns-3 and .columns-4, and assigns .first and .last classes accordingly.
If the site is loaded on mobile, the script below will remove the .first and .last tags, and re-assign them to display the products in two columns.
The script currently only targets .columns-3 within function defaultProductRows and function adjustProductRows. I need to also target .columns 4 within the same script, but I'm not sure how to go about adding it.
<script>
$(window).on('load resize', function (){
var windowWidth = $(window).width();
if(windowWidth < 753){ // this is my screen size break point for the rows
adjustProductRows(); // call the function to adjust add last and first classes
} else {
defaultProductRows(); // else if large screen size then get everything back to defalut
}
});
function defaultProductRows(){
var products = $('ul.products.columns-3 li.type-product');
products.each(function(idx, li) {
var product = $(li);
// remove all classes we added
$('ul.products li.adjusted-row.first').removeClass('adjusted-row first');
$('ul.products li.adjusted-row.last').removeClass('adjusted-row last');
if(idx == 0) { // make sure first li tag gets first class
product.addClass('first');
}
else if((idx+1) % 3 == 0) //this will make sure we have 3 rows by adding last classes after each 3 products
{
product.addClass('last');
}
else if(idx % 3 == 0)
{
product.addClass('first'); // make sure all products divided by 3 will have first class
}
else
{
console.log(idx); // just checking for the index
}
});
}
function adjustProductRows() {
var products = $('ul.products.columns-3 li.type-product');
products.each(function(idx, li) {
var product = $(li);
if(idx % 2 == 0) // we are even
{
product.addClass('adjusted-row first');
product.removeClass('last');
}
else // we are odd
{
product.addClass('adjusted-row last');
product.removeClass('first');
}
});
}</script>
Change your selector to include columns-4
From:
var products = $('ul.products.columns-3 li.type-product');
To:
var products = $('ul.products.columns-3 li.type-product, ul.products.columns-4 li.type-product');
This tells jQuery to select li.type-products that are part of either columns-3 or columns-4
Related
Currently I have JSON data that is being inputted/entered into all articles containing the ID #viewed. While the JSON data is showing that it is being inputted into all article's with the ID, the function checkViewers() is only functioning correctly for the first article ID #viewed.
Ideally, the checkViewers() function should make all #viewed IDs appear as the first article ID #viewed is currently appearing (e.g. First name Last name and Remaining Number of People have viewed this post.) However, the total number of people remaining is incorrect in the first article, as it is gathering all the repeated data. It should only be gathering the data once and totaling that number per article ID.
What is the best fix for this situation? I am guessing the checkViewers() function is gathering all the data on the page and only needs to be gathering the data from it's parent section?
A sample of the current code:
//Content Viewer Information
function checkViewers() {
//Base Variables
//var viewer = $('#viewed span.user');
//var totalViews = $('#viewed span.user').length;
//var shortenViews = $('#viewed span.user').length -1;
var viewer = $("#viewed span[class^='user']");
var totalViews = $("#viewed span[class^='user']").length;
var shortenViews = $("#viewed span[class^='user']").length -1;
if (totalViews === 0) {
($('#viewed').html('<span> 0 people have viewed your post.</span>'));
}
if (totalViews === 1) {
$('<span> has viewed your post.</span>').insertAfter(viewer.last());
}
if (totalViews === 2) {
$('<span> and </span>').insertAfter(viewer.first());
$('<span> have viewed your post.</span>').insertAfter(viewer.last());
}
if (totalViews >= 3) {
viewer.slice(1).hide();
$('<span> and </span>').insertAfter(viewer.first());
$('<span class="user count"></span>').insertAfter(viewer.eq(2));
$('.count').html(shortenViews + ' more people');
$('<span> have viewed your post.</span>').insertAfter(viewer.last());
}
}
The function is then being called with the updated content.
//Update Page With New Content
var viewerSection = $("article[id^='viewed']");
viewerSection.html(newViewers);
checkViewers();
Edits: I ended up changing the IDs #viewed to the Class .viewed, as IDs should be unique. However, I am still having the same problem as before.
View the current and complete code at Plunker.
Firstly, now you are correctly using classes, you shouldn't check the class attribute like this:
var viewerSection = $("div[class^='viewed']");
Just use the basic jQuery class selector:
var viewerSection = $("div.viewed");
You should also do the same for the other 3 selectors at the top of your script as you have commented out.
Now the main problem is that you are not restricting your checks in checkViewers to each individual item, so it is applying it globally.
You need to loop through each .viewed element and apply your logic to each. The jQuery selector method takes a second argument which is an element to search within for matches. As you are in a jQuery each() method, you can just pass this as the second argument:
function checkViewers() {
$('div.viewed').each(function() {
var viewer = $("span.user", this);
// no need to re-select, just work them out based on viewer
var totalViews = viewer.length;
var shortenViews = viewer.length -1;
if (totalViews === 0) {
$(this).html('<span>0 people have viewed your post.</span>');
}
else if (totalViews === 1) {
$(this).append('<span> has viewed your post.</span>');
}
else if (totalViews === 2) {
$('<span> and </span>').insertAfter(viewer.eq(0));
$(this).append($('<span> have viewed your post.</span>'));
}
else if (totalViews >= 3) {
viewer.slice(1).hide();
$('<span> and </span>').insertAfter(viewer.eq(0));
$('<span class="user count">' + shortenViews + ' more people</span>').insertAfter(viewer.eq(2));
$(this).append($('<span> have viewed your post.</span>'));
}
});
}
Updated Plunker
I have 3 columns which include dynamically generated list elements (li tags)
these have an attribute that I try to use to hide a row / li when an amount of character is not reached in this element.(by using opacity property)
I have it working...sometimes and sometimes it only works for one column out of the 3...
So I'd appreciate some insight on what's wrong here.
(function() {
// selecting all elements with class
// class="checkout-tariff-meta-maybe-hidden"
var elems = $(".checkout-tariff-meta-maybe-hidden");
// interact between founded elements
for (var k = 0; k < elems.length; k++) {
// getting text content size
var textSize = elems[k].textContent.length;
// if text size is one we will hide element
if (textSize <= 1) {
// hiding
elems[k].style.opacity = "0";
}
}
}());
You can just go straight to the point and do something like:
// Adjust as needed
$(document ).ready(function() {
$('.checkout-tariff-meta-maybe-hidden').filter( function() {
return $(this).text().length<3; } ).hide();
});
Since you're using jQuery, to hide an element you can just do:
$(elems[k]).hide();
Alternatively, if you're looking to hide it without collapsing (since you're changing opacity, I assume this is the case), look into .fadeTo():
$(elems[k]).fadeTo(1, 0);
You might look at ...
if (textSize <= 1) {
elems[k].style.opacity = "0";
} else {
elems[k].style.opacity = "1";
}
... to ensure they get turned back on when longer.
Hope you can help, this code is not working. It is selecting the next image ok, but if it is on the last image and there is no 'next image' then I want to select the first image in the 'li'. I've added an if condition: if (nextLi.value !=='')... but this doesn't seem to be working.
function nextImg(){
$('#background').find('img').animate({'opacity': 0}, 500, function (){
var nextLi = $('.sel').parent().parent().next('li').find('a');
if (nextLi.value !=='') {
var nextLiA = nextLi.attr('rel');
$('#background').find('img').attr({'src':nextLiA});
$('.sel').appendTo(nextLi);
} else {
var nextLi = $('.sel').parent().parent().first('li').find('a');
var nextLiA = nextLi.attr('rel');
$('#background').find('img').attr({'src':nextLiA});
$('.sel').appendTo(nextLi);
}
});
}
You should use length instead, do:
if (!nextLi.length){
//do stuff
}
If the selection is empty nextLi.length will return 0 (i.e. false), so you add an !
nextLi is a jQuery object. If you want to see if it contains any elements, i.e., if anything matched the selector(s) you used then just check its .length property:
if (nextLi.length > 0 ) {
Note also that the three lines inside the if block are the same as the last three lines of the else, so you can simplify your code as follows:
if (nextLi.length === 0) {
nextLi = $('.sel').parent().parent().first('li').find('a');
}
$('#background').find('img').attr({'src': nextLi.attr('rel') });
$('.sel').appendTo(nextLi);
(I've removed the nextLia variable entirely since it was used in only one place - you can just use nextLi.attr('rel') directly when setting the src attribute.)
Try this. It checks for the size of the li and if not found anything, selects the first.
function nextImg(){
$('#background').find('img').animate({'opacity': 0}, 500, function (){
var li = $('.sel').parent().parent().next('li').find('a');
if(li.length == 0) {
//if there is not last item
li = $('.sel').parent().parent().first('li').find('a'); //get the first item
}
var liA = li.attr('rel');
$('#background').find('img').attr({'src':liA});
$('.sel').appendTo(li);
});
}
I'm trying to write a form builder where users can generate a signup form. I need to limit the amount of items that the user can create however they also need to delete the items.
Originally I had
var limit = 5;
var counter = 0;
if (counter == limit) {
However when the user deleted items the counter remained the same and so they couldnt replace the deleted form element with a new item. So what I want to do is count how many items are currently active. I tried to do this by giving each new element a class (.kid) and then counting the amount of divs with that class but it didnt work.
Could anyone point me in the right direction? This is what I have so far however it doesn't work.
var limit = 6;
var num = $('.kid').length;
function addAllInputs(divName, inputType){
if (num == limit) {
alert("You have all ready added 6 form items");
}
else {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'child' + (counter + 1));
newdiv.setAttribute('class', 'kid' );
Cheers all!
You need to capture the current counter in a closure. Decrease the counter when the user deletes an item and increase it after an item is created. Your code sample doesn't reveal how you handle the deletion, but I'll try to illustrate what I mean with a small code snippet:
$(document).ready(function () {
var limit = 5;
var counter = $('.kid').length;
$('#triggers_delete').click(function () {
/* delete the item */
counter--;
});
$('#triggers_creation').click(function () {
if (counter == limit) {
alert('Limit reached');
return false;
}
/* somehow determine divName and inputType
and create the element */
addAllInputs(divName, inputType);
counter++;
});
});
function addAllInputs(divName, inputType) {
/* just create the item here */
}
Is there any reason an approach like this won't work? Every time you go to add a new DIV, the length of the current collection is examined to see if it meets or exceeds the limit. Of course, you may need to refine the scope of your selector if there could be other DIVs of the form with the same class ID.
var limit = 6;
function addAllInputs(divName, inputType){
if ( $('.kid').length >= limit ) {
alert("You have all ready added 6 form items");
}
else {
var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'child' + (counter + 1));
newdiv.setAttribute('class', 'kid' );
}
Edit: Just a note, I am assuming that you are either removing the deleted items from the DOM or differentiating them from active items with a different class or attribute. Otherwise, the approach I suggested will return a count that includes the deleted items as well.
The only real issue is that your num variable is being defined outside of the function. It will get the number of .kid elements at the time the page loads and will not update. Simply move this line inside the function:
var limit = 6;
function addAllInputs(divName, inputType){
var num = $('.kid').length;
...
Try this
var limit = 6;
function addAllInputs(divName, inputType){
if ($('.kid').length == limit) {
alert("You have all ready added 6 form items");
}
else {
var newdiv = $('div', { 'id': 'child' + (counter + 1), 'class': 'kid' } );
$("inputContainerSelector").append(newdiv);
}
The below code works properly, but it is hard coded. I would like to be able to create an array of field sets, hide those fields, then each time I click on the "#createEventForm-eventInformation-addElement" button it displays the next one. The problem with the below code is that it is hard coded and thus would break easily and be much larger than using loops. Can someone help me make this better.
$("#fieldset-group1").hide();
$("#fieldset-group2").hide();
$("#fieldset-group3").hide();
$("#fieldset-group4").hide();
$("#fieldset-group5").hide();
$("#fieldset-group6").hide();
$("#fieldset-group7").hide();
$("#fieldset-group8").hide();
$("#fieldset-group9").hide();
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
if($("#fieldset-group1").is(":hidden"))
{
$("#fieldset-group1").show();
}
else
{
$("#fieldset-group2").show();
}
}
);
You should use the ^= notation of the jquery selectors which means starting with ..
// this will hide all of your fieldset groups
$('[id^="fieldset-group"]').hide();
Then
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
// find the visible one (current)
var current = $('[id^="fieldset-group"]:visible');
// find its index
var index = $('[id^="fieldset-group"]').index( current );
// hide the current one
current.hide();
// show the next one
$('[id^="fieldset-group"]').eq(index+1).show();
}
);
A quick idea.
Add a class to each fieldset lets say "hiddenfields". Declare a global variable to keep track of which field is shown.
$(".hiddenfields").hide();//hide all
var num = 0;//none shown
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
num++;
$("#fieldset-group" + num).show();
}
);
Here is one simple solution.
var index = 0;
var fieldsets = [
$("#fieldset-group1").show(),
$("#fieldset-group2"),
$("#fieldset-group3"),
$("#fieldset-group4"),
$("#fieldset-group5"),
$("#fieldset-group6"),
$("#fieldset-group7"),
$("#fieldset-group8"),
$("#fieldset-group9")
];
$("#createEventForm-eventInformation-addElement").click(function() {
ajaxAddEventInformation();
fieldsets[index++].hide();
if (index < fieldsets.length) {
fieldsets[index].show();
}
else {
index = 0;
fieldsets[index].show();
}
});
Add a class 'fieldset' to all fieldsets, then:
$("#createEventForm-eventInformation-addElement").click(
function() {
ajaxAddEventInformation();
$('.fieldset').is(':visible')
.next().show().end()
.hide();
}
);
This will show the first hidden fieldset element whose ID attribute starts with "fieldset-group"...
$("fieldset[id^='fieldset-group']:hidden:first").show();
How about to add (or only use) a class for that fields?
$(".fieldset").hide(); // hides every element with class fieldset
$("#createEventForm-eventInformation-addElement").click( function() {
ajaxAddEventInformation();
// I assume that all fieldset elements are in one container #parentdiv
// gets the first of all remaining hidden fieldsets and shows it
$('#parentdiv').find('.fieldsset:hidden:first').show();
});