Web Analytics Made Easy -
StatCounter Slide Show covering my navigation - CodingForum

Announcement

Collapse
No announcement yet.

Slide Show covering my navigation

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Slide Show covering my navigation

    I am using CSS navigation that shows/hides on mouseover with a javascript function.

    I also have a slide show on the page right under the navigation that fades images in and out.

    When the navigation is visible over an image in the slideshow it is always on top EXCEPT when the image is fading in and out. Once the image is done fading the navigation goes back to the front. VERY ANNOYING!

    I have tried the z-index with no luck and also tried playing with the absolute and relative positioning. Neither worked as I had hoped. i believe that the problem lies within the Javascript of the slideshow during the fading but I am not sure where to start...Any thoughts?

    My code:

    *Navigation*
    Code:
    CSS
    #nav {
    	width: 800px;
    	margin: 0 auto;
    	padding: 0px 10px;
    	border-top: 1px solid black;
    	border-bottom: 1px solid black;
    	background-color: rgb(59, 98, 120);
    }
    
    #nav a {
    	float: left;
    	padding: 0 15px;
    	height: 25px;
    	line-height: 220%;
    	font-weight: bold;
    	color: rgb(235, 235, 235);
    	font-size: 11pt;
    	text-align: center;
    	text-decoration: none;
    }
    	
    #nav a:hover {
    	color: rgb(0, 0, 0);
    }
    
    table.menu {
    	background: rgb(79, 131, 161);
    	position: absolute;
    	visibility: hidden;
    }
    
    JAVASCRIPT
    function showmenu(elmnt) 
    {
    	document.getElementById(elmnt).style.visibility="visible";
    }
    
    function hidemenu(elmnt) 
    {
    	document.getElementById(elmnt).style.visibility="hidden";
    }
    *Slideshow*
    Code:
    HTML
    var imgArray = new Array();
    	imgArray[0] = "images/ss1.jpg";
    	imgArray[1] = "images/ss2.jpg";
    	imgArray[2] = "images/ss3.jpg";
    	imgArray[3] = "images/ss4.jpg";
    	imgArray[4] = "images/ss5.jpg";
    	imgArray[5] = "images/ss6.jpg";
    	imgArray[6] = "images/ss7.jpg";
    	imgArray[7] = "images/ss8.jpg";
    	imgArray[8] = "images/ss9.jpg";
    
    slideshowFade('Slideshow1','',imgArray,8,3000);
    
    JAVASCRIPT
    var slideshowFadeAnimate = new Array();
    var slideshowFadeTimer   = new Array();
    var slideshowFadeCount   = new Array();
    var slideshowFadeImages  = new Array();
    
    function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
    {
    	if(cl)
    		cl = ' class="'+cl+'"';
    		document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');
    
    	var ss = document.getElementById(id+'img');
    	
    	slideshowFadeCount[id]   = 0;
    	slideshowFadeImages[id]  = imageArray;
    	slideshowFadeAnimate[id] = 'run';
    	slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
    }
    
    function slideshowFadeAnimation(id,holdTime)
    {
    	if(slideshowFadeAnimate[id]=='run')
    	{
    		var obj = document.getElementById(id+'img');
    		var opa = slideshowFadeCount[id]%200;
    		if(opa==0)
    		{
    			slideshowFadeAnimate[id] = 'load';
    			obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
    		}
    		else if(opa==100)
    		{
    			slideshowFadeAnimate[id] = 'hold';
    			setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);
    		}
    		else if(opa>100)
    			opa = 200-opa;
    			obj.style.opacity = (opa/100).toString();
    			obj.style.filter  = "alpha(opacity="+opa.toString()+")";
    			slideshowFadeCount[id]++;
    		if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
    			slideshowFadeCount[id]=0;
    	}
    }
    
    function slideshowFadeRun(id)
    {
    	slideshowFadeAnimate[id] = 'run';
    }
Working...
X