I'm looking to toggle the z-index of 3 divs using jquery but I don't know how I would go about doing that. The desired effect I'm looking for is just to click a button that corresponds to the respective div and have the z-index of that div become a larger number in order to show the content in that div. As of now I have each div layered on top of each other.
.toggle-content {
position: absolute;
float: left;
width: 50px;
height: 50px;
}
<div id="content">
<div id="toggle">
<a href="#">
<div class="button" data-content="#1">1</div>
</a>
<a href="#">
<div class="button" data-content="#2">2</div>
</a>
<a href="#">
<div class="button" data-content="#3">3</div>
</a>
</div>
<div id="togglecontent">
<div id="1" class="toggle-content" style="z-index:9;">1</div>
<div id="2" class="toggle-content" style="z-index:8;">2</div>
<div id="3" class="toggle-content" style="z-index:7;">3</div>
</div>
</div>
So then I'm looking for how I can just click a button to have the corresponding div change its z-index to the highest value.
Any help would be greatly appreciated!
You can do something like this:
$('#toggle').on('click', 'a', function(e) {
e.preventDefault();
$( $(this).children().data('content') ).css('zIndex', 5).siblings().css('zIndex', 4);
});
.toggle-content {
position: absolute;
float: left;
width: 50px;
height: 50px;
background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<div id="toggle">
<a href="#">
<div class="button" data-content="#1">1</div>
</a>
<a href="#">
<div class="button" data-content="#2">2</div>
</a>
<a href="#">
<div class="button" data-content="#3">3</div>
</a>
</div>
<div id="togglecontent">
<div id="1" class="toggle-content" style="z-index:9;">1</div>
<div id="2" class="toggle-content" style="z-index:8;">2</div>
<div id="3" class="toggle-content" style="z-index:7;">3</div>
</div>
</div>
Related
I have several hidden DIVs and I want to animate the slideToggle. All buttons get links to scroll to the matching DIV.
The problem is when I click on the button the scroll is stopped before reaching the DIV. So how can I do to complete and animate the scroll (i.e slow scroll) with .slideToggle?
$(document).ready(function() {
$(".menu").hide();
$(".tog").click(function() {
$(".menu:visible").toggle();
if (!$("." + $(this).data('id')).is(':visible')) {
$("." + $(this).data('id')).slideToggle();
}
});
});
.edsContenu {
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
height:200px;
}
.bridgeContenu{
padding: 5px;
text-align: center;
background-color: #00011f;
display: none;
height:200px;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id="discovered">
<div id="file" class="container">
<a href="#edsContenu" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
</div>
<div id="file" class="container">
<a href="#bridgeContenu" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
</div>
<div id="edsContenu" class="menu edsContenu">
<section id="content">
<div id="text">
</div>
</section>
</div>
<div id="bridgeContenu" class="menu bridgeContenu">
<section id="content">
<div id="text">
</div>
</section>
</div>
Made some changes to the code, read the comment
$(document).ready(function() {
$(".menu").hide();
$(".tog").click(function() {
var id = "#" + $(this).data('id')
// hide all menu except the current one, otherwise using
// $(".menu:visible").hide() and using $(id).is(':hidden') after is really pointless
$(".menu:visible:not('"+id+"')").toggle();
if ($(id).is(':hidden')) {
$(id).toggle("fast", function(){
// after toggle is finished then animate scrollto
$("html, body").animate({ scrollTop: $(id).offset().top }, 1000);
});
}
});
});
.menu{
background:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="discovered">
<div id="file" class="container">
<a href="#research" class="tog" data-id="edsContenu" id='showEDS'> <input id="eds" type="image" src="IMAGES/PNG/eds.png" alt="EDS system" height="250px" width="250px" /></a>
</div>
<div id="file" class="container">
<a href="#research" class="tog" data-id="bridgeContenu" id='showBridge'><input id="bridge" type="image" src="IMAGES/PNG/pont.png" alt="pont photonique" height="250px" width="250px" /></a>
</div>
<div id="edsContenu" class="menu edsContenu">
<section id="content">
<div id="text">
test edsContenu
</div>
</section>
</div>
<div id="bridgeContenu" class="menu bridgeContenu">
<section id="content">
<div id="text">
test bridgeContenu
</div>
</section>
</div>
Say I have a few divs that look like this:
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
</div>
</div>
is it possible to take the hrefs and move them to the Box class without having to use nth-child in the script?
I assume you like to make the whole outer div area clickable.
I solved this as follows.
$(document).ready(function () {
$('[data-clickable-area]').click(function (e) {
e.preventDefault();
e.stopPropagation();
$(this).find('a').first().trigger('click');
});
$('[data-clickable-area] a').click(function (e) {
// triggering the default handler of browser did not succeed
window.location = $(this).attr('href');
e.stopPropagation();
});
});
[data-clickable-area] {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
<div class="Box" data-clickable-area>
<img src=../image.jpg>
<div class="mask">
<a href="https://duckduckgo.com/" class="Link">
</div>
</div>
Only one link for every box is supported in my solution.
Based on your comment, in that case I would use a CSS only approach. Since your client wants it on Mobile anyways simple make the parent container position relative and make the link you want to be clickable position absolute with a higher z-index and make it fill the container like so:
/*Demo styling */
.Box {
height: 200px;
width: 200px;
background: #f0f0f0;
}
body > * + * {
margin-top: 10px;
}
/*Suggested styling */
#media screen and (max-width: 1024px) {
.Box {
position: relative;
}
.Box .Link {
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
left: 0;
top: 0;
}
}
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
<div class="Box">
<img src=../image.jpg>
<div class="mask">
<a href="link" class="Link">
<a href="link2">
</div>
</div>
I have an OwlCarousel with nav links within the first slide, is there a way to make the carousel return to the first slide after an event, be it a timer, or when the mouse moves out of the carousel?
Is it also possible to trigger the carousel with mousing over a link rather than clicking it?
Code snippet:
<div class="owl-carousel">
<div class="item" data-hash="slide0">
<ul>
<li><a class="button secondary url" href="#slide1">1</a></li><br/>
<li><a class="button secondary url" href="#slide2">2</a></li><br/>
<li><a class="button secondary url" href="#slide3">3</a></li><br/>
<li><a class="button secondary url" href="#silde4">4</a></li><br/>
<li><a class="button secondary url" href="#slide5">5</a></li><br/>
<li><a class="button secondary url" href="#slide6">6</a></li><br/>
</ul>
</div>
<div class="item" data-hash="slide1">
//some image
</div>
<div class="item" data-hash="slide2">
//some image
</div>
<div class="item" data-hash="slide3">
//some image
</div>
<div class="item" data-hash="slide4">
//some image
</div>
<div class="item" data-hash="slide5">
//some image
</div>
<div class="item" data-hash="slide6">
//some image
</div>
</div>
According the owlCarousel's docs you can use the to.owl.carousel function to slide to specific position.
Here is an example for both - going to the first slide (slides numbering starts with 0) and hover on the li elements to go to a specific slide on hover.
var owl;
$(document).ready(function(){
owl = $(".owl-carousel").owlCarousel({items:1});
$('#btn1').click(function() {
owl.trigger('to.owl.carousel', [0, 400]);
});
$('#ul1 li').hover(function() {
owl.trigger('to.owl.carousel', [parseInt($(this).text()) - 1, 400]);
});
});
body {
margin: 0;
padding: 0;
}
.owl-carousel .item {
height: 120px;
background: #4DC7A0;
padding: 1rem;
list-style: none;
margin: 10px;
text-align: center;
color: white;
font-size: 20px;
line-height: 120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<!-- Set up your HTML -->
<div class="owl-carousel">
<div class="item"> slide1 </div>
<div class="item"> slide2 </div>
<div class="item"> slide3 </div>
<div class="item"> slide4 </div>
<div class="item"> slide5 </div>
<div class="item"> slide6 </div>
<div class="item"> slide7 </div>
<div class="item"> slide8 </div>
<div class="item"> slide9 </div>
<div class="item"> slide10 </div>
<div class="item"> slide11 </div>
<div class="item"> slide12 </div>
</div>
<button id="btn1">Go to first</button>
<ul id="ul1">
<li>1</li>
<li>5</li>
<li>10</li>
</ul>
I want to make left menu sticky, but when i give it position:fixed then the right container which is also inside parent div comes down in the left side. Please help. Thanks... This is my html structure:
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox">
<div class="right_div_content">
</div>
</li>
</ul>
</div>
<div class="midwrapper_inner">
<ul>
<li class="leftbox">
<div class="left_div content">
</div>
</li>
<li class="middlewhitebox" style="margin-left: XXXpx" >
<div class="right_div_content">
</div>
</li>
</ul>
where xxx is the width of leftbox.
To be honest though I would remove the ul completely and use divs
<div style="height: 1000px;">
<div style="width: 200px; height:200px; position: fixed; background: red;" ></div>
<div style="margin-left: 200px; width: 200px; height:200px; background: green;" ></div>
</div>
http://jsfiddle.net/wyxop52k/
Css
.leftbox{position:relative; float:left; margin-right:15px; }
Try This ...(Y)
I tried to simulate a click on the first <li> in the <ul>. Here's the html.
<ul class="product-thumbs clearfix mCustomScrollbar _mCS_1">
<div class="mCustomScrollBox mCSB_horizontal" id="mCSB_1" style="position:relative; height:100%; overflow:hidden; max-width:100%;">
<div class="mCSB_container mCS_no_scrollbar" style="position: relative; left: 0px; width: 195px;">
<li data-full-image="/images/store_logos/e49c796f8740723601503849db95893f6592526a.jpeg" data-large-image="/images/store_logos/e49c796f8740723601503849db95893f6592526a.jpeg" class="active">
<img src="/images/store_logos/e49c796f8740723601503849db95893f6592526a.jpeg" alt="">
</li>
<li data-full-image="/images/store_logos/05838eeaff6014af6206de1cc7a60d7335e61dc1.jpeg" data-large-image="/images/store_logos/05838eeaff6014af6206de1cc7a60d7335e61dc1.jpeg" class="">
<img src="/images/store_logos/05838eeaff6014af6206de1cc7a60d7335e61dc1.jpeg" alt="">
</li>
</div>
<div class="mCSB_scrollTools" style="position: absolute; display: none;">
<div class="mCSB_draggerContainer" style="position:relative;">
<div class="mCSB_dragger" style="position: absolute; left: 0px;">
<div class="mCSB_dragger_bar" style="position:relative;"></div>
</div>
<div class="mCSB_draggerRail"></div>
</div>
</div>
</div>
</ul>
Here's my jQuery:
$(".product-thumbs > li:first").trigger('click');
Why is this not working?
try changing
$(".product_thumbs > li:first")
with
$(".product_thumbs li:first")
Because li is not direct child of ul
Here, You cannot use
$(".product-thumbs > li:first")
> is used to filter immediate children. But in your DOM structure, you have
<ul>
<div>
<li>
...
Hence the issue.
Change it to
$(".product-thumbs li:first").trigger('click')
and it should work.
Because you have written product_thumbs instead of product-thumbs ?