I'm trying to use jQuery-Mask-Plugin on an input which value can be dynamic. This input can be any number with, at least, 2 digits to a maximum of 8 digits and the mask is a '-'. For example I can have '2-2', '45-8' or '9999999-8', etc.
The issue is that the mask isn't working at all. I managed to make it work using $("#input-area input").mask("00-0"); but that way, my mask isn't dynamic.
Here's what I was trying to do:
var options = {
onKeyPress: function (conta, ev, el, op) {
var masks = ['0-0', '00-0', '000-0', '0000-0', '00000-0', '000000-0', '0000000-0', '0000000-0'];
if(conta.length == 2){
var mask = masks[0];
} else if(conta.length == 3){
var mask = masks[1];
} else if(conta.length == 4){
var mask = masks[2];
} else if(conta.length == 5){
var mask = masks[3];
} else if(conta.length == 6){
var mask = masks[4];
} else if(conta.length == 7){
var mask = masks[5];
} else if(conta.length == 8){
var mask = masks[7];
}
$('#input-area input').mask(mask, options);
}
}
if($('#input-area > div > input').length == 2){
$('#input-area > div > input').mask('0-0', options);
} else if($('#input-area > div > input').length == 3){
$('#input-area > div > input').mask('00-0', options);
} else if($('#input-area > div > input').length == 4){
$('#input-area > div > input').mask('000-0', options);
} else if($('#input-area > div > input').length == 5){
$('#input-area > div > input').mask('0000-0', options);
} else if($('#input-area > div > input').length == 6){
$('#input-area > div > input').mask('00000-0', options);
} else if($('#input-area > div > input').length == 7){
$('#input-area > div > input').mask('000000-0', options);
} else if($('#input-area > div > input').length == 8){
$('#input-area > div > input').mask('0000000-0', options);
}
A few things wrong here
First of all and the most obvious is that you are initiating the
mask before the input is loaded in DOM. Load the input first then
the mask
You are missing code: Where is the event that loads the dynamic input?
You are loading your onKeyPress in the options?
You might want to structure your jquery as such
HTML
However your keypress is made (click event), make it so it passes the value of the length. Basically, load your data-id dynamically beforehand in the button. In my example, it is 2
<button class="loadinput" data-id="2">Click</button>
<div id="input-area"><div></div></div>
JQUERY
Then in jquery load the input first, then load the mask
$(document).on('click', '.loadinput', function() {
var this_length = $(this).attr('data-id');
$('#input-area > div').html('<input id="thisinput" type="text">');
if (this_length == 2) {
$('#thisinput').mask('0-0');
} else if (this_length == 3) {
$('#thisinput').mask('00-0')
}...and so on
})
Searching a bit further in the docs of Jquery Mask Plugin I found Recursive digits. It will be something like: $('#input-area > div > input').mask('##0-0', {reverse: true});
Related
anchorArrows is an element that if I click the checkbox it must be shown and if it's not checked it must be hidden. The classList hidden and show are CSS classes with opacity 0 and 1
let q = document.getElementById("Q").value;
let q2 = document.getElementById("q2").value;
const anchorArrows = document.getElementById("anchor");
if((chkQ.checked == true) && (chkQ2.checked == false)){
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if(q > 0){
flechas(0,"x");
}else{
flechas(180,"x");
}
}else{
anchorArrows.classList.remove("show");
anchorArrows.classList.add("hidden");
}
if((chkQ2.checked == true) && (chkQ.checked == false)){
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if(q > 0){
flechas(0,"y");
}else{
flechas(180,"y");
}
}else{
anchorArrows.classList.remove("show");
anchorArrows.classList.add("hidden");
}
CSS:
.hidden{
opacity: 0;
}
.show{
opacity: 1;
}
You need to use else if and one else. The issue you have is the first if can be true, but the second else will wipe away the class.
if (chkQ.checked && !chkQ2.checked) {
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if (q > 0) {
flechas(0, "x");
} else {
flechas(180, "x");
}
} else if (chkQ2.checked && !chkQ.checked) {
anchorArrows.classList.add("show");
anchorArrows.classList.remove("hidden");
if (q > 0) {
flechas(0, "y");
} else {
flechas(180, "y");
}
} else {
anchorArrows.classList.remove("show");
anchorArrows.classList.add("hidden");
}
And to get rid of repeated code
let isValid = false;
if ((!chkQ.checked && chkQ2.checked) || (chkQ.checked && !chkQ2.checked)) {
isValid = true;
const num = +q > 0 ? 0 : 180;
const code = chkQ.checked ? "x" : "y";
flechas(num, code);
}
anchorArrows.classList.toggle("show", isValid);
anchorArrows.classList.toggle("hidden", !isValid);
Personally, I wouldn't use classes to change opacity, as multiple variables can affect the outcome of it. Instead, I would put opacity in the original Id/Class in the CSS, and use .style.opacity to change it.
For Example:
CSS:
#box {
opacity:1;
}
HTML:
<div id="box"></div>
Javascript:
document.getElementById('box').style.opacity = .5;
In your code, it would be anchorArrows.style.opacity = 1; for show, and anchorArrows.style.opacity = 0; for hidden.
I want return result which variable is available that page. How i can write true function ?
function variation() {
var variationControl = document.querySelectorAll(".type-label.subtype-square.selected")[0].innerText;
var doubleVariation = document.querySelector(".type-label.subtype-square.selected");
var singleVariation = document.querySelector("div.row > div > div > div.col-md-3.product-summary-fixed > div > div > div > p:nth-child(1)");
if(variationControl == null){
return "Single Variation";
} else {
return doubleVariation.innerText;
}
}
Probably should go with something like this:
function variation() {
var variationControl = document.querySelector(".type-label.subtype-square.selected");
var singleVariation = document.querySelector("div.row > div > div > div.col-md-3.product-summary-fixed > div > div > div > p:nth-child(1)");
if (variationControl === null || variationControl.innerText === ""){
return "Single Variation";
} else {
return variationControl.innerText;
}
}
I'm trying to hide a particular element on my browser game.
When it reaches the point of being visible it has to stay visible.
At the moment I've tried a few approaches but none of them seem to do the last part which is keeping it visible when the number of clicks goes back under the amount needed to make it visible.
CSS:
upgrade3 {
display: none;
}
js1(which completely doesn't work):
function showPerk() {
if (clicks >= price3reached || totalupgradeperk3 > 0) {
do{
document.getElementById("upgrade3").style.display =="block";
}
while(document.getElementById("upgrade3".style.display === 'none'));
}
update();
}
js2 (works but hides the element when going under the amount needed):
if (blnhideperk = true) {
if (clicks >= price3reached || totalupgradeperk3 > 0) {
document.getElementById("upgrade3").style.display = "block";
blnhideperk === false;
} // use === its something wierd about js = / == / === all do different comparisons
else {
document.getElementById("upgrade3").style.display = "none";
}
}
upgrade
Try
document.getElementById("upgrade3").style.display = "none";
Note the 1 equal sign, not 2 or 3, as those have other uses.
if (blnhideperk = true){
if (clicks >= price3reached || totalupgradeperk3 > 0){
document.getElementById("upgrade3").style.display = "block";
blnhideperk === false;}}
and moving
document.getElementById("upgrade3").style.display = "block";
out of the loop istead of in the else statement
seemed to do the trick
I have following Jquery
$('#txtSearch_text').attrchange(function (attrName) {
if (counter > 0) {
var contains = $('#txtSearch_text').attr('class').indexOf("validation");
if ($('#txtSearch_text').val() == '' && contains <= -1) {
$('#txtSearch_text').addClass('validation');
}
else if ($('#txtSearch_text').val() != '' && contains >= 0) {
$('#txtSearch_text').removeClass('validation');
}
}
//counter = 1;
});
The above jquery fires when txtSearch textbox changes any attribute. It works ok. but i want to fire above Jquery for multiple TextBoxes.. so if i have 4 TextBox then i will have to write Jquery 4 times for 4 different TextBox.
is there any way to write above jquery only one time for all TextBox ??
Thanks
You can pass comma seprated selector for all four textboxes. and inside use $(this) to get current object reference.Like this :
$('#txtSearch_text,#txtSearch_second,#txtSearch_third,#txtSearch_fourth').attrchange(function (attrName) {
if (counter > 0) {
var contains = $(this).attr('class').indexOf("validation");
if ($(this).val() == '' && contains <= -1) {
$(this).addClass('validation');
}
else if ($(this).val() != '' && contains >= 0) {
$(this).removeClass('validation');
}}});
Add a common class like txtSearch_text to all 4 elements then use it as a selector to target them
$('.txtSearch_text').attrchange(function (attrName) {
if (counter > 0) {
var contains = $(this).attr('class').indexOf("validation");
if ($(this).val() == '' && contains <= -1) {
$(this).addClass('validation');
} else if ($(this).val() != '' && contains >= 0) {
$(this).removeClass('validation');
}
}
//counter = 1;
});
I am writing a simple jQuery function to pick up a selector from the html page and on keypress(up or down) should add a CSS class to it.
Problem is that it is not detecting the selector to add the class.
The HTML selector is nested deep into the code.
html
body
div.fixed-header
div#main-nav.primary-nav.navbar
div.navbar-inner
div.primary-nav-right-content
ul.nav
li#global-search
div.search-results
ul.search-dropdown
ul.search-entry
I am trying to detect the selector ul.search-entry in my jquery.
What I have right now in my javascript is this.
var selector = $('ul.search-entry');
var selected;
$(window).keydown(function(e){
if(e.which === 40){
if(selected){
selected.removeClass('selected');
next = selected.next();
if(next.length > 0){
selected = next.addClass('selected');
}else{
selected = selector.eq(0).addClass('selected');
}
}else{
selected = selector.eq(0).addClass('selected');
}
}else if(e.which === 38){
if(selected){
selected.removeClass('selected');
next = selected.prev();
if(next.length > 0){
selected = next.addClass('selected');
}else{
selected = selector.last().addClass('selected');
}
}else{
selected = selector.last().addClass('selected');
}
}
else{
}
});
I have been racking my head for too long and I know am missing something really small. Any thoughts?
Set selector to just the selector string, not the collection that results, and call jQuery to search for it when needed.
var selector = 'ul.search-entry';
var selected;
$(window).keydown(function(e){
if(e.which === 40){
if(selected){
selected.removeClass('selected');
next = selected.next();
if(next.length > 0){
selected = next.addClass('selected');
}else{
selected = $(selector).eq(0).addClass('selected');
}
}else{
selected = $(selector).eq(0).addClass('selected');
}
}else if(e.which === 38){
if(selected){
selected.removeClass('selected');
next = selected.prev();
if(next.length > 0){
selected = next.addClass('selected');
}else{
selected = $(selector).last().addClass('selected');
}
}else{
selected = $(selector).last().addClass('selected');
}
}
else{
}
});