Recently, I created a sliding list for one of my projects. If you want to see it in action, check it out here.
However, I have been thinking lately if there is a more efficient way to achieve the same result. Maybe something already available in jquery-ui library. Let me know what you think. My main goal is to learn and improve my skills. If there isn't an existing solution, I plan to share this code so others can benefit from it.
<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;
...
</style>
JQUERY
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
...
function init(){
...
}
$(function(){
...
});
&...
</head>
HTML
<body>
<p> ... </p>
<div class="slidingList_outer">
...
</div>
</body>
</html>