I have a list of dom element:
When I click on the element, it will toggle open and close.
When I click on the child of the open one, it will not close the parent.
When I click on another one, it will open the one which is clicked and close the others.
When I click outside the element that has been opened, it will close then open.
-> The problem is I can't archive the first one. Does somebody know what I'm doing wrong here?
$(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).addClass("active");
});
$(document).mouseup(function(n) {
var t = [];
t.push($(".front"));
$.each(t, function(t, i) {
$(i).is(n.target) || $(i).has(n.target).length !== 0 || $(i).removeClass("active")
})
});
.front {
position: relative;
background-color: red;
width: 100px;
height: 100px;
margin: 20px;
}
.front .back {
position: absolute;
top: 50%;
left: 150px;
display: none;
background-color: green;
width: 50px;
height: 50px;
}
.front.active .back {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="front">
<div class="back"></div>
</div>
<div class="front">
<div class="back"></div>
</div>
<div class="front">
<div class="back"></div>
</div>
just add toggle class after your first line:
$(".front").click(function() {
$(".front").not(this).removeClass("active");
$(this).toggleClass("active");
});
Related
Maybe the question is confusing but let me give you an example, when I spam click the button that toggles the width, the div with keep on animating way after the button press and it doesn't look amazing. What I want is for the div to stop midway and go the other way and not complete its existing animation when the button is pressed again.
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
Here is the fiddle, so you can see what exactly what I'm talking about. Try spamming the "Show Menu" button.
https://jsfiddle.net/x14usdga/5/
Help would be greatly appreciated, I have looked everywhere and I can't seem to find anything on my problem.
You can use .stop() method. Try this
$(document).ready(function() {
$('.menuToggle').click(function() {
$(".menuContainer").stop().animate({
width: 'toggle'
});
});
});
.menuContainer {
height: 100px;
width: 50px;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
You can check if element is not animated before do animation
https://api.jquery.com/is/
https://api.jquery.com/animated-selector/
$(document).ready(function(){
$('.menuToggle').click(function(){
if( $('.menuContainer').is(':animated') ) { return false; }
$(".menuContainer").animate({width: 'toggle'});
});
});
.menuContainer{
height: 100vh;
width: 15vw;
float: left;
position: relative;
background-color: black;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuContainer">
<!-- Menu Items -->
</div>
<h4 class="menuToggle">Show Menu</h4>
I have 3 divs that are positioned absolute inside of a parent div.
They all have opacity 0 apart from the first div.
When I click a link I want the corresponding div to have opacity 1 and all the other divs opacity 0.
I've given the links and divs a matching data attribute so they pair up.
I tried giving the matching div a class but I don't know how to remove the class from all other divs.. and if it already has the class I don't want it to keep adding it.
$(document).ready(function() {
$(".div_open").on("click", function() {
var target = $(this).data("div");
if ($("#" + target).hasClass("show")) {
$("#" + target).removeClass("show");
$("#" + target).addClass("hide");
} else {
$("#" + target).removeClass("hide");
$("#" + target).addClass("show");
}
});
});
.div-wrap {
background-color: #c6c8ca;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
height: 400px;
}
.div-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.div-content:not(:first-of-type) {
opacity: 0;
}
.div-content.show {
opacity: 1;
}
.div-content.hide {
opacity: 0;
}
.div-content:nth-of-type(1) {
color: green;
display: block;
}
.div-content:nth-of-type(2) {
color: blue;
display: none;
}
.div-content:nth-of-type(3) {
color: purple;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-names">
Div One
Div Two
Div Three
</div>
<div class="div-wrap">
<div class="div-content" data-div="div-1" id="div-1">
<h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
</div>
<div class="div-content" data-div="div-2" id="div-2">
<h1>This is div two, one and three are hidden, click another link.</h1>
</div>
<div class="div-content" data-div="div-3" id="div-3">
<h1>This is div three, two and one are hidden, click another link.</h1>
</div>
</div>
Firstly, you performed unnecessary actions in both css and jquery. I edited your css. Also, I edited your jquery code, removing the check for the presence of the show and hide class, deleting the hide class from all except the current div-content, adding the show class of the current div-content by attribute data-div:
$(".div-content").removeClass("show");
$(".div-content[data-div='"+target+"']").addClass("show");
hide class is not needed. So this class replaces this css:
.div-content {
opacity: 0;
display: none;
}
Also, please note that class show is now added to html by default, instead of .div-content: nth-of-type (1) {}:
<div class="div-content show" data-div="div-1" id="div-1">
Full code:
$(document).ready(function () {
$(".div_open").on("click", function () {
var target = $(this).data("div");
$(".div-content").removeClass("show");
$(".div-content[data-div='" + target + "']").addClass("show");
});
});
.div-wrap {
background-color: #c6c8ca;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
height: 400px;
}
.div-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.div-content {
opacity: 0;
display: none;
}
.div-content.show {
opacity: 1;
display: block;
}
.div-content:nth-of-type(1) {
color: green;
}
.div-content:nth-of-type(2) {
color: blue;
}
.div-content:nth-of-type(3) {
color: purple;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-names">
Div One
Div Two
Div Three
</div>
<div class="div-wrap">
<div class="div-content show" data-div="div-1" id="div-1">
<h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
</div>
<div class="div-content" data-div="div-2" id="div-2">
<h1>This is div two, one and three are hidden, click another link.</h1>
</div>
<div class="div-content" data-div="div-3" id="div-3">
<h1>This is div three, two and one are hidden, click another link.</h1>
</div>
</div>
I just changed some code including adding the hide/show classes to the divs and the jQuery selector.
$(document).ready(function () {
$(".div_open").on("click", function () {
var target = $(this).data("div");
$('.div-content').each(function(i, obj) {
if ($(obj).attr('id') == target) {
$(obj).removeClass("hide");
$(obj).addClass("show");
} else {
$(obj).removeClass("show");
$(obj).addClass("hide");
}
});
});
});
.div-wrap {
background-color: #c6c8ca;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
height: 400px;
}
.div-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.div-content:not(:first-of-type) {
opacity: 0;
}
.div-content.show {
opacity: 1;
display:block!important;
}
.div-content.hide {
opacity: 0;
display:none!important;
}
.div-content:nth-of-type(1) {
color: green;
display: block;
}
.div-content:nth-of-type(2) {
color: blue;
display: none;
}
.div-content:nth-of-type(3) {
color: purple;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="div-names">
Div One
Div Two
Div Three
</div>
<div class="div-wrap">
<div class="div-content" data-div="div-1" id="div-1">
<h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
</div>
<div class="div-content hide" data-div="div-2" id="div-2">
<h1>This is div two, one and three are hidden, click another link.</h1>
</div>
<div class="div-content hide" data-div="div-3" id="div-3">
<h1>This is div three, two and one are hidden, click another link.</h1>
</div>
</div>
Try this its working
<div class="div-wrap">
<div class="div-content show" data-div="div-1" id="div-1">
<h3>1</h3>
</div>
<div class="div-content hide" data-div="div-2" id="div-2">
<h1>2</h1>
</div>
<div class="div-content hide" data-div="div-3" id="div-3">
<h1>3</h1>
</div>
</div>
$(document).ready(function() {
$(".div_open").on("click", function() {
var target = $(this).data("div");
console.log(target);
if ($("#" + target).hasClass("show")) {
$("#" + target).removeAttr('class');
$("#" + target).attr('class','div-content hide');
} else {
$(".div-content").removeClass("show");
$(".div-content").addClass("hide");
$("#" + target).removeAttr('class');
$("#" + target).attr('class','div-content show');
}
});
});
remove this styles
.div-content:not(:first-of-type) {
opacity: 0;
}
.div-content.show {
opacity: 1;
}
.div-content.hide {
opacity: 0;
}
function onClickDivOne() {
$("#div1").show();
$("#div2").hide();
$("#div3").hide();
}
function onClickDivTwo() {
$("#div1").hide();
$("#div2").show();
$("#div3").hide();
}
function onClickDivThree() {
$("#div1").hide();
$("#div2").hide();
$("#div3").show();
}
.div-wrap {
background-color: #c6c8ca;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
height: 400px;
}
.div-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-names">
Div One
Div Two
Div Three
</div>
<div class="div-wrap">
<div class="div-content" id="div1">
<h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
</div>
<div class="div-content" id="div2">
<h3>This is div two, one and three are hidden, click another link.</h3>
</div>
<div class="div-content" id="div3">
<h3>This is div three, two and one are hidden, click another link.</h3>
</div>
</div>
Is it possible to move .item from .region1 to .region2 when the anchor tag is clicked, and also move it back to .region1 when it is clicked again? So pretty much the behavior of a toggle ?
<a href="#" class="btn">Click</div>
<div class="region1">
<div class="item"></div>
</div>
<div class="region2"></div>
make use of append() to achieve the toggle effect:
function toggleItem(){
var $item = $('.region1').find('.item');
if($item.length !== 0){
$('.region2').append($item);
} else {
$item = $('.region2').find('.item');
$('.region1').append($item);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="btn" onclick='toggleItem()'>Click</a>
<div class="region1">Inside region 1
<div class="item">item</div>
</div>
<div class="region2">Inside region 2</div>
Just build the toggle like function by yourself. Check if the element is is there then use appendTo to move the element.
$('a.btn').click(function() {
if ($('.region1 > .item').length) {
$('.region1 > .item').appendTo('.region2');
}
else {
$('.region2 > .item').appendTo('.region1');
}
});
.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div class="region1">
<div class="item">item</div>
</div>
<div class="region2"></div>
If there is only one .item in the whole page, you could make it shorter:
$('a.btn').click(function() {
$('.item').appendTo($('.region1 > .item').length ? '.region2' : '.region1');
});
.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div class="region1">
<div class="item">item</div>
</div>
<div class="region2"></div>
Or without jQuery:
document.querySelector('a.btn').addEventListener('click', function() {
if (item = document.querySelector('.region1 > .item')) {
document.querySelector('.region2').append(item);
} else if (item = document.querySelector('.region2 > .item')) {
document.querySelector('.region1').append(item);
}
});
.region1 { width: 50px; height: 50px; background: red; }
.region2 { width: 50px; height: 50px; background: blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click
<div class="region1">
<div class="item">item</div>
</div>
<div class="region2"></div>
Here's a solution in vanilla JavaScript:
var item = document.querySelector('.item');
var region1 = document.querySelector('.region1');
var region2 = document.querySelector('.region2');
document.querySelector('a').addEventListener('click', function() {
if (region1.contains(item)) {
region2.appendChild(item);
} else if (region2.contains(item)) {
region1.appendChild(item);
}
});
.region1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.region2 {
width: 100px;
height: 100px;
background-color: yellow;
}
Click
<div class="region1">
<div class="item">Test</div>
</div>
<div class="region2"></div>
Note:
Because there's probably more than just one single a tag in your page, you should not use ...querySelector('a')... like this. To ensure the proper a tag gets selected, you should make it unique, e. g. by adding an id to it. If you decide to use the way with the id, replace the your querySelector('a') with querySelector('#yourid').
And thank you to eisbehr for helping me to cut down the script in an very effective way.
I am completely stuck on this problem (see jsfiddle here). I have a very simple set up where an onclick adds a class which displays an element. Within this element is a close button for which the onclick should remove the class from the parent. But this is not working.
I have tried removeAttr('class') which also fails. Looking in chrome inspector I can see the selector is right and is targeting the parent, but the class cannot be removed.
This is part of a larger project so I cannot change the html structure. But welcome any suggestions on how to do this in jQuery.
HTML:
<div class="print-wrap">
<ul>
<li class="settings-tab">+</i>
<div class="settings-wrap">
<div class="iphone-close">x</div>
<div class="content"></div>
</div>
</li>
<li class="img">
<img src="http://placehold.it/250x166">
</li>
</ul>
</div>
jQuery:
jQuery(function(){
jQuery('.settings-tab').click(function(){
var $this = jQuery(this);
$this.addClass('settings-out');
});
jQuery('.settings-wrap .iphone-close').click(function(e){
var $this = jQuery(this);
var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
$parent.removeClass('settings-out');
});
});
Use event.stopPropagation in the event handler of close button. The event is bubbled up to the parent .settings-tab and the handler of is is executed which is adding the class again.
Updated Fiddle
jQuery(function() {
//settings tab:
jQuery('.settings-tab').click(function() {
jQuery(this).addClass('settings-out');
});
//Settings tab close
jQuery('.settings-wrap .iphone-close').click(function(e) {
jQuery(this).closest('.settings-out').removeClass('settings-out');
e.stopPropagation();
});
});
.print-wrap {
width: 250px;
height: 250px;
overflow: hidden;
position: relative;
display: block;
margin: 0 auto;
margin-bottom: 20px;
background-color: #D6A0A0;
}
.print-wrap ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
position: relative;
left: 0;
}
.settings-tab {
width: 30px;
height: 30px;
position: absolute;
top: 0;
right: 0;
text-align: center;
background: #f5d43f;
transition: all .3s ease-in-out;
transition-delay: .25s;
z-index: 4;
cursor: pointer;
}
.settings-tab .settings-wrap {
width: 250px;
right: -250px;
height: 250px;
background: lightblue;
position: absolute;
top: 0;
}
.settings-out {
right: 250px;
}
.iphone-close {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="print-wrap">
<ul>
<li class="settings-tab">+</i>
<div class="settings-wrap">
<div class="iphone-close">x</div>
<div class="content"></div>
</div>
</li>
<li class="img">
<img src="http://placehold.it/250x166">
</li>
</ul>
</div>
jQuery(document).on('click','.settings-wrap .iphone-close',function(e){
var $this = jQuery(this);
var $parent = $this.parent('.settings-wrap').parent('.settings-tab');
$parent.removeClass('settings-out');
});
});
try changing jQuery(document).on('click','.settings-wrap .iphone-close',function(e){
demo
<div id="home">
<div id="logo"> </div>
<div id="foot"> <div class="button"> CLICK ME</div>
<div class="button two"> CLICK ME</div> </div>
</div>
<div id="show">
TEST TEST TEST TEST
</div>
$('.button').click(function(){
$('#show').show();
})
#home {
width: 400px;
height: 400px;
background-color: #ccffff;
}
#logo {
width: 100%;
height: 300px;
background-color: #0099ff;
}
#foot {
width: 100%;
height: 100px;
background-color: #009999;
}
.button {
width: 90px;
height: 30px;
background-color: red;
margin-left: 50px;
}
i would like if i click RED .button then GREEN .show show me over the red button and if i click outside GREEN .show then this hide.
LIVE: http://jsfiddle.net/YeE4p/1/
Is this somewhat close to what you are looking for?
http://jsfiddle.net/neilheinrich/YeE4p/6/
I had to change the #show div to be absolutely positioned and use this javascript:
$('.button').click(function(){
var $show = $('#show');
var position = $(this).offset()
$show.css({
"left": position.left + "px",
"top":position.top + "px"
}).show();
$(window).bind("mousedown", function(e){
if (!($(e.target).attr("id") === "show")) {
$("#show").hide();
$(window).unbind("mousedown");
}
});
})
Try this out
http://jsfiddle.net/Quincy/YeE4p/4/
$('.button').click(function(event){
$('#show').show();
event.stopPropagation();
})
$('body').click(
function(){
$('#show').hide();
}
)