Unwanted overlay of java script picture slide animation with website header
Problem/ Observation My picture slide animation box is placed just below the fixed header ( which is not the problem). When i first load the page, there is no overlay between the fixed header and picture box. However, when i click on the left and right (next & previous ) arrows to change the picture, the hidden part of the picture displays and thus overlays with the fixed header for the period of animation, then hides itself behind the fixed header once more.
How do i stop this overlay behaviour so that the picture box always stays behind the header?
The site includes the picture slide animation adapted from the following source:
Link for slide animation (html,css & js)
My header.php file has thee following structure
<header>
<img src="img/logo.png" width="400" height="120" alt="site logo"/>
<ol >
<li class="menu"> <a href="index.php">Home</a> </li>
<li class="menu"> <a href='about.php'>About This site </a> </li>
<li class="menu"> <a href='learn.php'> Learn</a> </li>
<li class="menu"> <a href='sponser.php'> Sponsor Me </a></li>
</ol>
</header>
CSS for header
*{
padding:0;
text-decoration: none;
}
header{
background-color: white;
color: white;
position:fixed;
top:0;
border-bottom:1px solid #1e204c;
display: block;
width:100%;
}
ol {
display:inline-block;
}
a:link{
color:black;
}
.menu{
display:inline-block;
font-size:16px;
font-family: 'Roboto', sans-serif;
padding:0px 40px 0px 40px;
position:relative;
bottom:30px;
left:700px
}
In case you don't wish to follow the link, i have copied and pasted my adapted markup and script below.
HTML
enter code here
<?php include 'header.php'; ?>
<!--photos-->
<div class='main'>
1 / 3</div>--> caption
2 / 3</div>--> caption
3 / 3</div>--> caption
❮ ❯
<div style="text-align:center">
<!-- span is an inline version of a div-->
<span class="bulletIndicators" onclick="currentSlide(1)"></span>
<span class="bulletIndicators" onclick="currentSlide(1)"></span>
<span class="bulletIndicators" onclick="currentSlide(1)"></span>
CSS for image slides
.mySlides { height:400px; width: 100%; overflow:hidden;
} /* Next & previous buttons */ .previus, .next { cursor:pointer; position: absolute; top: 300px; padding: 16px; color: white; font-weight: bold; font-size: 18px; overflow:hidden;
/* allows for a change in property within a given timescale Ease specifies a type of transition which starts and ends slow but speeds up somewhere in the middle of the timescale. */ transition: 0.6s ease; border-radius: 0 3px 3px 0; }
/* Position the "next button" to the right */ .next { right: 2px; border-radius: 3px 0 0 3px; }
.previus{ left: 2px; border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */ .previus:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
/* The dots/bullets/indicators */ .bulletIndicators { cursor:pointer; height: 13px; width: 13px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease;
} /* :active MUST come after :hover (if present) in the CSS definition in order to be effective! */ .active, .bulletIndicators:hover { background-color: #717171; }
/* Fading animation using webkit Webkit is a block element with a set of rule sets called Keyframes which can be used to style it in a given set time */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; overflow:hidden;
}
@-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } /* fading alpha level- remember if the box display was set to none then the you should see the background colout briefly */ @keyframes fade { from {opacity: .4} to {opacity: 1} }
Java-Script
var slideIndex = 1; showSlides(slideIndex);
function plusSlides(n) { showSlides(slideIndex += n); }
function currentSlide(n) { showSlides(slideIndex = n); }
function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("bulletIndicators"); if (n > slides.length) {slideIndex = 1;} if (n < 1) {slideIndex = slides.length;} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }
I accidentally came across the 'z-index' property whilst looking at different ways to move boxes around in css. I set it to a high value, in my case i set z-index=30; within the header selector. I'm not sure if this works for all elements because i don't know their respective default z-indices.
header{
background-color: white;
color: white;
position:fixed;
top:0;
border-bottom:1px solid #1e204c;
display: block;
width:100%;
z-index=30;
}