When i click on a div all the three div's change. I want only the div i clicked to be changed.
I have this HTML:
<div class="box">
<div class="vakkie">fkhakdhfkadh</div>
</div>
<div class="box">
<div class="vakkie">97309471094709</div>
</div>
<div class="box">
<div class="vakkie">****&&^%%%&%&$^$</div>
</div>
This is my CSS:
.box {
background-color: #a01414;
width: 300px;
height: 300px;
float: left;
margin-left: 20px;
}
.vakkie {
display: none;
background-color: #00cbff;
width: 300px;
height: 100px;
position: relative;
top: 200px;
}
jQuery:
$('.box').toggle(
function() {
$('.vakkie').css('display', 'block');
},
function() {
$('.vakkie').css('display', 'none');
}
);
All three are changing because you are using the $('.vakkie') querySelector, wich returns all elements with the class 'vakkie'. You should select '.vakkie' of the current box, you can do this by using the this keyword.
$('.box').toggle(function() {
$(this).find('.vakkie').css('display', 'block');
}, function() {
$(this).find('.vakkie').css('display', 'none');
});
Use $(this) - which refers to the jQuery object that was clicked:
$('.box').toggle(function() {
$(this).css('display', 'block'); // or $(this).show()
}, function() {
$(this).css('display', 'none'); // or $(this).hide()
});
In your case, $(".vakkie") targets all the elements having .vakkie class, and hence affects all of them. this refers to the HTMLObject clicked, which when wrapped in $() becomes the jQuery object.
Though, as RUJordan points out, use this.style.display = "block"/"none" as it does exactly the same thing with same length of code, and is faster.
Use $(this).find()
$('.box').toggle(function() {
$(this).find('.vakkie').css('display', 'block');
}, function() {
$(this).find('.vakkie').css('display', 'none');
});
Do you expecting like this. Each box click, corresponding div should show?
http://fiddle.jshell.net/N5BYk/11/
Related
Heres basically what the code looks like, it should run if pasted in sublime, what i'm trying to do is get the div to show when the page is loaded and then hide on scroll but when the button is clicked it should show wherever you are on the page. The codes a bit rough but its just a test page
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
$(function(){
$(".box").click(function(){
$(this).find(".fade").fadeIn();
}
,function(){
$(this).find(".fade").fadeOut();
}
);
});
window.onscroll = function()
{
var left = document.getElementById("left");
if (left.scrollTop < 60 || self.pageYOffset < 60) {
left.style.position = 'fixed';
left.style.top = '60px';
} else if (left.scrollTop > 60 || self.pageYOffset > 60) {
left.style.position = 'absolute';
left.style.margin-top = '200px';
}
}
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
.box{color: red;}
#left{
float: left;
width: 20%;
height: 200px;
background: yellow;
position: fixed;
top: 0;
left: 150px;
}
<div class="box">
<div class="fade" id="left">
show div / hide on click (NOT HOVER)
</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="margin-left: 90% !important;">
<button style=" position: fixed;
/* margin-right: -40% !important; */
margin-top: 0%;
background-color: red;
color: #fff;
padding: 10px 10px;
display: block;
width: 54%;
float: right;
top: 0;">show div again</button></div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'>
This could work. If box is clicked, check if .fade element is already visible. If it is, then hide it, if not, show it.
$(".box").click(function(){
if($(".fade", this).is(":visible"))
{
$(".fade", this).fadeOut();
}
else
{
$(".fade", this).fadeIn();
}
});
You can use toggle since you need to alternate fadeIn and fadeOut on click
Replace hover
$(function(){
$(".box").hover(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
With toggle
$(function(){
$(".box").toggle(function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
}
);
});
a quick look at the doc would have saved you headaches: http://api.jquery.com/click
It`s not working for reason - you create buttons dynamically because of that you need to call them with .live() method if you use jquery 1.7
but this method is deprecated (you can see the list of all deprecated method here) in newer version. if you want to use jquery 1.10 or above you need to call your buttons in this way:
$(document).on('click', 'selector', function(){
// Your Code
});
Your code will be something like this.
$(document).on('click', '.box', function(){
$(this).find(".fade").fadeIn();
},function(){
$(this).find(".fade").fadeOut();
});
I have a list maker that appends items but also appends a trash can item to each of the list items which is made. I have a function on the trash can that should remove the parent element when it is clicked but it doesn't work.
Here is a simple version of what I'm trying to do
JSFiddle
$('button').click(function() {
$('#contain').append('<div class="div"></div>').append('<div class="nested"></div>');
});
$('.nested').click(function() {
$(this).parent().remove();
});
How can I remove the parent element of only the nested div that is clicked?
Use on() because you're calling an event on dynamically appended element.
$('body').on('click', '.nested', function(){
$(this).parent().remove();
});
Also we can use $('#contain') instead of $('body') as well.
$('button').click(function() {
$('#contain').append('<div class="div"></div>').append('<div class="nested"></div>');
});
$('body').on('click', '.nested', function() {
$(this).parent().remove();
});
.div {
width: 100px;
height: 50px;
background: #000;
margin-top: 50px;
}
.nested {
width: 50px;
height: 25px;
background: red;
z-index: 100;
margin-top: -25px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add
</button>
<div id="contain">
</div>
try this:
$('#contain').on('click', '.nested', function(){
});
you have to listen to clicks on the container for appended elements, since they're not in the DOM when the page is loaded
Two issues:
As the others have mentioned, you're binding your .nested click
event before your element is created, meaning it won't have the
event handler attached. As the others mentioned, something like $("#contain").on("click", ".nested", function() {}) will fix the issue
$.append returns the element you are appending to not the element being appended so your .nested is nested under the $("#contain"). This means the $(this).parent() is actually returning the #contain element. A fix for the issue is
$("<div class='nested' />").appendTo($("<div class='div' />").appendTo("#contain"));
Change :
$('.nested').click(function() {
$(this).parent().remove();
});
To:
$(document).on("click",".nested",function(){
$(this).parent().remove();
})
I want to create a circle everytime I click the button but the once I click it, it creates a circle but when i click it again nothing happen.
$(document).ready(function() {
var circle = $("<div class='circleClass'></div>");
$(".t-testbody").on("click", "#clickMe", function() {
$(".t-testbody").append(circle);
});
});
.t-testbody {
margin-top: 100px;
margin-left: 50px;
}
.circleClass {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: blue;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t-testbody">
<div class="circleClass"></div>
<button id="clickMe">Button</button>
</div>
Currently you have created the element and appended it to the div. so second append statement has not effect as the element already exist in the div.
Instead of element use HTML string
var circle = "<div class='circleClass'></div>";
$(".t-testbody").on("click", "#clickMe", function () {
$(".t-testbody").append(circle);
});
DEMO
You can use .clone()
var circle = $("<div class='circleClass'></div>");
$(".t-testbody").on("click", "#clickMe", function () {
$(".t-testbody").append(circle.clone());
});
DEMO
You are defining your HTML element only once, so instead of this
$(document).ready(function() {
var circle = $("<div class='circleClass'></div>"); // Move this into event handler callback
$(".t-testbody").on("click", "#clickMe", function() {
$(".t-testbody").append(circle);
});
});
Do this:
$(document).ready(function() {
$(".t-testbody").on("click", "#clickMe", function() {
var circle = $("<div class='circleClass'></div>"); // Move this here
$(".t-testbody").append(circle);
});
});
What's happening is that jQuery creates the HTML element, then on click it moves that element to the div. When you click it again, it moves that same element into where it just was, giving the illusion that it did nothing, but it just moved it into the position it already was.
When you move the variable declaration into the callback, it will generate a new html element every time you click that element, therefore jQuery will be appending a newly defined element to the div.
circle holds the reference of element being appended. So it has no difference after first click.
You can create circle inside the callback function like this :
$(document).ready(function(){
$(".t-testbody").on("click","#clickMe",function(){
var circle = $("<div class='circleClass'></div>");
$(".t-testbody").append(circle);
});
});
.t-testbody {
margin-top: 100px;
margin-left: 50px;
}
.circleClass {
width: 50px;
height: 50px;
border-radius: 100%;
background-color: blue;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t-testbody">
<div class="circleClass"></div>
<button id="clickMe">Button</button>
</div>
Demo : http://jsfiddle.net/vikashvverma/ou52j2xn/
I create a bunch of DIVs dynamically. I'm using jQuery resizeable handles on them.
My question is how do I make the handles appear on click/hover and make them disappear when clicked out of the relevant div?
jsFiddle
$('.resizable').on('click', function() {
$(this).addClass('focus');
});
$(document).on('click', function() {
if (!$(e.target).closest('.resizable').length) {
$('.resizable').removeClass('focus');
}
});
You can bind it with a click or a hover.
Click:
$('.resizable').resizable({
handles: 'se'
});
////////////////////////////////////////////////////////////////////////////////////
//how do I get the below working? These $('.resizable') DIV are created dynamically
$('.resizable').on('click', function() {
$(this).addClass('focus');
});
$(document).on('click', function(e) {
if (!$(e.target).closest('.resizable').length) {
$('.resizable').removeClass('focus');
}
});
.resizable{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.resizable.focus {
background: #f0f;
}
.resizable .ui-resizable-handle {
background-color: black;
display: none !important;
}
.resizable.focus .ui-resizable-handle {
display: block !important;
}
<div id="dragDiv1" class="resizable"></div>
<div id="dragDiv2" class="resizable"></div>
<div id="dragDiv3" class="resizable"></div>
Or, if you want the hover, just replace the .resizable.focus with .resizable:hover. http://jsfiddle.net/sjchn0L8/2/
I am trying to move divs between two containers (#one and #two). I can't seem to figure out how to select a div which is inside another div.
I found a similar topic about targeting class inside a div. It gave me idea of using parent.
jQuery has a large list of selectors, I assume I could use one of them. But I intuitively think I could use something like #one.draggable or some other kind of specifying path.
Example on JSFiddle
CSS:
div
{
display:inline;
background-color:#eee;
}
.draggable
{
width: 50px;
height: 50px;
background-color: lime;
z-index: 2;
display: block;
float: left;
background-color: #333333;
}
#one
{
width: 200px;
height: 200px;
background-color: #555555;
z-index: 1;
float: left;
}
#two
{
width: 200px;
height: 200px;
background-color: #777777;
z-index: 1;
float: left;
}
jQuery:
$(document).ready(function() {
$(".draggable",$(this).parent("one")).click(function () {
// move from "one" to "two"
$(this).appendTo("#two");
});
$(".draggable",$(this).parent("two")).click(function () {
// move from "two" to "one"
$(this).appendTo("#one");
});
});
HTML:
<div id="one">
<div class="draggable">1</div>
<div class="draggable">2</div>
<div class="draggable">3</div>
</div>
<div id="two">
<div class="draggable">4</div>
<div class="draggable">5</div>
<div class="draggable">6</div>
</div>
I'll try to stick to what seems to be the core of your question: use $('#one .draggable') (the space is important!) to select all divs with class 'draggable' inside the div with id 'one'.
So your full jQuery code should be:
$(document).ready(function() {
$('#one .draggable').click(function () {
// move from "one" to "two"
$(this).appendTo("#two");
});
$('#two .draggable').click(function () {
// move from "two" to "one"
$(this).appendTo("#one");
});
});
UPDATE
As you noticed, with the code above it's not possible to move the same div again after the first move. The solution is as follows:
$(document).ready(function() {
$('#one .draggable').live('click', function () {
// move from "one" to "two"
$(this).appendTo("#two");
});
$('#two .draggable').live('click', function () {
// move from "two" to "one"
$(this).appendTo("#one");
});
});