I need some help.. the idea behind this is like a simple toggle button that can hide the object and replacing the empty area with ****.
I was thinking it was more like in a Password form input where you can hide password by clicking the Eye icon. However, I needed something that are not required input form, something that is just simple DIV
function toggler(divId) {
$("#" + divId).toggle();
.css('content', 'sadas');
}
.hidden {
display:none;
}
this is a test
<div id="myContent" class='hidden'>
<div>this is a test #1 </div>
</div>
I can hide the DIV but leaving the empty area, how can I replace this empty area with ***** ??
example:
My balance is $200 [hide]
My balance is **** [show]
https://jsfiddle.net/qobgfLh6/
I have written a fiddle.
There are some points that can be better managed.
But I think you are looking for something like that.
The idea is to add another div with the **** placeholder and use toggleClass() function of jQuery.
$("#" + divId).toggleClass('hidden');
$("#myPlaceholder").toggleClass('hidden');
https://jsfiddle.net/qze8fydv/
Try to use something like this.
$(document).ready(function () {
function handle(input, toggler) {
var inputValue = ""
var shouldShowAsterisks = false
input.change(function () {
inputValue = $(this).val()
})
toggler.click(function () {
shouldShowAsterisks = !shouldShowAsterisks
shouldShowAsterisks
? input.val("*".repeat(inputValue.length))
: input.val(inputValue)
input.prop("disabled", shouldShowAsterisks)
})
}
handle($(".enter"), $(".toggler"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="enter" />
<button class="toggler">Hide</button>
function toggleElementMask(element){
//Regex to find *
let reg = /^\*+$/g;
//If all * we are masked
let isMasked = element.innerText.match(reg);
if(!isMasked) {
//Store the original text
element.dataset.original = element.innerText;
//Replace the contente with the same amount of *
element.innerText = "*".repeat(element.innerText.length);
}else{
//Restore the text
element.innerText = element.dataset.original;
}
}
//Mask on page load
$(".masked").each(function(){
toggleElementMask(this);
});
//Click event handler
$(".toggleMask").on("click", function(e){
e.preventDefault();
toggleElementMask($($(this).attr("href"))[0]);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
this is a test
<div id="myContent" class='masked'>
<div>this is a test #1 </div>
</div>
this is a test
<div id="myContent2" class='masked'>
<div>Another one</div>
</div>
this is a test
<div id="myContent3" class='masked'>
<div>one with <span>a</span> span</div>
</div>
Related
For example if have:
<div>New York</div>
So I would like to print another div like this:
<div>Free Delivery</div>
How would I do that using JS?
you can do this with simple js condtion:
add a class/id to to the element <div id="country">New York</div>
and in your script:
window.onload = () => {
const country = document.querySelector('#country');
const printdiv = '<div>Free Delivery</div>';
if(country && country.textContent.trim() == 'New York'){
document.querySelector('#country').insertAdjacentHTML('afterend',printdiv)
}
}
add id to element :
<div id="country">New York</div>
and then
let country = $('#country')
setInterval(()=>{
if(country.text()=='New York'){
// Your code
// exemple
alert('Congratulations ! We Ship for Free for New York
Customers');
}
},3000)
i hope it was useful
I want to check if time and day is same when I click to add these paragraphs into the array, If time and day is same then also prevent adding items into an array. Can Anyone help me please.Thanks
window.addEventListener("load", function() {
var test = [];
[...document.querySelectorAll(".container p")].forEach(function(para) {
para.addEventListener("click", function(e) {
var text = e.currentTarget.textContent;
if (test.indexOf(text) === -1)
{
test.push(text);
}
console.log(test)
})
})
})
<div class="container">
<p>
<b>Group:N</b>Code:1234<br/>
<b>Session Type:</b>CS<br/>
<b>Location:</b>Main Hall<br/>
<b>Time:</b>11:00<br/>
<b>Day:</b>Tuesday<br/>
<b>Duration:</b>1hour<br/>
</p>
</div>
<div class="container">
<p>
<b>Group:M</b>Code:98743<br/>
<b>Session Type:</b>NP<br/>
<b>Location:</b>Main Hall2<br/>
<b>Time:</b>11:00<br/>
<b>Day:</b>Tuesday<br/>
<b>Duration:</b>1hour<br/>
</p>
</div>
I am being able to provide option's in the menu bar but when I click on any of the option it's working absolutely fine,but if I tried to select twice it is changing at all places.
For Ex.
I want to make a ordered list such as:
1.Some Text here
a.option 1 b.option 2
c.option 3 d.option 4.
When I am trying to select some text its also converting 1 to A.
Please help.Thanks in advance
document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
$('li').attr('id', function(i) {
return 'unorder'+(counter+1);
});
$('ol > li').css({'list-style-type':selectedStyle});
You can ignore the counter part its not required.I was trying to put id at every element and use jquery to update only that part.
let counter = 0;
document.querySelectorAll (".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
elem.addEventListener("click",(event)=>{
counter++;
$('li').attr('id', function(i) {
return 'unorder'+(counter+1);
});
$('ul > li').css({'list-style-type':selectedStyle});
}
HTML
<div class="order-list-select" id="orderList" draggable="true">
<div>
<span class="jodit_popup_triangle"></span>
<div class="math-toolbar-top" id="orderlistHeader"></div>
<div class="order-list-main">
<div class="order-list-container"></div>
<div class="order-container">
<ol class="upper-roman">
<li><hr></li>
</ol>
<ol class="decimal">
<li><hr></li>
</ol>
</div>
</div>
</div>
</div>
Actual
1.text
2.text
Some text here
1.Txt
2.Txt
Expected
1.text
2.text
Some text here
a.Txt
b.Txt
I did it by Jquery don't know if its right approach but it has made me achieve my task.
Below is the code for my this.
document.querySelectorAll(".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
elem.addEventListener("click",(event)=>{
counter++;
document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
let select = window.getSelection().focusNode.parentElement.parentElement;
let ul_id = ""
$(select).attr('id', function(i) {
ul_id = "unorder"+(counter);
return ul_id;
});
if(selectedStyle == "right-arrow"){
$('#'+ul_id).css({'list-style-image':`url('icons/list-right-editor.svg')`});
}else if(selectedStyle == "open-square"){
$('#'+ul_id).css({'list-style-image':`url('icons/square-open-editor.svg')`});
}else{
$('ul').attr('type',function(){
return selectedStyle;
})
$('#'+ul_id).css({'list-style-type':selectedStyle});
}
document.querySelector(".unorder-list-select").remove();
})
});
Please change the classess accordingly to get the tag and click.
I got several divs using classes like
.wrap-1-addon-1
.wrap-2-addon-1
.wrap-3-addon-1
I want to select all of them and use if ( $(this).hasClass() ) to check if its one of them. Currently I only do check for a single class. How can I check all of these, for example .hasClass('wrap-*-addon-1')?
Best regards.
You can combine two jquery Attribute Starts With Selector [name^=”value”] and Attribute Ends With Selector [name$=”value”] to do this work.
$('div[class^="wrap-"][class$="-addon-1"]')
$('div[class^="wrap-"][class$="-addon-1"]').css("color", "red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1">wrap-1-addon-1</div>
<div class="wrap-2-addon-1">wrap-2-addon-1</div>
<div class="wrap-3-addon-1">wrap-3-addon-1</div>
<div class="wrap-3-addon-2">wrap-3-addon-2</div>
You can use starts with selector:
$('div[class^="wrap"]')
JsFiddle demo
You could use .is() which support multiple classes, unfortunately .hasClass() works only for one class at a time.
Example:
element.is('.wrap-1-addon-1, .wrap-2-addon-1, .wrap-2-addon-1')
It is better to add another class and select with this class. You can then test it with regex.
$el = $(".wrap");
$el.each(function() {
var test = /wrap-[1-3]-addon-1/.test($(this).attr("class"));
$(".result").html(test);
console.log(test);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap-1-addon-1 wrap"></div>
<div class="wrap-2-addon-1 wrap"></div>
<div class="wrap-3-addon-1 wrap"></div>
<div class="result"></div>
Inspiring regex matching from this answer:
var $ele = $("div:first");
alert(matchRule($ele.attr('class'),'wrap-*-addon-1'))
function matchRule(str, rule) {
return new RegExp("^" + rule.split("*").join(".*") + "$").test(str);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap-1-addon-1">
</div>
<div class="wrap-2-addon-1">
</div>
<div class="wrap-3-addon-1">
</div>
This might help you, i used regex to resolve if current element's class(es) suits the desired pattern.
I assume you have more than 3 classes to check.
This pattern is for wrap-1-addon-1 to wrap-n-addon-1, n is some digit
function hasMyClass(elm) {
var regex = /(wrap-)+(\d)+(-addon-1)/i;// this is the regex pattenr for wrap-*-addon-1
var $this = $(elm);
var myClassesStr = $this.attr('class');
if(myClassesStr) { // if this has any class
var myClasses = myClassesStr.split(' '); // split the classes
for(i=0;i<myClasses.length;i++) { // foreach class
var myClass = myClasses[i]; // take one of classes
var found = myClass.match(regex); // check if regex matches the class
if(found) {
return true;
}
}
}
return false;
}
function test() {
$('#container div').each(function(){
var $this = $(this);
$('#pTest').append('<br/>test result for ' + $this.attr('id') + ':' + hasMyClass(this));
// hasMyClass(this) is the sample usage
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="div1" class="wrap-1-addon-1 anotherClass">div1 (wrap-1-addon-1)</div>
<div id="div2" class="wrap-2-addon-1 anotherClass anotherClass2">div2 (wrap-2-addon-1)</div>
<div id="div3" class="wrap-3-addon-1 anotherClass">div3 (wrap-3-addon-1)</div>
<div id="div4" class="anotherClass">div4 (none)</div>
</div>
<button id="testBtn" onclick="test();" type="button">TEST</button>
<p id="pTest" >...</p>
I am trying to make a page where the user selects an item in a drop-down list, which then will create a duplicate drop-down list. The last drop-down list always needs to create a new one once an item is selected.
Using the following javascript code
<script type="text/javascript">
$(document).ready(function () {
$(function listselect() {
if (x == null) {
var x = 1;
}
//need to increment x after the completion of the following funciton so the function will trigger on different drop-down lists
$('#FooId' + x).change(function q() {
$('#FooId' + x).clone().attr('id', 'FooId' + (++x)).attr('name', 'Selected').insertAfter('#FooId' + (x - 1))
//return x;
});
//return x;
});
});
</script>
and the razor html
<div class ="container">
<div class="label">
#Html.LabelFor(Function(model) model.Foo, "Foo")
</div>
<div class="foo" id="foo">
#Html.DropDownList("FooId", Nothing, "--Select--", New With {.Name = "Selected", .Id = "FooId" & "1"})
//#*#Html.ValidationMessageFor(Function(model) model.Foo)*#
</div>
</div>
I am able to make the first list clone itself, but how do you return x from function q so that it can be used by its own function (Function q needs to trigger when an item is selected in Foo1, then Foo2, etc.).
(Sorry if this doesn't make sense, I am not sure how to word it. I am very new to coding). Thanks.
If I got you right, you don't need most of your code. And it's easier to use classes here. Just do it like this:
$(document).ready(function () {
$('.foo').on('change', function(e) {
var newFoo = $(e.target).clone();
$(e.target).after(newFoo);
});
});
And your markup part should be like this:
<div class ="container">
<div class="label">
#Html.LabelFor(Function(model) model.Foo, "Foo")
</div>
<div class="foo" id="foo">
#Html.DropDownList("FooId", Nothing, "--Select--", new {name = "Selected", #class = "foo" })
</div>
</div>
I don't remember Html.DropDownList signature so I created simple jsfiddle without it. I hope this is what you needed.
UPDATE:
I've corrected my fiddle as follows:
$(document).on('change', '.foo:last', function(e) {
var newFoo = $(e.target).clone();
$(e.target).after(newFoo);
});
Now it doesn't add extra selects if it's not the last select that was changed.