Switch to full style
JQuery Examples
Post a reply

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>




Post a reply
  Related Posts  to : Slide automatically-specific speed to a determined position
 Specific Colors for Specific Forum     -  
 character running automatically / jump /duck/ functions     -  
 Slide UP-Down Chaining     -  
 slide down using JQuery     -  
 image slide show     -  
 java slide not comming up     -  
 html slide show images     -  
 Speed Painting     -  
 calculate speed of a car in javaCV     -  
 Control scroll speed using JQuery     -  

Topic Tags

JQuery Slide