I have a issue...
I'm trying to get element ID using:
$('div').on('click',function(ev){
ev.stopPropagation();
checkEl = $(this).attr('id');
if(checkEl != 'topics' && checkEl != 'exfillVal' ){
$("#topics").hide();
}
})
But... it also block other elements with different event listener (click one's)...
How can i achieve that?
$(function(){
var newHTML =[];
$('div').on('click',function(ev){
ev.stopPropagation();
checkEl = $(this).attr('id');
if(checkEl != 'topics' && checkEl != 'exfillVal' ){
$("#topics").hide();
newHTML.push('<span class="reopen" title="usuń">' + checkEl + '</span>');
}
$('#new').html(newHTML);
})
$('body').on('click', '.reopen',function(){
$(this).hide();
$("#topics").show();
})
// but that work
$('.reopen').on('click',function(){
$(this).hide();
$("#topics").show();
})
})
#main{
position:relative;
width:300px;
background-color:red;
}
div{
position:relative;
border:1px solid gray;
padding:15px;
width:100%:
}
#one{
background-color:black;
}
#two{
background-color:blue;
}#three{
background-color:orange;
}#four{
background-color:yellow;
}#fifth{
background-color:purple;
}
span{
padding:3px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<div id="one">
<div id="three">
<div id="four">
<div id="fifth">
</div>
</div>
</div>
</div>
<div id="topics">SOME COOL DATA </div>
</div>
<div id="new"></div>;
As you can see when i click on div with id "one,two,three,four,fifth,main" everything is working... but when append span element were clicked... Event listener aren't working correct, because append element schooled be hidden when click... instead of it just create another element.... where i make a issue?
Can i replace propagation with something else?
How i can rearrange a code?
Any help will be appreciate
You could verify whether the handler is dealing with the original element or with a parent by comparing ev.target with ev.currentTarget. When they are the same then you know the click was really on that element, and it's not a parent you are looking at:
$('div').on('click',function(ev){
checkEl = $(this).attr('id');
if (ev.target === ev.currentTarget && checkEl != 'topics' && checkEl != 'exfillVal' ){
$("#topics").hide();
}
});
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>
My goal is to have #box2 appear when I click on #box1 but when you click on something other than #box2, it will display none and only #box1 will show.
Here are my 2 boxes, they are just 2 styled divs:
var condition;
$(document).click(function() {
if (condition === 'block') {
$(":not(#box2)").click(function() {
$("#box2").hide();
});
}
})
$('#box1').click(function(e) {
$('#box2').css('display', 'block');
condition = 'block';
});
$('#box2').click(function(e) {
$('#box2').css('display', 'none');
condition = 'none';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" style="width: 300px; height: 300px; background-color: red; margin-left: 100px; margin-bottom: 50px; position: absolute;">
</div>
<div id="box2" style="width: 300px; height: 300px; background-color: blue; margin-left: 150px; display: none; position: absolute;">
</div>
This current code works correctly the first time but after that, it wont run again. I am just wondering if there is a reset function or where I am going wrong?
Really what I want to do is make this work on an ipad so when the user clicks/taps away from the box, it will close. If there are better ways to do this on the Ipad tablet, please let me know!!
Any ideas?
Don't overcomplicate things. This is all the javascript you need, get rid of everything else:
$(document).click(function () {
$('#box2').hide();
});
$('#box1').click(function (e) {
e.stopPropagation();
$('#box2').show();
});
You could just filter event target at document level:
$(document).on('click', function(e) {
$('#box2').toggle(!!$(e.target).closest('#box1').length);
});
-jsFiddle-
You can listen to all click events of the document and then use the event.target to detect which element is being clicked. if the clicked element is box1 and box2 is not being shown then display it to the user. in any other condition we can hide the box2 if it's not the element being clicked. here is the vanilla JavaScript code to achieve this:
<html>
<body>
<div id='box1'>BOX ONE</div>
<div id='box2' style="display: none;">BOX TWO</div>
<script>
document.addEventListener('click', function(event) {
var secondBox = document.getElementById('box2')
if(event.target.id === 'box1' && secondBox.style.display === 'none'){
secondBox.style.display = 'block'
} else if (event.target.id !== 'box2') {
secondBox.style.display = 'none'
}
})
</script>
</body>
</html>
And if you are into DRY (Do not repeat yourself), you can define a function for this task. Take look at this modified version of the script:
function addOpenHandler(handler, target){
document.addEventListener('click', function(event) {
if(event.target === handler && target.style.display === 'none'){
target.style.display = 'block'
} else if (event.target !== target) {
target.style.display = 'none'
}
})
}
addOpenHandler( document.getElementById('box1'), document.getElementById('box2') )
$(document).click(function () {
if (condition === 'block')
{
$(":not(#box2)").click(function () {
$("#box2").hide();
});
}
})
The line $("#box2").hide(); is firing after every click
I am trying to learn jquery keypress to add class system.
I have tryed the following code but it doesn't worked. I have tryed with an ID here. When started the #ttt1 then the the #rb1 background color should change but nothing happened.
What i am doing wrong or what i need to do here? Anyone can tell me ?
This id DEMO from codemep.io
$(document).ready(function() {
var ID = $(this).attr("id");
$("#ttt" + ID).on('keypress', function() {
if ($(this).val().length > 20) {
$("#rb" + ID).addClass("ad");
} else {
$("#rb" + ID).removeClass("ad");
}
});
});
HTML
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea>
</div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea>
</div>
<div class="br" id="rb2">Button</div>
</div>
You are defining a variable ID inside a function which occurs on $(document).ready(). Inside that function the value this will point to the document. What you need to do is to define the variable inside the keypress event handler function.
Use class for selection and then use $(this).attr("id") inside the handler function. Also you can use $(this).closest('div').next() to get the next element in the parent.
DEMO
$(document).ready(function() {
//here value for this is the document object and the id is not useful.
$(".test").on('keyup', function() {
//but here value for this is textarea where keypress event happened.
var ID = this.id;
if (this.value.length > 20) {
$(this).closest('div').next().addClass("ad");
} else {
$(this).closest('div').next().removeClass("ad");
}
});
});
.container {
margin:0px auto;
width:100%;
max-width:500px;
position:relative;
margin-top:100px;
}
.test {
outline:none;
border:1px solid red;
width:100%;
min-height:100px;
}
.br {
background-color:blue;
width:100px;
height:40px;
}
.ad {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt1" placeholder="Write"></textarea></div>
<div class="br" id="rb1">Button</div>
</div>
<div class="container">
<div class="tWrp">
<textarea class="test" id="ttt2" placeholder="Write"></textarea></div>
<div class="br" id="rb2">Button</div>
</div>
I have a script that open's div's by doing an onclick="toogle_visibility(id)
event but how do i do when i want to close the div that is open and open
the new div ?
Javascript/jQuery:
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
HTML:
<div class="navBar">
Social
Följer
Bokmärken
</div>
<div id="Social">
#Liam_Rab3 - TWITTER<br>
#Liam_Rab3 - INSTAGRAM<br>
#LiamRab3- FACEBOOK<br>
#Liam_Rab3 - YOUTUBE<br>
#Liam_Rab3 - FLICKR<br>
#Liam_Rab3 - TUMBLR<br>
</div>
<div id="Foljer">
Sebbe Stakset (Kartellen)
</div>
CSS:
a:link {
color:white;
text-decoration:none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
a:hover {
color:white;
text-decoration:none;
font-size:100%;
}
a:visited {
text-shadow:0px 0px 0px #0066BB;
color:white;
}
#social {
display:none;
}
#Foljer {
display:none;
}
DISCLAIMER!
These links in the #social and #bokmarken links is'nt for commercial purpose.
You can use JQuery Toggle
<div id="clickme">
Click here !!!
</div>
<a href="#social" >Social</a>
$( "#clickme" ).click(function() {
$( "#social" ).toggle(); //With no parameters, the .toggle() method simply toggles the visibility of elements:
});
First choose the control you are willing to hide/show, then use that control's id as follows:
$('#<id-of-that-control>').toggle();
Now you can call that in the onclick event handler of a button or div as you wish.
How it might appear for you is:
JS
function toggle_visibility(id) {
$('#' + id).toggle();
}
HTML
<div class="navBar">
Social
Följer
Bokmärken
</div>
Update:
As pointed out by Brodie, seemingly you might always look into the solution provided by Niet the Dark Absol. As he provides you a pure JS implementation. My solution will give you insight of using a library like JQuery and it's API of toggle. Jquery provides a wide range of built-in functionality that helps you to do things quickly. What my piece of code provides you is usage of an api i.e. toggle, which when used will be same as the hide and show behavior.
Basically, you need to close all DIVs, and toggle the current one.
Try this:
var ids = ['Social','Foljer','Bokmarken'];
function toggle_visibility(id) {
var l = ids.length, i, e;
for( i=0; i<l; i++) {
e = document.getElementById(ids[i]);
if( id != ids[i])
e.style.display = 'none';
else if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
}
i have a problem. I try to show up a div when the visibility class is visible. My code isn't working.Please help me fix this.
CSS:
#nor1 {position:absolute;top:100px;left:100px;z-index:2;}
#var1 {position:absolute;top:100px;left:100px;z-index:7; visibility:hidden;}
#corect {position:absolute;top:0px;left:0px;z-index:9;}
Javascript:
$('#box').click(function () {
$("#var1").css('visibility', 'visible');
});
$('#nor1').click(function () {
if ($('#var1').css("visibility") == 'visible') {
$('#corect').delay(500).fadeIn('slow');
}
});
I think you got mixed up with your css
http://jsfiddle.net/hz9nU/2/
#corect {display: none;}
Apart from that it seems to work
Works fine for me. Ensure your ID's are correct (jQuery is referencing the correct HTML element):
jQuery:
$('#nor1').click(function(){
if (($('#var1').css("visibility") == 'visible') && ($('#var2').css("visibility")) == 'visible') {
$('#correct').delay(500).fadeIn('slow');
}});
HTML:
<input id="nor1" type="button" />
<div id="var1" style="visibility: visible">
</div>
<div id="correct" style="display:none">
rtretert
</div>
CSS:
#correct {
background-color: red;
width:400px;
}
http://jsfiddle.net/CwShT/1/
For clarity:
$('#nor1').click(function(){
var1 = $('#var1').css("visibility");
var2 = $('#var2').css("visibility");
if ((var1 == 'visible') && (var2 == 'visible')) {
$('#correct').delay(500).fadeIn('slow');
}
});