I wrote a sliding list for a project.
Here it is:
http://study-wise.appspot.com/test/left_right.html
I have been wondering, is there a better way to do this?
Like something built-in to jquery-ui
Thanks
I’m wondering for learning purposes and also, if there isn’t I’d like to post it somewhere so it could be used.
<html>
<head>
<title>
test
</title>
CSS
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
a.move {
z-index: 2;
position: absolute;
height: 28px;
width: 28px;
display: inline-block;
border: 1px #aaa solid;
border-radius: 5px;
background-color: white;
text-align: center;
text-decoration: none;
color: black;
}
a.move:hover {
background-color: #aaa;
}
a.move.left {
top: 0;
left: 0;
}
a.move.right {
top: 0;
left: 370px;
}
ul#shifting li {
display: inline-block;
height: 30px;
width: 335px;
border-right: 1px #aaa solid;
margin-left: 35px;
}
div.slidingList_outer{
z-index: 1;
position: relative;
width: 741px;
height: 30px;
border: 4px #24a solid;
overflow: hidden;
}
div.slidingList_inner{
position: relative;
width: 1200px;
height: 30px;
}
</style>
JQUERY
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var current = 0;
var total = 0;
var wait = 0;
var width = 335;
var margin = 35;
function next(){
if(wait || current == total - 1) return;
wait=1;
$('li:eq(' + (current + 2) + ')').show();
$('li:eq(' + (current + 0) + ')').animate({
marginLeft: "-" + (width) + "px"
}, 1000, function(){update(+1);});
}
function prev(){
if(wait || current == 0) return;
wait=1;
$('li:eq(' + (current - 1) + ')').css({marginLeft: "-" + (width) + "px"}).show().animate({
marginLeft: "" + (margin) + "px"
}, 1000, function(){update(-1);});
}
function update(delta){
if(delta == 1){
$('li:eq(' + (current + 0) + ')').hide();
$('li:eq(' + (current + 0) + ')').css({marginLeft: "" + (margin) + "px"});
} else if(delta == -1){
$('li:eq(' + (current + 1) + ')').hide();
}
current+=delta;
wait=0;
$('p').text('current: ' + current);
}
function init(){
total = $('li').size();
$('ul').append('<li>End of lecture</li>');
$('li').hide();
$('li:eq(' + (current + 0) + ')').show();
$('li:eq(' + (current + 1) + ')').show();
}
$(function(){
init();
/*bind events*/
$('a.move.left').click(function(e){
e.preventDefault();
prev();
});
$('a.move.right').click(function(e){
e.preventDefault();
next();
});
});
</script>
</head>
HTML
<body>
<p> ... </p>
<div class="slidingList_outer">
<div class="slidingList_inner">
<a class="move left" href="a"><</a><a class="move right" href="b">></a>
<ul id="shifting">
<li>123</li><!--
--><li>456</li><!--
--><li>789</li><!--
--><li>abc</li><!--
--><li>edf</li><!--
--><li>ghj</li><!--
--><li>!@#</li><!--
--><li>$%^</li><!--
--><li>ABC</li>
</ul>
</div>
</div>
</body>
</html>
I would suggest jQuery Tools Scrollable if it does what you want.