I have one input and span. When I type in input value is passed to span. Now I want to hide other div/button or something if my span have specific value. My code don't work. What's wrong?
$('#input').on('keyup', function(){
$('#status').html($(this).val());
});
$('#status').on('change', function(){
var status = $('#status').html();
if (status == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
#test {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<span id="status"></span>
<div id="test"></div>
Instead of checking changes on span element, it is better to do this logic inside of input event listener. Something like this:
$('#input').on('keyup', function(){
var val = this.value;
$('#status').html(val);
if (val == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
Liste the keyup event and change the background
$('#input').on('keyup', function(){
$('#status').html($(this).val());
console.log($(this).val());
if ($('#status').html() == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
#test {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<span id="status"></span>
<div id="test-container">
<div id="test"></div>
</div>
Related
I need to check if a div is empty and ignore white spaces.
If you type one or more spaces inside the below div and click the button, it logs "empty" instead of "not empty".
$('button').on('click', function(){
let a = $('#wrap').html();
if(a == '' || a.trim() == ''){console.log('empty');}
else{console.log('not empty');}
});
.wrap{
background:gold;
min-height:25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
You should use .text() instead. Also, the first check for an empty string is superfluous. The root cause of this issue is that spaces are represented as in HTML, which you can see if you console.log(a).
$('button').on('click', function() {
let a = $('#wrap').text();
if (a.trim() == '') {//or simply, if(!a.trim()){
console.log('empty');
} else {
console.log('not empty');
}
});
.wrap {
background: gold;
min-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
You can simply jQuery .text() to check for length of any text in div. This will avoid (not count) spaces.
The way .html() works is that it will count white spaces as well.
Run snippet below.
$('button').on('click', function() {
let a = $('#wrap').text();
if (a == '' || a.trim() == '') {
console.log('empty');
} else {
console.log('not empty');
}
});
.wrap {
background: gold;
min-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
I have simple div with one element:
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
When I click on #drop-zone I want to trigger input manually. I'm trying like this:
jQuery('#drop-zone:not(input)').click(function() {
jQuery(this).find('input[type="file"]').trigger('click')
})
The main problem is that I'm getting an endless loop of clicks as my manual click trigger listener on parent element.
Make sure that the element clicked was the drop-zone by checking the id of the target. When jQuery emulates an event it will pass the same this reference but will not pass the event, so just check if the event is set.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone" && event.originalEvent) {
$("#drop-zone>input").trigger("click");
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
You could also just trigger the event manually.
$("#drop-zone").click(function(event) {
if (this.id === "drop-zone") {
$("#drop-zone>input")[0].click();
}
})
#drop-zone {
background-color: red;
height: 50px;
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none;" multiple="multiple">
</div>
Maybe this is what you want:
var x_m = 0;
var y_m = 0;
$('#drop-zone').click(function(event) {
var mtarget = document.elementFromPoint(x_m, y_m);
if (mtarget.id === "drop-zone") {
var input = $(this).find('input[type="file"]');
var h = false;
if ($(input).is(":visible")) {
input.hide();
} else {
input.show();
h = true;
}
console.log("You clicking, the #drop-zone, input.visible =>", h);
} else {
console.log("You clicking the input.");
}
})
$('body').mousemove(function(evt){
x_m = evt.pageX;
y_m = evt.pageY;
});
#drop-zone {
height: 40px;
width: 250px;
background-color: #8b5fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="drop-zone">
<input type="file" style="display: none; background: green;" multiple="multiple">
</div>
I have a comparison in my if statement to check if the id's are identical, but I want to detect the B element who has the same id as the A element and give him a class. You can see the problem in this script:
jQuery('.button').click(function() {
var a = jQuery('.a').attr('id')
var b = jQuery('.b').attr('id')
if (a === b) {
// "jQuery(this)" should be the detectet B-element, which has the same "id" as A
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
jQuery(this).addClass("active");
jQuery(this).css("background", "red");
// But it detects the button as "jQuery(this)"
} else {
return;
}
});
.a,
.b,
.c {
width: 100px;
height: 100px;
margin: 1em;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button
<div class="a" id="block">A</div>
<div class="b" id="block">B</div>
<div class="c" id="notblock">C</div>
Thanks for helping!
Here is the optimised code that you can have a look at. Instead of ID, you can use data attributes:
jQuery('.button').click(function() {
var a = jQuery('.a').data('check');
var $belement = jQuery('.b');
var b = $belement.data('check');
if (a === b) {
$belement.addClass("active").css("background", "red");
}
});
.a,
.b,
.c {
width: 100px;
height: 100px;
margin: 1em;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button
<div class="a" id="block-a" data-check="block">A</div>
<div class="b" id="block-b" data-check="block">B</div>
<div class="c" id="notblock" data-check="notblock">C</div>
Ideally, DOM should never have same IDs. IDs are unique, classes can be same. And hence, your entire logic or question is kinda incorrect. You should rather compare some value or other attributes, but never IDs. IDs can't be compared as they are supposed to unique.
Try this : you need to get b element jquery object, here jQuery(this) is the button you clicked
jQuery('.button').click(function() {
var a = jQuery('.a').attr('id');
var $belement = jQuery('.b');
var b = $belement.attr('id')
if (a === b ) {
// "jQuery(this)" should be the detectet B-element, which has the same "id" as A
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
$belement.addClass("active");
$belement.css("background", "red");
// But it detects the button as "jQuery(this)"
}
else {
return;
}
});
.a, .b, .c {
width: 100px;
height: 100px;
margin: 1em;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Button
<div class="a" id="block">A</div>
<div class="b" id="block">B</div>
<div class="c" id="notblock">C</div>
jQuery('.button').click(function() {
var a = jQuery('.a').attr('id')
var b = jQuery('.b').attr('id')
if (a === b ) {
// "jQuery(this)" should be the detectet B-element, which has the same "id" as A
// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
jQuery('.b').addClass("active");
jQuery('.b').css("background", "red");
// But it detects the button as "jQuery(this)"
}
else {
return;
}
});
Add the class to the element.
$(document).ready(function() {
$('#input').focusin(function() {
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
});
});
$('#input').focusout(function() {
$('#div').hide();
});
});
#div {
display: none;
position: absolute;
bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='website.com'>Link From AJAX<a>
<a href='website.com'>Link From AJAX<a>
<a href='website.com'>Link From AJAX<a>
</div>
<input id='input' type='text'>
In this jquery code, the #div shows when i type something inside the #input but if i tried to click on the #div it disappears and the link doesn't work,
How can i keep the #div shown if i clicked on #div or #input only, But anything outside will hide it as normal?
The Problem happens because of position: absolute; bottom 20px line in CSS.
Updated the code and suddenly it worked as intended after adding if statement after .focusin function, For previous error solution, remove the position and bottom in the CSS
You could disable the effect of the focusout handler by the use of a flag:
var noHide = false;
$(document).ready(function() {
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
});
$('#div a').hover(
function() { noHide = true; },
function() { noHide = false; $('#input').focus(); }
);
$('#input').focusout(function() {
if(!noHide) {
$('#div').hide();
}
});
});
#div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='#'>HellWorld</a>
</div>
<input id='input' type='text'>
When you blur out of the input, check if the currently active element is the DIV, and hide it if it isn't.
Also, if you're positioning an element absolutely, you need to give it a z-index so you can click on it. Otherwise, the click is sent to the normally-positioned element at that location.
$(document).ready(function() {
$('#input').focus(function() {
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
}).blur(function() {
if (!$("#div").is(":focus,:active")) {
$("#div").hide();
}
});
$('#input').keyup(function() {
// If not empty value, show div
if ($(this).val() != '') {
$('#div').show();
} else {
$('#div').hide();
}
var search = $('#input').val();
$.post('search.php', {
search: search
}, function(data) {
$('#div').html(data);
});
});
});
#div {
display: none;
position: absolute;
bottom: 20px;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>
<a href='www.someplace.com'>HellWorld</a>
</div>
<input id='input' type='text'>
When I'm typing a login or password, tooltip appears with one or more sentences.
Every tooltip has the same z-index, but I want to change it to higher when I'm focused at adequate input and bring it back at blur event, but I might have 10 inputs with many options in tooltip. Is it possible to write function without using ID of tooltip?
$(document).ready(function() {
$('input').focus(function() {
$('div.tooltip').addClass("active");
});
$('input').blur(function() {
$('div.tooltip').removeClass("active");
});
$('#login').keyup(function() {
var th = document.getElementById('login').value;
if (th.length < 6) {
$('#result').css('display', 'inline');
var ex = $("#too_short").text();
if (!ex) {
$('#result').append('<p id="too_short">Too short password.</p>');
}
} else {
$("#too_short").remove();
}
if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')) {
$('#result').css('display', 'inline');
var en = $("#forb_char").text();
if (!en) {
$('#result').append('<p id="forb_char">Forbidden characters</p>');
}
} else {
$("#forb_char").remove();
}
});
$('#pwd').keyup(function() {
var th = document.getElementById('pwd').value;
if (th.length < 6) {
$('#result1').css('display', 'inline');
var ex = $("#too_short1").text();
if (!ex) {
$('#result1').append('<p id="too_short1">Too short password.</p>');
}
} else {
$("#too_short1").remove();
}
if (th.contains('\'') || th.contains('\"') || th.contains('\\') || th.contains('\/')) {
$('#result1').css('display', 'inline');
var en = $("#forb_char1").text();
if (!en) {
$('#result1').append('<p id="forb_char1">Forbidden characters</p>');
}
} else {
$("#forb_char1").remove();
}
});
});
.tooltip {
position: absolute;
border: 2px solid red;
display: none;
margin-left: 250px;
background: blue;
z-index: 1;
color: white;
}
.active
}
z-index:999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form name="form" id="form" method="post">
<div id="result" class="tooltip"></div>
<span> Write login: </span>
<input id="login" name="login" type="text" />
<br/>
<div id="result1" class="tooltip"></div>
<span> Write pwd: </span>
<input id="pwd" name="pwd" type="text" />
</form>
<!-- How to addClass active to proper div.tooltip? -->
Something like this? :
http://jsfiddle.net/9n2db67u/22/
Your code is very messy. Try to use TidyUp when posting jsfiddle links..
$('input').on('click', function () {
$('.active').removeClass('active');
$(this).prevAll('div').addClass('active'); //.css('z-index', '20000');
});