Slide show z-index issue

Greenhorn

Posts: 29

posted 9 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks to whoever is looking..
I have been trying to develop a slide show code, CSS,JavaScript the code is ready.. copying the html code below (please feel free to use it anywhere you like)..
I have been having issues trying to get the z-index right
'cover' div from code below has a box shadow and i'd like the images in 'slide' div to slide under it (notice how images hide the shadow on left and right when moving)
Thanks in advance!

<html>
	<head>
		<script type="text/javascript">
			var counter=1;
			var imgCount = 0;
			var allowMove = true;
			var interval = 5000;
			var imgWidth = 1024;
			var imgHeight = 400;
			function kickSlide()
			{
				var slideDiv = document.getElementById('slide');
				var coverDiv = document.getElementById('cover');
				var linksDiv = document.getElementById('directLinks');
				var allImg = slideDiv.getElementsByTagName('img');
				imgCount = allImg.length;
				slideDiv.style.width = ((imgWidth+12)*imgCount)+"px";
				slideDiv.style.height = (imgHeight)+"px";
				coverDiv.style.width = (imgWidth+8)+"px";
				coverDiv.style.height = (imgHeight+8)+"px";
				linksDiv.style.width = (imgWidth)+"px";
				for(i=0; i<imgCount; i++)
				{
					allImg[i].style.width = imgWidth;
					allImg[i].style.height = imgHeight;
				}
				setInterval(assignSize,interval);
			}
			function assignSize()
			{
				var slideDiv = document.getElementById('slide');
				if(counter>=imgCount)
					counter=0;
				if(allowMove)
				{
					slideDiv.style.left = "-"+((imgWidth+12)*(counter))+"px";
					setBorder();
					counter++;
				}
			}
			function denyPermission()
			{
				allowMove = false;
			}
			function grantPermission()
			{
				allowMove = true;
			}
			function moveImg(e)
			{
				counter++;
				var slideDiv = document.getElementById('slide');
				if(counter>=imgCount)
					counter=0;
				slideDiv.style.left = "-"+((imgWidth+12)*(counter))+"px";
			}
			function showImg(e)
			{
				counter = e.name - 1;
				var slideDiv = document.getElementById('slide');
				if(counter>=imgCount)
					counter=0;
				slideDiv.style.left = "-"+((imgWidth+12)*(counter))+"px";
				setBorder();
				counter++;
			}
			function setBorder()
			{
				var linksDiv = document.getElementById('directLinks');
				var allButton = linksDiv.getElementsByTagName('input');
				for(i=1; i<=allButton.length; i++)
				{
					var currButton = allButton[i-1];
					if((counter+1) == (i))
						currButton.setAttribute("style", "border:4px solid #e74409;");
					else
						currButton.setAttribute("style", "border:4px solid #789a9f;");
				}
			}
		</script>
		<style type="text/css">
			body{
				width:1200px;
				margin:auto;
				padding:0;
				background-color:black;
				border:2px solid #e74409;
			}
			#slide{
				position:relative;
				left:0px;
				margin:0;
				padding:0;
				width:100px;
				height:100px;
				transition: all 1s ease-in-out;
				z-index:0;
			}
			#slide img{
				position:relative;
				margin:4px;
				padding:0px;
				border:0px solid red;
				z-index:5;
				box-shadow: inset 0 0 20px #ffffff;
				opacity:1;
			}
			#imgText{
				position:relative;
				width:100px;
				height:20px;
				top:5px;
				background-color:#000;
				opacity:0.7;
				font-weight:bolder;
				color:#ddd;
				text-decoration:none;
				text-align:center;
			}
			#cover{
				position:relative;
				margin:5px auto auto auto;
				width:100px;
				height:100px;
				border:0px solid #000000;
				box-shadow: inset 0 0 20px #e74409;
				//box-shadow: 0px 3px 3px 3px #ddd;
				//background-color:#e74409;
				border-radius:2px;
				z-index:10;
				overflow:hidden;
			}
			#directLinks{
				padding:0;
				margin:0;
				position:relative;
				bottom:35px;
				width:100px;
				text-align:center;
				z-index:20;
			}
			#directLinks input{
				padding:2px;
				margin:2px;
				border:4px solid #789a9f;
				border-radius:2px;
				background-color:#ffffff;
				opacity:0.7;
				transition: all 0.4s ease-in-out;
			}
			#directLinks input:hover{
				opacity:1;
			}
		</style>
	</head>
	<body onload=kickSlide()>
		<div id="cover" onmouseover=denyPermission() onmouseout=grantPermission();>
			<div id="slide">
				<a href="#"><img src="11.jpg"/></a>
				<a href="#"><img src="12.jpg"/></a>
				<a href="#"><img src="13.jpg"/></a>
				<a href="#"><img src="14.jpg"/></a>
				<a href="#"><img src="15.jpg"/></a>
				<a href="#"><img src="16.jpg"/></a>
				<a href="#"><img src="17.jpg"/></a>
				<a href="#"><img src="18.jpg"/></a>
				<a href="#"><img src="19.jpg"/></a>
				<a href="#"><img src="20.jpg"/></a>
				<a href="#"><img src="21.jpg"/></a>
				<a href="#"><img src="22.jpg"/></a>
			</div>
			<div id="directLinks" onmouseover="grantPermission();">
				<input type="button" name="1" value="Alaska" onmouseover="showImg(this);" style="border:4px solid #e74409;">
				<input type="button" name="2" value="Malaysia" onmouseover="showImg(this);">
				<input type="button" name="3" value="Angst" onmouseover="showImg(this);">
				<input type="button" name="4" value="Sky" onmouseover="showImg(this);">
				<input type="button" name="5" value="Scuba" onmouseover="showImg(this);">
				<input type="button" name="6" value="Arching" onmouseover="showImg(this);">
				<input type="button" name="7" value="Sand" onmouseover="showImg(this);">
				<input type="button" name="8" value="Sortua" onmouseover="showImg(this);">
				<input type="button" name="9" value="Jabong" onmouseover="showImg(this);">
				<input type="button" name="10" value="Ramastus" onmouseover="showImg(this);">
				<input type="button" name="11" value="Bermuda" onmouseover="showImg(this);">
				<input type="button" name="12" value="Frandor" onmouseover="showImg(this);">
			</div>
		</div>
	</body>
</html>