Slide automatically-specific speed to a determined position

Tue Jan 22, 2013 10:48 pm

Sliding in the content to specific index in the page , this code multiply the element index with is 0 in first list and 1 in second link to the content width parameter. Here we use the same size in CSS and in sliding. JQuery function.
javascript code

<html>
<head>
<title>Slide automatically with a specific speed to a determined position on webpage  </title>
  
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>

$(document).ready(function()
{
// Sliding animation
// set some parameters
var speed = 650;  
var type = 'swing';  
var contentSize = '770'; //Set Content Size
var itemCount = $(".slider-navItem").length; 
var contentWrapSize = contentSize;  
var contentContainer = contentSize * itemCount;  
var margLeft = 0; // DO NOT CHANGE
// some CSS
$('.slider-content').css("width", contentSize + 'px');
$('#slider-contentContainer').css("width", contentContainer + 'px');
$('#slider-contentWrap').css("width", contentWrapSize + 'px');
// This is the whole Slider function
$('.slider-navItem').click(function()
{
var index = $(".slider-navItem").index($(this));
 alert(contentSize*index);
$('div#slider-contentContainer').animate({
marginLeft: margLeft-(contentSize*index)
}, speed, type);


});

});
</script>
</head>
<body>
 <div class="slider-content">
     <div  >
	 <a href="#" class="slider-navItem">Side it</a>
	     <div id="slider-contentWrap">
		    
			  
		 
		 
			  
			  <div id="slider-contentContainer">
				Text Area Text Area Text Area Text Area  Text Area 
Text Area Text Area Text Area
   Text Area Text Area Text Area Text Area  Text Area Text Area Text Area 
Text Area Area Text Area Text Area Text Area,Text Area Text Area Text Area
 Text Area,Text Area Text Area Text Area Text Area   
		  <a href="#" class="slider-navItem">Side it</a>
		 
		 </div>
		 
	 </div>
</div>
 
</body>
</html>

Slide automatically-specific speed to a determined position

Slide automatically-specific speed to a determined position

Topic Tags