Main Goal: “a page’s z-index to move to the most front once clicked and the most front to be behind the clicked one.”
My approach: onclick change the clicked class z-index to the most front and subtract the current most front z-index by one
//vars
var firstPage = $('.page-hub');
//check what class is clicked
$('div').click(function() {
var theClass = this.className;
alert(theClass);
if(theClass == 'page page-1' && theClass.css('z-index') != firstPage){
alert ('move me to front!');//most front z-index -= 1 and the clicked class page to z-index of 4
theClass.css('z-index', '4');
firstPage.css('z-index', '-=1');
firstPage = theClass;
}
//and now the firstPage var is supposedly be the new clicked class which is page .page-1
});
ps: This is what I came up with but I’m not sure how to write it or this approach may be wrong entirely.
and I’m not sure whats the best approach to this is. I’m down to basically rewrite everything really. I’m very desperate at this point, Thank you in advance.
css:
margin-left: 0px;
transition: margin-left .6s;
}
.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}
html:
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<ul class="roulette-title">
<li class="roulette-title-text" style="color: rgb(255, 253, 149);">R</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">O</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">U</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">L</li>
<li class="roulette-title-text" style="color: rgb(138, 255, 154);">E</li>
<li class="roulette-title-text" style="color: rgb(138, 212, 255)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 253, 149)">T</li>
<li class="roulette-title-text" style="color: rgb(255, 111, 111);">E</li>
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
</div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2">
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>
Advertisement
Answer
If i have understood your problem ….
I suggest you instead to swap the z-index, to swap the classes, because classes are linked to z-index.. If you really want to swap z-index this is one solution..if you prefer to use classes uncomment the code with swapping classeS…In anyway you have a good start to analyse my code.
$('div .page').on('click', function(event){
event.stopPropagation();
var z_clicked = $(this).css('z-index');
var class_clicked = $(this).attr('class');
alert('clicked on z-index =' + z_clicked +' classes=' + class_clicked);
if(z_clicked == 4) return false;
//trap the div which has z-index = 4
var z4 = $('div .page').filter(function(){
return $(this).css('z-index') == 4;
});
// uncomment if you want to swap the classes instead z-index
//swap the classes betwwen div clicked and div on topFront
//var class_toBack = z4.attr('class');
//z4.toggleClass(class_toBack).toggleClass(class_clicked);
//$(this).toggleClass(class_clicked).toggleClass(class_toBack);
//swap the z-index
alert('z4 classes=' + z4.attr('class'));
z4.css('z-index', $(this).css('z-index'));
$(this).css('z-index', 4);
// alert(z4.css('z-index'));
});.page-container .page {
position: absolute;
width: 1200px;
height: 712px;
box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);
}
/*page-hub*/
.page-hub-inside {
transform: scale(1);
transition: transform .6s;
}
ul.roulette-title {
width: 100%;
text-align: center;
margin-top: 200px;
}
ul li.roulette-title-text {
font-family: "LeagueGothic";
font-size: 170px;
display: inline;
margin-left: 5px;
}
ul h2.wheel-sub-title {
font-family: "Halimun";
color: white;
font-stretch: ultra-expanded;
font-size: 40px;
}
.page-hub {
z-index: 4;
background-color: rgb(32, 32, 32);
margin-left: 0px;
}
.page-hub-bookmark-arrow {
margin-top: 205px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(32, 32, 32);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-hub:hover .page-hub-inside {
transform: scale(1.05);
}
/*page-1*/
.page-1 {
margin-left: 50px;
z-index: 3;
background-color: rgb(255, 111, 111);
transition: margin-left .6s;
}
.page-1 .page-1-bookmark-arrow {
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 111, 111);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-1:hover {
margin-left: 100px;
}
/*page-2*/
.page-2 {
margin-left: 100px;
z-index: 2;
background-color: rgb(138, 202, 255);
transition: margin-left .6s;
}
.page-2 .page-2-bookmark-arrow {
margin-top: 50px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(138, 202, 255);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-2:hover {
margin-left: 150px;
}
/*page-3*/
.page-3 {
margin-left: 150px;
z-index: 1;
background-color: rgb(255, 253, 149);
transition: margin-left .6s;
}
.page-3 .page-3-bookmark-arrow {
margin-top: 100px;
margin-left: 1200px;
/*box-shadow: 0px 3.5px 0.5em 0px rgba(0, 0, 0, 0.25);*/
border-top: solid transparent;
border-left: solid rgb(255, 253, 149);
border-bottom: solid transparent;
border-right: solid transparent;
border-top-width: 25px;
border-left-width: 25px;
border-right-width: 25px;
border-bottom-width: 25px;
width: 25px;
height: 25px;
}
.page-3:hover {
margin-left: 200px;
}
/*page-rule*/
.page-rule {
width: 100%;
height: 100%;
position: fixed;
background-color: #fff;
z-index: 0;
}
.page-rule-hover-fx {
margin-left: -50px;
transition: margin-left .6s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
<div class="page page-hub">
<div class="page-hub-inside">
<h2 class="wheel-sub-title">~ Wheel ~</h2>
</ul>
</div>
<div class="page-hub-bookmark-arrow"></div>
<div class="page page-1">
<div class="page-1-bookmark-arrow"></div>
</div>
<div class="page page-2"> </div>
<div class="page-2-bookmark-arrow"></div>
</div>
<div class="page page-3">
<div class="page-3-bookmark-arrow"></div>
</div>
</div>
<div class="page-rule">
<div class="page-rule-hover-fx"></div>
</div>