menu to slide content (help need)

[lasse48]

heey,

 

i have this javascript content slider, and its working perfekt, but i have a problem getting it to work with a li menu i made help please

 

 

setup:

		<div class="Contentcenter">
			<div class="ContentFrame">
				<div class="AllTabs">
					<div class="TabContent">
						<p>
		<?php include ("1.php"); ?>
						</p>
					</div>
					<div class="TabContent">
						<p>
		<?php include ("2.php"); ?>			
						</p>
					</div>
					<div class="TabContent">
						<p>
		<?php include ("3.php"); ?>					
						</p>
					</div>
				</div>
			</div>
		</div>	

 

 

okai this makes the thing slide when i click on span:

<div class="TabMenuslide">	

         

			<span>
				<img src="img/ipod.png" />
			</span>
			<span>
				<img src="img/ipod.png" />
			</span>
			<span>
				<img src="img/drive.png" />
			</span>

		</div>

 

 

need to get it to work with insted, but i am having problems with it

<ul class="sidenav">
<li>
	<a href="#">1
	<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
	</a>
</li>
<li>
	<a href="#">2
	<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
	</a>
</li>
<li>
	<a href="#">3
	<span>Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip. </span>
	</a>
</li>
</ul>

 

 

javascript:

<script type="text/javascript">

		$(document).ready(function(){
			//Initialize
			//Set the selector in the first tab



			//Add click action to tab menu
			$(".TabMenuslide span").click(function(){


				//Find the width of a tab
				var TabWidth = $(".TabContent:first").width();
				if(parseInt($(".TabContent:first").css("margin-left")) > 0)
					TabWidth += parseInt($(".TabContent:first").css("margin-left"));
				if(parseInt($(".TabContent:first").css("margin-right")) >0)
					TabWidth += parseInt($(".TabContent:first").css("margin-right"));
				//But wait, how far we slide to? Let find out
				var newLeft = -1* $("span").index(this) * TabWidth;
				//Ok, now slide
				$(".AllTabs").animate({
					left: + newLeft + "px"
				},1000);
			});
		});

	</script>

 

 

 

thanks

[lasse48]

souce: http://www.htmldrive.net/items/show/715/slide-tabbed-box-using-jQuery