CODEWITHSUNDEEP
jqueryhtmlcss
Raghav Patnecha
Raghav Patnecha

Reputation: 736

Click div with negative z-index

I created two divs which rotates and give perspective on click of a button and show a hidden div with z-index:5. But I am not able to select elements of the hidden div because of some overlapping of the outer div. I tried giving positive z-index but then the hidden div comes in front which the don't want. Is there any way I can click element in hidden div with keeping my z-index negative i.e same.

$('#split-me').click(function() {
  $('.top').toggleClass('slide-up');
  $('.bottom').toggleClass('slide-down');
  $('.hidden').toggleClass('bar');
});

$('#yum').click(function() {
  $('.top').toggleClass('zoo');
  $('.bottom').toggleClass('zoo');
  $('.wrapper').toggleClass('lost');
});
* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

.top {
  background-color: #3498db;
  height: 100%;
  position: absolute;
  width: 100%;
  //box-shadow: 0 0 12px rgba(0,0,0,.50);
  top: 0%;
  transition: 2s top;
}

.bottom {
  background-color: #ecf0f1;
  height: 100%;
  position: absolute;
  width: 100%;
  //  box-shadow: 0 0 10px rgba(0,0,0,.45);
  top: 0%;
  transition: 2s top;
}

.wrapper {
  position: relative;
  height: 50%;
  min-height: 200px;
  perspective: 600px;
}

.slide-up {
  top: -10%;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}

.slide-down {
  top: 10%;
  transform: rotateX(5deg);
  transform-style: preserve-3d;
}

.hidden {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -5;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:black;
}

.hidden h2 {
  height: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  color: #3498db;
}

.btn {
  margin: auto;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  height: 15px;
  width: 25px;
  padding-top: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  text-decoration: none;
  color: #3498db;
  z-index: 100;
  transition: .25s all;
  box-shadow: 0 0 0 4px #3498db, 0px 0 0 8px white, 0px 0 10px 0 rgba(0, 0, 0, .5), 0px 0 10px 10px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.btn:hover {
  box-shadow: 0 0 0 10px #3498db, 0px 0 0 20px white, 0px 0 15px 0 rgba(0, 0, 0, .5), 0px 0 10px 20px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.zoo {
  opacity: 0;
  transition-property: opacity, left, top, ease-in-out;
  transition-duration: 2s, 2s, 0s;
  transition-delay: 2s, 2s, 2s;
}

