Here is my fiddle link.
I want to do some actions on clicking the parent box, except its one child with class .notClickableCol. I used :not(), but currently it is not working.
It is working when this text ("Not Clickable") is without <span> tag.
Any ideas?
HTML/CSS/Jquery:
jQuery(".row").on('click', ':not(.notClickableCol)', function() {
alert('success');
});
.row {
margin-bottom:15px;
border-bottom:1px solid #ccc;
}
.row {
width:150px;
height:150px;
display:inline-block;
vertical-align:top;
text-align:center;
color:#fff;
font-family:Arial;
font-weight:bold;
margin-right:10px;
background:#ff6777;
margin-left:50px;
}
.clickableCol {
display:block;
cursor:pointer;
margin-top:45px;
margin-bottom:20px;
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col">
<span class="clickableCol">Clickable</span>
</div>
<div class="col">
<span class="notClickableCol">Not Clickable</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="clickableCol">Clickable</span>
</div>
<div class="col">
<span class="notClickableCol">Not Clickable</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="clickableCol">Clickable</span>
</div>
<div class="col">
<span class="notClickableCol">Not Clickable</span>
</div>
</div>
Your selector is too broad. I'd use .col instead of .row:
jQuery(".col :not(.notClickableCol)").on("click", function () {
alert('success');
});
Here's a working fiddle.
You could also just just clickableCol and drop the .not() all together:
jQuery(".clickableCol").on("click", function() {
alert('success');
});
Here's another working fiddle.
Why don't you rather focus on the clickable element? like this:
jQuery(".row").on('click', '.clickableCol', function () {
alert('success');
});
You can do it like following.
jQuery(".row").click(function (e) {
if (!$(e.target).hasClass('notClickableCol')) {
alert('success');
}
});
UPDATED FIDDLE
Instead of excluding only the notclickablecol, you can tell it to only register when it has the class clickablecol using the has selector:
/* For a clickable col inside this row, not every clickableCol
that might be in another table */
jQuery(".row").on('click', ':has(.clickableCol)', function () {
alert('success');
});
You could just use an onclick event on the .clickableCol class, but this isn't nice because you might want another action when you click another col with this class.
Should describe not span with defined class ...
jQuery(".row").on('click', 'span:not(.notClickableCol)', function() {
alert('success');
});
Related
I want that when the click activate the element2 div, the element should disappear. And the element2 div should not appear at the beginning.
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
</div>
Add display none to hide an element from the start:
<div class="element2" style="display:none">
The rest of your code appears to be doing what it's supposed to, unless I am misunderstanding "I want that when the click activate the element2 div, the element should disappear"... which is entirely possible.
In order to have element2 hidden at the beginning you need to either add a style tag or even better add a CSS file where you will keep all of your stylings in one place.
For style tag:
<div class="element2" style="display:none">
For CSS:
.element2 {
display: none;
}
Then for your code you are close. In order to make element hide, you need to change it to:
$(".toggle").click(function() {
$(".element2").show();
$(".element").hide();
});
$(".close").click(function() {
$(".element2").hide();
$(".element").show();
});
The HTML will need some changes to, this will make what I wrote work the way I believe you want it to:
<div class="element">
Element 1
<div class="toggle">
toggle
</div>
</div>
<div class="element2">
Element 2
<div class="close">close Element 2</div>
</div>
You should probably do something like this:
$(".toggle").click(function() {
$(this).parent().find(".element2").toggle();
});
$(".close").click(function() {
$(this).parent().hide(); // close the correct .element2
});
In CSS you need to:
.element2 {
display: none;
}
just $(".element2").hide(); hide it at start
$(function() {
$(".element2").hide();
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">Element 1
<div class="toggle">Toggle </div>
<div class="element2"> Element 2
<div class="close"> close</div>
</div>
</div>
HTML
<div class="element">
<div class="toggle"></div>
<div class="element2" style="display:none">
<div class="close"></div>
</div>
</div>
EXAMPLE CSS
.toggle
{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:left;
background:green;
}
.element2{
display:block;
width:40px;
height:40px;
margin-left:10px;
float:left;
background:yellow;
}
.close{
display:block;
width:20px;
height:20px;
margin-left:10px;
float:right;
border:1px solid #000;
}
JQUERY
$(".toggle").click(function() {
$(".element2").toggle();
});
$(".close").click(function() {
$(".element2").css({"display":"none"});
});
fiddle to check
I hope it is helpfull answer. Good Luck !
Here is my Codepen link: resizable event
I'm using Jquery UI resizable, thing is working fine but now I want to the resizable event on each block only active one by one, if you click another block, the resizable event on the previous block will be destroy, I've tried the .each function but it's not working.
Same thing when I try to destroy the resizable event when click anywhere on the screen except the div, I got the Error: cannot call methods on resizable prior to initialization; attempted to call method 'destroy'.
When a component is clicked, got resizable, you should mark it as resizable enabled by adding a class. Like:
https://codepen.io/ducfilan/pen/jGPwop
$(document).on("click", ".component-items", function () {
$('.processed-resizeable').resizable("destroy");
$('.processed-resizeable').removeClass("processed-resizeable");
$(this).resizable();
$(this).addClass('processed-resizeable');
$(this).draggable({
start: function (event, ui) {
$(this).resizable("destroy");
}
});
});
.component-list {
border:1px solid #343434;
margin-top:50px;
padding:5px 20px;
height:300px;
position: relative;
}
.component-items {
cursor:pointer;
position: absolute;
}
.ui-resizable {
border:1px solid #d3d3d3;
}
#items-1 {
top:10px;
left:500px;
}
#items-2 {
bottom:100px;
left:15px;
}
#items-3 {
top:100px;
right:100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="component-list">
<div class="component-items" id="items-1">
<h3>Block 1</h3>
</div>
<div class="component-items" id="items-2">
<h3>Block 2</h3>
</div>
<div class="component-items" id="items-3">
<h3>Block 3</h3>
</div>
</div>
</div>
</div>
</div>
What I am trying to achieve is the following
There are two DIVS with dropdown. I need to close one while opening the other on click function.
I am also trying to mouseout once the event is out of the dropdown box.
I would like to close the DIV once the click even happens outside the dropdown box.
Following is the HTML
<div class="first-div" style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<h6>REGISTER</h6>
<div class="second-div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
CSS is following
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
JS is following
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
Is there any way to use this as a function to control multiple DOMs in the HTML? If so could someone assist me with the current example ?
Thanks
The path to follow here is use a common class on your items, you don't need to create new classnames if all will have the same styles and will perform the same action. Check this:
$(document).ready(function() {
$('.cont-div').on('click', 'a', function(e) {
e.preventDefault();
$('.div-dropdown').slideUp(300);
$(this).next('.div-dropdown').stop().slideToggle(300);
});
//To close if you click outside the container divs
$('body').on('click', function(e) {
if (!$(e.target).parents('.cont-div').length) {
$('.div-dropdown').slideUp(300);
}
})
});
body {
height: 600px;
background: #e1e1e1;
}
.cont-div {
display: inline-block;
vertical-align: top;
width: 50%;
}
.div-dropdown {
background-color: #555;
color: white;
height: 100px;
width: 200px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-div">
<h6>REGION</h6>
<div class="div-dropdown">
<p>Drop down test from first DIV</p>
</div>
</div><!--
--><div class="cont-div">
<h6>REGISTER</h6>
<div class="div-dropdown">
<p>Drop down test from second DIV</p>
</div>
</div>
If you want to get more specific, you could assign a similar class to both menus, in the case below, I added 'dropdown-div' to the class for both menus and then simply added a trigger whenever you click on something that is not a link, it will hide the menus by calling $('.dropdown-div').hide();
$(document).ready(function(){
$('.first-div-dropdown').hide();
$('.second-div-dropdown').hide();
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').slideDown(300);
});
$('.second-div-link').on('click', function (event){
$('.second-div-dropdown').slideDown(300);
});
});
$(document).on('click', function(event) {
if (!$(event.target).closest('a').length) {
$(".dropdown-div").hide();
}
});
.first-div-dropdown, .second-div-dropdown{
background-color:#555;
color:white;
height:100px;
width:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="first-div " style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
<div class="first-div-dropdown dropdown-div">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<h6>REGISTER</h6>
<div class="second-div-dropdown dropdown-div">
<p>Drop down test from second DIV</p>
</div>
</div>
You're dealing with state management within a collection. You have 2 dropdowns, but 3 states: dropdown one's state, dropdown two's state, and the collection of dropdowns' state.
Using jQuery, the most common way of handling this I've seen is to start by "resetting" the collection's state each time, by hiding all dropdowns on click.
Then, open the dropdown that is being targeted by the client. This can also be a bit easier if you use a single class to target the collection which also lends itself to be reusable across an infinite number of dropdowns.
<div class="first-div" style="display:inline-block">
<a class="dropdown-trigger"><h6>REGION</h6></a>
<div class="dropdown-menu">
<p>Drop down test from first DIV</p>
</div>
</div>
<div id="second-div" style="display:inline-block; float:right">
<a class="dropdown-trigger"><h6>REGION</h6></a>
<div class="dropdown-menu">
<p>Drop down test from second DIV</p>
</div>
</div>
JS:
$('.dropdown-trigger').click(function (event) {
event.stopPropagation();
var $menu = $(this).siblings('.dropdown-menu');
$('.dropdown-menu').not($menu).slideUp(300);
$menu.slideToggle(300);
});
$(document).click(closeDropdowns);
function closeDropdowns () {
$('.dropdown-menu').slideUp(300);
}
Working codepen: http://codepen.io/amishstripclub/pen/wzbEVo
You could try using toggle like this:
$(document).ready(function(){
$('.first-div-link').on('click', function (event){
$('.first-div-dropdown').toggle();
$('.second-div-dropdown').toggle();
});
$('.second-div-link').on('click', function (event){
$('.first-div-dropdown').toggle();
$('.second-div-dropdown').toggle();
});
});
Example here: http://codepen.io/agentmi6/pen/JoZZWm
how can i display the text of the green div in the grey div, when i click on the [+] icon? Ive tried many different scenarios but none works, can someone give me few pointers how can i do this, i would really appreciate.
<div id="wrapper">
<div class="container">
<div class="first" id="f">
<div class="set">+</div>
this is the 1st element
</div>
<div class="first" id="s">
<div class="set">+</div>
this is the 2nd element
</div>
<div class="first" id="t">
<div class="set">+</div>
this is the 3rd element
</div>
</div>
<div id="cc"></div>
</div>
CSS
.first{
margin-top:5px;
border:1px solid black;
width:190px;
height:40px;
background-color:green;
}
#cc{
margin-top:5px;
width:190px;
height:40px;
border:1px solid black;
background-color:grey;
}
.set{
cursor:pointer;
color:#fff;
font-size:33px;
float:right;
border:1px solid white;
}
You'll have to get the text of the .first div, i suggest you put the text into a tag so it'll be easy to get it, and so you don't get the + of the .get button.
Here's the new JavaScript
$(document).ready(function(){
$('.set').click(function(){
// Get the text inside the span in the parent .first of the clicked .set button
var text = $(this).parent('.first').find('span').text();
$('#cc').text(text);
});
});
The HTML would look like this
<div class="container">
<div class="first" id="f">
<div class="set">+</div>
<span>this is the 1st element</span>
</div>
<div class="first" id="s">
<div class="set">+</div>
<span>this is the 2nd element</span>
</div>
<div class="first" id="t">
<div class="set">+</div>
<span>this is the 3rd element</span>
</div>
</div>
<div id="cc"></div>
Here's an updated CodePen
You can use this:
$(document).ready(function(){
$('.set').click(function(){
var text = $(this).parents("div.first").text();
$("#cc").text(text);
})
});
This Code could help you
var tempText="";
$('.container .set').each(function(){
tempText=tempText+ $(this).html();
});
$('#cc').html(tempText);
Here try this (fiddle: http://jsfiddle.net/nek9fona/)
JQ:
$(function(){
$('.set').click(function(){
var $this = $(this);
var text = $this.parent('.first').text();
$('#cc').text(text);
});
});
Put this in your head html section. Or bottom of body section.
<script>
$(document).ready(function() {
$('.set').on('click', function(){
var text_val = $(this).closest('div.first').text();
$('#cc').text(text_val);
});
});
</script>
I guess that you don't want the copied text to contain "+" symbol? In this case you can do this:
$('.set').click(function() {
var text = $(this.nextSibling).text().trim();
$('#cc').text(text);
});
Demo: http://codepen.io/anon/pen/MYXXrr
Note, that it makes sense to improve HTML structure a little by wrapping the text into some container:
<div class="first" id="s">
<div class="set">+</div>
<div class="text">this is the 2nd element</div>
</div>
In this case, code would become much more reliable and cleaner:
$('.set').click(function() {
var text = $(this).next('.text').text(); // or $(this).parent().find('.text')
$('#cc').text(text);
});
Demo: http://codepen.io/anon/pen/ogyyoO
I want to point out which div I clicked on to prevent confusing as the pop up menu that comes out of it on my site will be both the same just different links but same buttons. Now my problem is that i cant figure out how i can manage to do it been stuck on it for quite some time now. My site is in Wordpress for the info. The color of the text doesnt really matter atm.
The code does work but i want that when i hit "juicyplants" the color changes and when i hit "leafyplant" that color changes and "juicyplants" go back to normal. with the changing colors i mean the already presenting ones.
My code:
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
cursor:pointer;
}
h2 {
float:left;
display:block;
height:40px;
width:150px;
cursor:pointer;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
Best to change classes and use styling:
jsfiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/2/#update
$(function () {
$("#clickOne").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function () {
$('.clickDesign').removeClass("active");
$(this).addClass("active");
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
})
});
in style add:
.active{
color: green;
}
It is better to data-drive any menu system and reduce the code:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/Pcn5a/3/
JQuery:
$(function () {
$('.clickDesign').on('click', function () {
var $this = $(this);
$('.clickDesign').removeClass("active");
$this.addClass("active");
// Use the id in the data-target attribute
$target = $($this.data('target'));
$(".target").not($target).fadeOut();
$target.fadeIn();
});
});
Html (has data-target attributes)
<div>
<div id="clickOne" class="clickDesign" data-target="#leafyPlants">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign" data-target="#juicyPlants">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants" class="target">Leafy Test</div>
<div id="juicyPlants" class="target">Juicy Test</div>