Horizontal Div Slider

kamaro

01-25-2012, 12:50 AM

I'm trying to make a div slider go left to right. In as much detail this is what I would like: -The div to be hidden on first page load -Have the div slide left to right AND BACK by the click of an image NOT a button -When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa)

Here's what I got so far. (Don't need to use)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>

<style>

.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>

</head>

<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>

<body>
</body>
</html>

tom.a

01-25-2012, 03:44 AM

<html>
<head>
<style>
#first{
background: red;
width: 300px;
height: 300px;
float: left;
position: absolute;
}
#second{
background: blue;
width: 300px;
height: 300px;
left: 300px;
position: absolute;
float: left;
}
#sliderWrapper{
position: fixed;
width: 300px;
height: 300px;
overflow: hidden;
}
#innerWrapper{
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
var left = true, right = true;
$('.arrowleft').click(function() {
if(left){
$('#innerWrapper').animate({
left: '-=300px',
}, 1000);
left = false, right = true;
}
});
$('.arrowright').click(function() {
if(right){
$('#innerWrapper').animate({
left: '+=300px',
}, 1000);
right = false, left = true;
}
});
});

</script>
</head>
<body>

<a class="arrowleft" href="#">Left</a>
<a class="arrowright" href="#">Right</a>

<div id="sliderWrapper">
<div id="innerWrapper">
<div id="first">First</div>
<div id="second">Second</div>
</div>
</div>

</body>
</html>

You can replace the anchor elements with <img/> for the arrow images providing you keep the class attribute.

I'm also not sure if this is the best way to accomplish it.

kamaro

01-25-2012, 03:55 AM

Is there anyway to open and close one the same link/img rather than having two links