.lost {
  transform: rotateX(69deg);
  transition: transform 2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="top">
    <a class="btn" href="#" id="split-me"></a>
    raghav
  </div>
</div>

<div class="hidden">
  <h2 id="yum">I like Nachos!</h2>
</div>

<div class="wrapper">
  <div class="bottom">
    patnecha
  </div>
</div>

I in the snippet above I want to click <h2 id="yum">I like Nachos!</h2> so that I can run the click event.

Upvotes: 1

Views: 398

Answers (3)

kiranvj
kiranvj

Reputation: 34137

Will this work for you. I have triggered the click event in #yum from code.

$('#split-me').click(function() {
  $('.top').toggleClass('slide-up');
  $('.bottom').toggleClass('slide-down');
  $('.hidden').toggleClass('bar');
  $("#yum").click();
});

$('#yum').click(function() {
  $('.top').toggleClass('zoo');
  $('.bottom').toggleClass('zoo');
  $('.wrapper').toggleClass('lost');
});
* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

.top {
  background-color: #3498db;
  height: 100%;
  position: absolute;
  width: 100%;
  //box-shadow: 0 0 12px rgba(0,0,0,.50);
  top: 0%;
  transition: 2s top;
}

.bottom {
  background-color: #ecf0f1;
  height: 100%;
  position: absolute;
  width: 100%;
  //  box-shadow: 0 0 10px rgba(0,0,0,.45);
  top: 0%;
  transition: 2s top;
}

.wrapper {
  position: relative;
  height: 50%;
  min-height: 200px;
  perspective: 600px;
}

.slide-up {
  top: -10%;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}

.slide-down {
  top: 10%;
  transform: rotateX(5deg);
  transform-style: preserve-3d;
}

.hidden {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -5;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:black;
}

.hidden h2 {
  height: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  color: #3498db;
}

.btn {
  margin: auto;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  height: 15px;
  width: 25px;
  padding-top: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  text-decoration: none;
  color: #3498db;
  z-index: 100;
  transition: .25s all;
  box-shadow: 0 0 0 4px #3498db, 0px 0 0 8px white, 0px 0 10px 0 rgba(0, 0, 0, .5), 0px 0 10px 10px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.btn:hover {
  box-shadow: 0 0 0 10px #3498db, 0px 0 0 20px white, 0px 0 15px 0 rgba(0, 0, 0, .5), 0px 0 10px 20px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.zoo {
  opacity: 0;
  transition-property: opacity, left, top, ease-in-out;
  transition-duration: 2s, 2s, 0s;
  transition-delay: 2s, 2s, 2s;
}

.lost {
  transform: rotateX(69deg);
  transition: transform 2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="top">
    <a class="btn" href="#" id="split-me"></a>
    raghav
  </div>
</div>

<div class="hidden">
  <h2 id="yum">I like Nachos!</h2>
</div>

<div class="wrapper">
  <div class="bottom">
    patnecha
  </div>
</div>

Upvotes: 0

Vitaly Surkov
Vitaly Surkov

Reputation: 259

$(document).ready(function () {
	$('#split-me').click(function() {
		if($('.hidden').hasClass('bar')) {
			$('.trap').hide();
		}
		else {
			$('.trap').show();
		}
		$('.top').toggleClass('slide-up');
		$('.bottom').toggleClass('slide-down');
		$('.hidden').toggleClass('bar');
	});

	$('#yum').click(function() {
		$('.top').toggleClass('zoo');
		$('.bottom').toggleClass('zoo');
		$('.wrapper').toggleClass('lost');
	});
})
* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

body {
  position: relative;
	overflow: hidden
}

.top {
  background-color: #3498db;
  height: 100%;
  position: absolute;
  width: 100%;
  //box-shadow: 0 0 12px rgba(0,0,0,.50);
  transition: 2s top;
	top: 0;
}

.bottom {
  background-color: #ecf0f1;
  height: 100%;
  position: absolute;
  width: 100%;
  //  box-shadow: 0 0 10px rgba(0,0,0,.45);
  transition: 2s top;
	top: 0;
}

.wrapper {
  height: 50%;
  min-height: 200px;
  perspective: 600px;
	position: relative;
	z-index: 4;
}

.slide-up {
  top: -10%;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}

.slide-down {
  top: 10%;
  transform: rotateX(5deg);
  transform-style: preserve-3d;
}

.trap {
	display: none;
	z-index: 5;
}

.trap h2 {
	color: transparent;
}

.hidden {
	position: absolute;
  height: 100%;
  width: 100%;
  z-index: -5;
  top: 0;
  left: 0;
  display: block;
	background: black;
}

.hidden h2, .trap {
	position: absolute;
	transform: translate(-50%, -50%);
	top: 52%;
  left: 50%;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  color: #3498db;
}

.btn {
  margin: auto;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  height: 15px;
  width: 25px;
  padding-top: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  text-decoration: none;
  color: #3498db;
  z-index: 100;
  transition: .25s all;
  box-shadow: 0 0 0 4px #3498db, 0px 0 0 8px white, 0px 0 10px 0 rgba(0, 0, 0, .5), 0px 0 10px 10px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.btn:hover {
  box-shadow: 0 0 0 10px #3498db, 0px 0 0 20px white, 0px 0 15px 0 rgba(0, 0, 0, .5), 0px 0 10px 20px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.zoo {
  opacity: 0;
  transition-property: opacity, left, top, ease-in-out;
  transition-duration: 2s, 2s, 0s;
  transition-delay: 2s, 2s, 2s;
}

.lost {
  transform: rotateX(69deg);
  transition: transform 2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
	<div class="top">
		<a class="btn" href="#" id="split-me"></a>
		raghav
	</div>
</div>

<div class="trap">
	<h2 id="yum">I like Nachos!</h2>
</div>

<div class="hidden">
	<h2 id="yum">I like Nachos!</h2>
</div>

<div class="wrapper">
	<div class="bottom">
		patnecha
	</div>
</div>

Upvotes: 1

Anzil khaN
Anzil khaN

Reputation: 1984

Try this one

$('#split-me').click(function() {
  $('.top').toggleClass('slide-up');
  $('.bottom').toggleClass('slide-down');
  $('.hidden').toggleClass('bar');
});

$('#yum').click(function() {
  $('.top').toggleClass('zoo');
  $('.bottom').toggleClass('zoo');
  $('.wrapper').toggleClass('lost');
});
* {
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  height: 100%;
}

.top {
  background-color: #3498db;
  height: 100%;
  position: absolute;
  width: 100%;
  //box-shadow: 0 0 12px rgba(0,0,0,.50);
  top: 0%;
  transition: 2s top;
}

.bottom {
  background-color: #ecf0f1;
  height: 100%;
  position: absolute;
  width: 100%;
  //  box-shadow: 0 0 10px rgba(0,0,0,.45);
  top: 0%;
  transition: 2s top;
}

.wrapper {
  position: relative;
  height: 50%;
  min-height: 200px;
  perspective: 600px;
}

.slide-up {
  top: -10%;
  transform: rotateX(-5deg);
  transform-style: preserve-3d;
}

.slide-down {
  top: 10%;
  transform: rotateX(5deg);
  transform-style: preserve-3d;
}

.hidden {
  position: absolute;
  height: 50%;
  width: 100%;
  z-index: -5;
  margin: auto;
  top: 44px;
  left: 0;
  bottom: 0;
  right: 0;
}

.hidden h2 {
  height: 20px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  color: #3498db;
}

.btn {
  margin: auto;
  position: absolute;
  top: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  background: #FFF;
  height: 15px;
  width: 25px;
  padding-top: 40px;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-family: 'Open Sans', serif;
  text-decoration: none;
  color: #3498db;
  z-index: 100;
  transition: .25s all;
  box-shadow: 0 0 0 4px #3498db, 0px 0 0 8px white, 0px 0 10px 0 rgba(0, 0, 0, .5), 0px 0 10px 10px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.btn:hover {
  box-shadow: 0 0 0 10px #3498db, 0px 0 0 20px white, 0px 0 15px 0 rgba(0, 0, 0, .5), 0px 0 10px 20px rgba(0, 0, 0, .25);
  transition: 2s all;
}

.zoo {
  opacity: 0;
  transition-property: opacity, left, top, ease-in-out;
  transition-duration: 2s, 2s, 0s;
  transition-delay: 2s, 2s, 2s;
}

.lost {
  transform: rotateX(69deg);
  transition: transform 2s ease-in-out;
}

.hidden.bar {
  z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="top">
    <a class="btn" href="#" id="split-me"></a>
    raghav
  </div>
</div>

<div class="hidden">
  <h2 id="yum">I like Nachos!</h2>
</div>

<div class="wrapper">
  <div class="bottom">
    patnecha
  </div>
</div>

Upvotes: 0

Related Questions