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>
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>
$('.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>
I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..
Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</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>
Guys basically there will be a bootstrap container div, and inside there will be 4 card style divs with toggle expand/retract button. When you click on one card's button, the div will expand all the way to the container's width. Please check the image. I'm a newbie to jQuery and with the script I've, i'm not able to achieve the full width. If someone can help me out it'll be great. Here's the code below -
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() == 600 ? "200px" : "600px";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>
Is this what you're looking for?
I suggest taking a look at MDN to get deeper insights about CSS props: https://developer.mozilla.org/en-US/docs/Web/CSS/width
$(document).ready(function() {
$('#toggle-button').click(function() {
var toggleWidth = $("#exp_card_1").width() > 0 ? "0%" : "100%";
$('#exp_card_1').animate({
width: toggleWidth
});
});
});
#exp_card_1 {
position: relative;
height: 310px;
background: #2d3644;
z-index: 1;
}
#toggle-button {
position: absolute;
right: 0;
top: 43.7%;
height: 38px;
width: 38px;
background: #131f34 url("../images/arrow.png") no-repeat;
background-position: 5px 9px;
border-radius: 3px 0 0 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="container" style="padding:0; position:relative;">
<!-- /.row -->
<div class="row mar-t25">
<div class="col-xs-12 col-sm-3">
<div id="exp_card_1">
<div id="toggle-button"></div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_3" class="stock-card curves2">
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div id="exp_card_4" class="stock-card curves2">
</div>
</div>
</div>
<!-- /.row -->
</div>