please see this question here for context...
The script has the function of adding various "clones" of the original inputs ID's for example :
#YXS
Would be come
#YXS2
This happens via this code from an external js file
// Increment input ID
clone.find(':input').attr('id', function(i, val) {
return val + count;
});
So in the original code :
$('#YXS, #YSM, #YMED, #YLRG, #YXLRG, #SM, #MED, #LRG, #XL, #XXL, #XXXL, #XXXXL').on("input", function() {
Ive tried adding "#YXS2" to the list, but its not working out as intended.
For more context here is the form here, but not 100% this is just example of its appearance. So you can see when you click the "+" icon to add a garment, a new instance of that form appears.
Hopefully my explanation isnt TOO sketchy! Any help is awesome help! Thanks in advance!
Related
I am working on a shopify template, so I a tryig to edit some code, and change some CSS properties using JS.
When I inspect my elements, I see that :
I am intersted in four elements, with classes "spr-container", "spr-summary-caption", "spr-summary-actions", "spr-content", So i wrote this code :
<script>
let urlPr = window.location.href;
if(urlPr.includes("products")){
setTimeout(function(){
console.log(document.getElementsByClassName("spr-container"));
console.log(document.getElementsByClassName("spr-summary-caption"));
console.log(document.getElementsByClassName("spr-summary-actions"));
console.log(document.getElementsByClassName("spr-content"));
},1000);
}
</script>
And I get this on my console :
Which means I am getting emty collections, but when I click one of them, the collection length becomes 1 and when I click the element shown in the inspector it takes me to my wanted element.
This is causing me problem, because when I try to get my element like that :
console.log(document.getElementsByClassName("spr-container")[0]);
I get :
undefined
Is there anyway that can help me solve this problem.
Any help would be much appreciated.
Wrap it:
document.addEventListener("DOMContentLoaded", getData);
function getData() {
let urlPr = window.location.href;
if(urlPr.includes("products")) {
console.log(document.getElementsByClassName("spr-container"));
console.log(document.getElementsByClassName("spr-summary-caption"));
console.log(document.getElementsByClassName("spr-summary-actions"));
console.log(document.getElementsByClassName("spr-content"));
}
}
I have the following code inside a file called additional.js for a WordPress website I'm working on:
// Fade in for news posts
jQuery(".elementor-post").each(function(i) {
jQuery(this).delay(250 * i).fadeIn(1000);
});
// Alphabetical Filter for Products
var $boxes = $('.elementor-posts-container > .elementor-post');
var $btns = $('.alphabet-btn').click(function() {
var id = this.id;
if (id == 'all') {
$boxes.show()
} else {
$boxes.hide().filter(function() {
var re = new RegExp('^' + id, 'i');
return re.test($(this).text().trim());
}).show()
}
$btns.removeClass('alphabet-active');
$(this).addClass('alphabet-active');
})
The first part is a simple timed fade in for my blog posts and the second part is the js for an alphabetical filter on my products page.
Currently, the alphabetical filter is acting strangely. If you go here and click on B, for example, http://staging.morningsidepharm.com/products/generic-medicines/ if filters and leave the product beginning with B but then it fades in all of the other products after this - This is only on the initial click... after that, when you click around it seems to be acting as it should.
If I remove the first bit of code from the top of my file:
jQuery(".elementor-post").each(function(i) {
jQuery(this).delay(250 * i).fadeIn(1000);
});
Everything in the alphabet search works correctly, even on the initial click.
Which makes me believe there is something conflicting in the two bits of code.
Do I need to END the first bit of code somehow? or I there something else conflicting here?
I tried separating them and putting them in different .js files, but I guess that doesn't work because they both are still fired when the page loads.
Any help would be greatly appreciated, I'm so close! :)
In the first part you use a syntax of JQuery() and in the second you use another $() test by changing JQuery() by $() in the first part of your code, maybe that makes conflict.
Ok, I found the issue.
In the first bit of code, I'm targeting the .elementor-post selector without being specific to which .elementor-post I want to target. This meant it would affect the div .elementor-post sitewide.
Adding a container class and changing the top part of the code to the following fixed things:
// Fade in for news posts
jQuery(".fade-in-post-container .elementor-post").each(function(i) {
jQuery(this).delay(250 * i).fadeIn(1000);
});
I'm writing a plug-in somewhat same like auto-complete or virtual keyboard with selected input values along with sorting and searching. This plugin is working fine to if I use it once in a page but when I apply this one to more then one then it is showing both the boxes and events are applied on the last written object. Sample code and fiddle is below:
http://jsfiddle.net/mantrig/ugmwa5b5/
my plug in code to in :
$(document).ready(function(){
var testData = ["BSL","DSK","NPNR","SAV","ET","NDLS","JPR","MAS","BCT","NZM","BR","SUJH"];
$(".stations").myAutoSuggest({
data:testData,
dataref:"stationsList",
title:"Station List",
sort:"desc"
});
var trainData = ["12345","32151","64231","56421","78542","13452"];
$(".trains").myAutoSuggest({
data:trainData,
title:"Train List",
dataref:"trainsList",
sort:"desc"
});
});
I'm very much new to writing any plug-in so code may be very dirty. A little help will be much appreciated!!
You missed '.
Change $(body).append(html); to $('body').append(html);
Jsfiddle
Problem is your "selectedTextbox" variable change here will solve your problem
$(".Help").bind("focus",function(e){
selectedTextbox=this;
showVirtualHelp(selectedTextbox);
});
and later using it here because there are multiple text boxes so you need to pass reference current focused element to show help box
function showVirtualHelp(selectedTextbox) {
$(".virtualHelp."+settings.dataref).css("top",($(selectedTextbox).offset().top+30)+"px");
$(".virtualHelp."+settings.dataref).css("left",($(selectedTextbox).offset().left+30)+"px");
$(".virtualHelp."+settings.dataref).show();
}
Working Fiddle
I am trying to replace a specific snippet of text inside a paragraph. I am just trying to replace the phone number. The code inside the body i am unable to access due to it being pushed to us via our partner.
To see what options are available please contact a lodging specialist
via calling 866.264.1842.
I have tried
$("body").html(
$("body").html().replace(/866.264.1842/g,'888.888.4754') );
This works however it breaks other code on our page and makes our calendar picker not work. Is there a way just to do this with css. I have access to the CSS but not the JS that is running on the page.
Let's assume the phone number is in a div which ID is "contact". Then you have to do that:
$("#contact").html($("#contact").html().replace(/866.264.1842/g,'888.888.4754'))
That way you don't remove the DOM modifications made by your calendar picker javascript code.
I have rewritten a function for this, hopefully this should work for you
function replaceDOMText(str, replaceWith) {
$('body:contains(' + str + ')').contents().each(function() {
if (this.nodeType == 3) {
$(this).parent().html(function(_, oldValue) {
return oldValue.replace(RegExp(str, "g"), replaceWith);
})
}
});
}
// Call like this
replaceDOMText("866.264.1842", "888.888.4754" );
Play with this fiddle
I need your help at a problem of my Wordpress Webpage. My Wordpress-page is an Single-Page-App with 3 different boxes of content. The left and center boxes are static, the right one changes its content by clicking on links of the other boxes. I decided, to load all the content in the right box and show them with the CSS-command visibility. With a combination of pathJS and JS, i want the URL to change by clicking on the links. So far so good - all works fine, but i dont get managed via my JS-Function to remove the shown-class.
My script looks like this:
<script>
function showDetailContent(showid) {
//suche objekt right_id -> was du zeigen willst -> getelementbyid
alert("1");
var id = document.getElementsByClassName('shown');
alert("2");
id.classList.remove('shown');
alert("3");
document.getElementByID("right_" + showid).classList.add('shown');
alert("4");
}
//var c = document.getElementById('content'); -->do the function :)
Path.map("#/?p=<?php the_id();?>").to(function () {
showDetailContent(<?php the_id();?>);
});
Path.listen();
</script>
The alerts are just my way of "debugging". I think its not the best way to debugg, but i am very new in the world of prorgamming and this is kind of easy.
However, the first two alerts are shown, if i activate a link. So the (first) mistake is on the line
id.classList.remove('shown');
Normally, the right-box is hidden, so that only one content is load.
Do you understand my problem till here?
I would appreciate fast help!
Greetings, Yannic! :)
Look at this : http://snipplr.com/view/3561/ to know remove class pure javascript
getElementsByClassName gets multiple elements, try:
var id = document.getElementsByClassName('shown')[0];
Or iterate through them if you want to remove class from all elements with class shown;