I'm having a bit of a problem getting the digital traditional flash and contact info to show when i click on the animated slide menu.... i think its my style's and body and how im calling them from the java script, in the body tag... a little guidance would be nice :)

thanks
ardillo

/*
// start of div reaction//
<script type="text/javascript" >
jQuery(document).ready(function($){		   
			$("#a1").addClass("active").css({left:"75px"});
			$("#digital").hide();
			$("#traditional").hide();
			$("#flash").hide();
			$("#contact").hide();
			$("#workContainer").hide();
			
			$("a[class!='link']").click(function(){
				return false;
			});
			
			$("a:eq(0)").click(function(){
				if($("#a1").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#a1").animate({ left: '0', opacity: "show"}, 800).addClass("active");
				});
			});
			
			$("a:eq(1)").click(function(){
				if($("#digital").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675px", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#digital").animate({ left: '0', opacity: "show"}, 800).addClass("active");
					$("#workContainer").animate({ left: '0', opacity: "show"}, 800);
				});
			});
			
			$("#nav a[class!='work']").click(function(){
				$("#workContainer").animate({ left: '175', opacity: "hide"}, 800);
			});
			
			$("a:eq(2)").click(function(){
				if($("#traditional").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#traditional").animate({ left: '0', opacity: "show"}, 800).addClass("active");
				});
			});
			
			$("a:eq(3)").click(function(){
				if($("#contact").hasClass("active")){
					end();
				}
				$(".active").animate({left: "-675", opacity: "hide"}, 800, 
				function(){ $(this).removeClass("active");
					$("#contact").animate({ left: '0', opacity: "show"}, 800).addClass("active");
				});
			});
			
			//----------------------SCROLL TO------------------
			
			$("#workContainer a:eq(0)").click(function(){ $('#item').scrollTo('li:eq(0)', 800); });
			$("#workContainer a:eq(1)").click(function(){ $('#item').scrollTo('li:eq(1)', 800); });
			$("#workContainer a:eq(2)").click(function(){ $('#item').scrollTo('li:eq(2)', 800); });
			$("#workContainer a:eq(3)").click(function(){ $('#item').scrollTo('li:eq(3)', 800); });
			$("#workContainer a:eq(4)").click(function(){ $('#item').scrollTo('li:eq(4)', 800); });
			$("#workContainer a:eq(5)").click(function(){ $('#item').scrollTo('li:eq(5)', 
//end//

//start of main menu slide open//			
$(document).ready(function(){
    lastBlock = $("#digital");
    maxWidth = 210;
    minWidth = 75;	

    $("ul li a").hover(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
	$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
	lastBlock = this;
      }
    );

			
});
</script>
<style>
ul{
  list-style: none;
  padding: 0;
  float:right;
}

ul li{
  float: left;
  padding: 10px;
  display: block;
  margin-right: 10px;
  background:url(greymenubg.jpg) no-repeat;
}

ul li a{
  display: block;
  overflow: hidden;
  height: 75px;
  width: 75px;
  background:#FFFFFF;
}

#digital{
  width: 70px;
  background-color:#FFFFFF;
}

ul li img{
  position: absolute;
  border: none;
  width:70px
}

ul li p{
  width:70px;
  margin: 0;
  padding: 0;
  width: 120px;
  display: block;
  margin-left: 85px;
  background-color:#999999;
  color:#FFFFFF;
}
.span {
	color:#CCCCCC;
	cursor:pointer;
	}
div {  
  float:right;
  background-image:url(greymenubg);
  
  }

</style>
<body>
<div id="digital"</div>
<div id="traditional"</div>
<div id="flash" </div>
<div id="contact=" </div>
<ul id="a1" style="position:absolute;">
  <li>
    <a id="digital"><img src="d.png" width="30" height="47"/>
    
      <p>
	 
     	<strong>DIGITAL</strong><br/>
	</p>
    </a>  </li>
  <li>
    <a id="traditional"><span><img src="t.png" width="30" height="47"/></span>
	
       <p>
         <strong>TRADITIONAL</strong><br/></p>
  </a></li>
  <li>
    <a id="flash"><span><img src="fla.png" width="101" height="47"/></span>
      <p>
        <strong>FLASH 3.0/2.0</strong><br/>
    </p>
    </a></li>
</ul>

</body>
   	
*/

Please note that Java and Javascript are not the same thing. Flagging to see if this can be moved over to the Javascript forum.

This article has been dead for over six months. Start a new discussion instead.