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.
Related
just asking can you please tell me how can I achieve it when I clicked the button it should only add the class on its parent div. Currently its adding both the parent div even I click the first button
$( ".main-btn" ).each(function(index) {
$(this).on("click", function(){
$(".main").addClass("addClass")
});
});
.main {
background: yellow;
margin-bottom: 3px;
height: 50px;
}
.main.addClass {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="main-btn">Button</div>
</div>
<div class="main">
<div class="main-btn">Button</div>
</div>
There's no need for .each() here, you can just reference the parent from the clicked element via .closest()...
$(".main-btn").on("click", function() {
$(this).closest(".main").addClass("addClass");
});
.main {
background: yellow;
margin-bottom: 3px;
height: 50px;
}
.main.addClass {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="main">
<div class="main-btn">Button</div>
</div>
<div class="main">
<div class="main-btn">Button</div>
</div>
Also, you might not need jQuery
document.querySelectorAll(".main .main-btn").forEach((btn) => {
btn.addEventListener("click", (e) => {
e.target.closest(".main").classList.add("addClass");
});
});
You can use the parent() method:
$(".main-btn").on("click", function() {
$(this).parent().addClass("addClass");
});
.main {
background: yellow;
margin-bottom: 3px;
height: 50px;
}
.main.addClass {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div class="main-btn">Button</div>
</div>
<div class="main">
<div class="main-btn">Button</div>
</div>
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");
});
Here I have six different div on hover blue color div should appear and by default hidden. I have written code for this but it works only for the first div I merge all div's in a single variable. Can anyone suggest to me what I'm missing here
var tcpTooltip = $('.tp-cont-tech, tp-cont-b, tp-cont-m, tp-cont-t, tp-cont-i, tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, tpc-tooltip-b, tpc-tooltip-m, tpc-tooltip-t, tpc-tooltip-i, tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function() {
$(tcpTooltipDiv).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>
As suggested already, I'd go by using pure CSS and the :hover pseudo.
If you really want jQuery for some reason this would be a remake of your code.
Basically (beside adding common classes to your elements [see code below]) you need the $(this) reference of the currently hovered element:
var $tpCont = $('.tp-cont');
var $tcpTooltip = $('.tcp-tooltip');
$tcpTooltip.hide();
$tpCont.hover(function() {
$(this).find($tcpTooltip).toggle();
});
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tcp-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tcp-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tcp-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tcp-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tcp-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tcp-tooltip tpc-tooltip-e"></div>
</div>
</div>
You can achieve this far more effectively with CSS. If you add some common classes to the tp-cont-X and tpc-tooltip-X elements, then you can use the :hover pseudo-selector, like this:
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.tp-cont:hover .tpc-tooltip {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tpc-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tpc-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tpc-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tpc-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tpc-tooltip tpc-tooltip-e"></div>
</div>
</div>
Try using index inside hover.
var tcpTooltip = $('.tp-cont-tech, .tp-cont-b, .tp-cont-m, .tp-cont-t, .tp-cont-i, .tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, .tpc-tooltip-b, .tpc-tooltip-m, .tpc-tooltip-t, .tpc-tooltip-i, .tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function(index, item) {
$(tcpTooltipDiv).eq($(this).index()).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>
I’m having a little trouble with this template: basically, I’m trying to add functionality where if you click a box it will expand sliding the other ones off-screen, but instead sliding the div off-screen it’s disappearing completely.
Here is what I have so far: JSFiddle.
$(function() {
$(".box").click(function() {
var isopened = $(this).attr("isopen");
if (isopened == "true") {
$(this).css("position", "relative").css("width", $(this).attr("data-ow"));
$(this).attr("isopen", "false");
}
else {
$(this).attr("data-ow", $(this).css("width"));
$(this).css("position", "relative").css("width", "40%");
$(this).attr("isopen", "true");
}
});
});
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
max-width: 100%;
max-height: 600px;
overflow: hidden;
}
.box {
height: 600px;
display: block;
width: 13.33333333%;
border: 1px solid white;
background-color: black;
float: right;
position: relative;
}
.box:first-of-type {
width: 29.0%;
background-color: orange;
}
.box:last-of-type {
width: 29.0%;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
What I ultimately want is when one of the boxes is clicked it expands and instead of the entire div being hidden only the part which is off-screen is hidden:
I think you might like this flexbox solution as you can do what you want without usign any jQuery/JS. Pure CSS and HTML:
body {
background-color: black
}
#container {
display: flex;
width: 100%;
height: 50vh;
}
#container > div {
flex: 1;
min-width: 0;
transition:min-width 0.2s ease;
outline:0;
}
#container > div:focus {
min-width: 50vw;
}
<div id="container">
<div tabindex="0" style="background-color:blue"></div>
<div tabindex="0" style="background-color:orange"></div>
<div tabindex="0" style="background-color:green"></div>
<div tabindex="0" style="background-color:white"></div>
<div tabindex="0" style="background-color:blue"></div>
</div>
I used tabindex to give me the ability to use the :focus selector.
<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();
}
)