Total members 11871 |It is currently Mon Oct 03, 2022 12:26 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  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     -  
 java slide not comming up     -  
 image slide show     -  
 html slide show images     -  
 Speed Painting     -  
 calculate speed of a car in javaCV     -  
 Control scroll speed using JQuery     -  



Topic Tags

JQuery Slide
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com