$('.day-col-content').each(function() {
$(this).on('click', function() {
$('.day-col').removeClass('selected')
$(this).parent().addClass('selected');
$(this).clone().appendTo('.selected-day');
$('.selected-day .day-col-content').addClass('selected');
});
});
.actual-weather {
float: left;
width: 100%;
margin-bottom: 20px;
text-align: center;
}
.selected-day .selected-day {
float: left;
width: 100%;
}
.selected-day .day-col-content {
display: none;
}
.selected-day .day-col-content.selected {
display: block
}
.days-box {
float: left;
width: 100%;
display: flex;
justify-content: center;
}
.day-col {
float: left;
width: 130px;
height: 130px;
position: relative;
margin: 0 10px 10px;
text-align: center;
cursor: pointer;
background:red;
}
.day-col.selected {
background:blue;
}
.day-col .day-col-content {
width: 100%;
position: absolute;
margin: 0;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="actual-weather">
<span class="selected-day"></span>
</div>
<div class="days-box">
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div>
I have scenario where I want to click on specific div and then this div append to another div ( selected day)
and then I want to switch between appended divs for showing selected div (day) (for functionality like tabs).
Problem is that all div are showing and I don't know how to manage thoose selected divs
Does somebody know how to achieve this?
You need to empty the div first then append the DATA or use .html() directly and it will overrite the data:
$('.selected-day').html('').append( $(this).clone() );
//OR
$('.selected-day').html( $(this).clone() );
NOTE: You don't have to loop using .each() to attach the click event to all the divs just use the selector directly like :
$('.day-col-content').on('click', function() {
...
});
SAMPLE
$('.day-col-content').on('click', function() {
$('.day-col').removeClass('selected');
$(this).parent().addClass('selected');
$('.selected-day').html($(this).clone());
});
.selected-day {
background-color: yellow
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
day 3
</p>
</div>
<hr>
<div class="selected-day"></div>
Hi I'm not sure about your styling but this would work as a custom tab version
$(document).on('click','.day-col-content',function(){
$('.day-col').removeClass('selected')
$(this).parent('.day-col').addClass('selected');
$('.selected-day').html($(this).clone());
$('.selected-day .day-col-content').addClass('selected');
});
.day-col.selected {
color:green
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 1
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 2
</p>
</div>
</div>
<div class="day-col">
<div class="day-col-content">
<p class="weather">
content 3
</p>
</div>
</div>
<div class="selected-day"></div>
Related
I'm trying to switch a background image with a URL from a input field. With one block it works, for a second it only works if I use the first one first, or else it gets a undefined value. How do I grab the ImageUrl value for each block only?
jQuery($ => {
$(".Btn").click(function() {
jQuery(this).closest('.parent').find('.child')
.css("backgroundImage", "url('" + jQuery(".ImageUrl").val() + "')");
});
});
.child {
width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}
.wrapper {
width: 300px;
float: left;
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input class="ImageUrl"> <span class="Btn">Go</span>
</div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input class="ImageUrl"> <span class="Btn">Go</span>
</div>
</div>
</div>
There are lots of ways to traverse the DOM to accomplish this. Here's one.
Note that I've made your button an actual button. This is important for accessibility (and good semantics in general). Style accordingly. You could also apply aria-role="button" to a span if you prefer.
jQuery($ => {
$(".switch button").click(function() {
const imgUrl = $(this).prev('input').val();
$(this).closest('.parent').find('.child')
.css("backgroundImage", "url('" + imgUrl + "')");
});
});
.child {
width: 300px;
height: 300px;
background: #ccc;
background-size: cover;
}
.wrapper {
width: 300px;
float: left;
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input value="https://via.placeholder.com/400"> <button>Go</button>
</div>
</div>
</div>
<div class="wrapper">
<div class="parent">
<div class="child">
</div>
<div class="switch">
<input value="https://via.placeholder.com/400"> <button>Go</button>
</div>
</div>
</div>
I am trying to build a FAQ page where there is a div, on click it should slideToggle another div inside of it for visibility.
Once if it is clicked I want any other divs except this one, that are visible to slideUP.
My code currently works absolutely different from what I would like. I think the issue is with the .slideUp() part to find the other elements ("faq-f-a:visible") that are visible.
$(document).ready(function(){
// FAQ Q1
$(".faq-q1").click(function(){
$("#faq-f-a:visible").not(this).slideUp();
$(".faq-a1").slideToggle(500);
});
// FAQ Q2
$(".faq-q2").click(function(){
$("#faq-f-a:visible").not(this).slideUp();
$(".faq-a2").slideToggle(500);
});
// FAQ Q3
$(".faq-q3").click(function(){
$("#faq-f-a:visible").not(this).slideUp();
$(".faq-a3").slideToggle(500);
});
});
body {
background: #FFF;
padding: 50px;
font-family: Helvetica;
}
#faq-f-wrap {
padding: 40px;
font-size: 25px;
text-align: center;
margin: 0 auto;
width: 300px;
cursor: pointer;
}
#faq-f-a {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FAQ 01 -->
<div id="faq-f-wrap">
<div id="faq-f-q" class="faq-q1">
<span id="faq-f-txt">(1) This is a Question</span>
<div id="faq-f-a" class="faq-a1">
<span id="faq-f-ans">This is an answare!</span>
</div>
</div>
</div>
<!-- FAQ 02 -->
<div id="faq-f-wrap">
<div id="faq-f-q" class="faq-q2">
<span id="faq-f-txt">(2) This is a Question</span>
<div id="faq-f-a" class="faq-a2">
<span id="faq-f-ans">This is an answare!</span>
</div>
</div>
</div>
<!-- FAQ 03 -->
<div id="faq-f-wrap">
<div id="faq-f-q" class="faq-q3">
<span id="faq-f-txt">(3) This is a Question</span>
<div id="faq-f-a" class="faq-a3">
<span id="faq-f-ans">This is an answare!</span>
</div>
</div>
</div>
JsFiddle Here
You seem to swap ID and class
I would expect this - I changed most IDs to class.
You actually do not even need the IDs anymore
$(document).ready(function() {
$(".faq-q").click(function() {
const $ans = $(this).closest(".faq-f-wrap").find(".faq-a")
$(".faq-a:visible").not($ans).slideUp();
$ans.slideToggle(500);
});
});
body {
background: #FFF;
padding: 50px;
font-family: Helvetica;
}
.faq-f-wrap {
padding: 40px;
font-size: 25px;
text-align: center;
margin: 0 auto;
width: 300px;
cursor: pointer;
}
.faq-a {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- FAQ 01 -->
<div class="faq-f-wrap">
<div id="faq-f-q1" class="faq-q">
<span id="faq-f-id1">1</span>
<span id="faq-f-txt1">This is a Question</span>
<div id="faq-f-a1" class="faq-a">
<span id="faq-f-ans1">This is an answer!</span>
</div>
</div>
</div>
<!-- FAQ 02 -->
<div class="faq-f-wrap">
<div id="faq-f-q2" class="faq-q">
<span id="faq-f-id2">2</span>
<span id="faq-f-txt2">This is a Question</span>
<div id="faq-f-a2" class="faq-a">
<span id="faq-f-ans2">This is an answer!</span>
</div>
</div>
</div>
<!-- FAQ 03 -->
<div class="faq-f-wrap">
<div id="faq-f-q" class="faq-q">
<span id="faq-f-id3">3</span>
<span id="faq-f-txt3">This is a Question</span>
<div id="faq-f-a3" class="faq-a">
<span id="faq-f-ans3">This is an answer!</span>
</div>
</div>
</div>
I know how to select similarly named class name or ID if there are in the same direct parent, meaning if there are in the same box, proof https://codepen.io/akpobi/pen/poPddMr. But if there are more boxes and I'm trying to target all the buttons in their separate parents, it doesn't work. Help.
const btn = document.querySelector(".btn");
const box = document.querySelector(".box");
const boxInternal = document.querySelector(".box-internal").childNodes;
const popFunc = function(event) {
for (const boxInternals of boxInternal) {
if (event.target == boxInternals) {
box.classList.toggle("box-scale");
}
}
};
btn.addEventListener("click", popFunc, false)
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
You can use .closest(".box") to get the closest enclosing box to the event target, then toggle the desired class on it:
for (const btn of document.querySelectorAll(".btn")) {
btn.addEventListener("click", evt => {
evt.target.closest(".box").classList.toggle("box-scale");
});
}
body {
background-color: #0a0a16;
color: #ffffff;
margin: auto;
}
.box-wrapper {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
width: 200px;
height: 120px;
background-color: rgb(18, 18, 37);
margin: 5px;
transition: 0.6s;
}
.box-scale {
transform: scale(1.4);
}
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
Alternatively, you can use event delegation in the parent element:
document.querySelector(".box-wrapper")
.addEventListener("click", ({target: el}) => {
el.closest(".btn")
?.closest(".box")
?.classList
.toggle("box-scale")
;
})
;
body {
background-color: #0a0a16;
color: #ffffff;
margin: auto;
}
.box-wrapper {
display: flex;
position: fixed;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.box {
width: 200px;
height: 120px;
background-color: rgb(18, 18, 37);
margin: 5px;
transition: 0.6s;
}
.box-scale {
transform: scale(1.4);
}
<div class="box-wrapper">
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
<div class="box">
<div class="box-internal">
<button class="btn">Click</button>
</div>
</div>
</div>
If this is part of a form, you might want to disable submit with type="button" attributes on your buttons.
This has been asked a lot. But I can't seem to find a solution that works. I have a jQuery code that opens my submenu on hover, but it vanishes after I try to go over the submenu items. How can I fix that?
Here's my code:
$('.hover').hover(
function() {
$('.drop-box').show();
},
function() {
$('.drop-box').hide();
})
});
.drop-box {
position: absolute;
width: 100%;
height: 60px;
background: darkgreen;
top: 60px;
left: 0;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover</div>
<div class="drop-box">
<div class="container row">
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
</div>
</div>
</div>
Just place .drop-box and all its contents inside .hover.
Plus, you need to remove the top property to prevent the gap between the text and the .drop-box.
$('.hover').hover(
function () {
$('.drop-box').show();
},
function () {
$('.drop-box').hide();
}
);
.drop-box {
position: absolute;
width: 100%;
height: 60px;
background: darkgreen;
// top: 60px;
left: 0;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hover">hover<div class="drop-box">
<div class="container row">
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
</div>
</div>
</div>
UPDATE:
If you can't move .drop-box into .hover, you can wrap everything with a div and add the hover event using CSS:
.drop-box {
position: absolute;
width: 100%;
height: 60px;
background: darkgreen;
// top: 60px;
left: 0;
display: none;
}
.everything:hover .drop-box {
display: block;
}
<div class="everything">
<div class="hover">hover</div>
<div class="drop-box">
<div class="container row">
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
<div class="col-md-4">
<p class="mb-0">Text</p>
</div>
</div>
</div>
</div>
I have 5 div elements, all with class='item'.
Im catching them with: var x = document.getElementsByClassName("item");
Now I want to make disappear that div, which was mouseovered.
https://jsfiddle.net/LqsLbrco/1/
But it doesn't work as it supposed to do. Because all elements are disappearing, not only this which was hovered.
Edit: My point is that the modal div appear (the pink box) when the item div is hovered. Check out the new jsfiddle: https://jsfiddle.net/LqsLbrco/10/
There's a div behind the blue boxes, I want him to appear when the user hovers the blue box.
If you do it in jQuery, you could just do this.
Modified the markup to accommodate the requirements.
$(function() {
$(".container .item").bind("mouseover", function(event) {
$(event.target).find(".modal").show();
});
$(".container .modal").bind("mouseleave", function(event) {
$(event.target).hide();
})
});
.item {
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
margin: 5px;
}
.container {
display: inline-block;
}
.modal {
height: 100px;
width: 100px;
background-color: pink;
display: inline-block;
margin: 0px;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>
</div>
<div class="container">
<div class="item">
<div class="modal"></div>
</div>