I am currently working on creating a vertical scroller and have got so far but have got stuck on some of the functionality
My HTML looks like this
div class="outer">
<div class="slider-content clearfix">
<ul>
<li><img src="images/img1.jpg" width="200" height="200" alt="img1"></li>
<li><img src="images/img2.jpg" width="210" height="200" alt="img2"></li>
<li><img src="images/img3.jpg" width="220" height="210" alt="img3"></li>
<li><img src="images/img4.jpg" width="210" height="200" alt="img4"></li>
<li><img src="images/img5.jpg" width="200" height="200" alt="img5"></li>
<li><img src="images/img6.jpg" width="210" height="200" alt="img6"></li>
<li><img src="images/img7.jpg" width="220" height="153" alt="img7"></li>
<li><img src="images/img8.jpg" width="200" height="200" alt="img8"l></li>
<li><img src="images/img9.jpg" width="200" height="200" alt="img9"></li>
<li><img src="images/img10.jpg" width="200" height="200" alt="img10"></li>
<li><img src="images/img11.jpg" width="200" height="200" alt="img11"></li>
<li><img src="images/img12.jpg" width="200" height="200" alt="img12"></li>
<li><img src="images/img13.jpg" width="220" height="210" alt="img13"></li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="script.js"></script>
My CSS is as follows
*{margin:0px;padding:0px;}
li{list-style:none;float:left;height:200px;width:200px;}
.clearfix { overflow: hidden; display: inline-block; }
.clearfix { display: block; }
.outer{margin:45px auto;position:relative;height:500px;width:515px;border:1px solid #333;overflow:hidden;}
.slider-content{position:absolute;top:0px;left:0px;}
.top-hover, .bottom-hover{width:515px;height:50px;background:#ccc;}
.top-hover{position:absolute;top:0px;z-index:500;}
.bottom-hover{position:absolute;bottom:0px;}
and finally my js
$(function(){
$('.outer').prepend('<div class="top-hover"></div>');
$('.slider-content').after('<div class="bottom-hover"></div>');
//Get height of outer container and slider
var outerHeight = $('div.outer').height();
var contentHeight = $('div.slider-content').height();
// Calculate cut off point of displayed contents
var contentExcess = contentHeight - outerHeight;
//store end point of scroll
var maxTopScroll = 0 - contentExcess
var speed = 45;
var hovered = false;
//Hover over top div
$('div.top-hover').hover(
function(){
//Get the position of the slider content div and store in sliderPositionTop
var sliderPositionTop = $('.slider-content').position().top;
// if slider position is less than 0 animate down
if(sliderPositionTop < 0){
// alert(sliderPositionTop);
$('.slider-content').animate({
top: sliderPositionTop + speed
});
} else {
//If slider is greater than 0 stop animation
if(sliderPositionTop > 0){
$('div.top-hover').stop();
$('.slider-content').css('top', '0px');
}
alert('No movement');
}
},
function(){
return false;
});
//Hover over bottom div
$('div.bottom-hover').hover(
function(){
//Get the position of the slider content div and store in sliderPositionBottom
var sliderPositionBottom = $('.slider-content').position().top;
// If slider is less / equal to 0 then animate slider
if(sliderPositionBottom <= 0){
// alert(sliderPositionBottom);
$('.slider-content').animate({
top: sliderPositionBottom - speed
});
} else {
//If scroll reaches max then stop
alert('No movement');
}
},
function(){
return false;
}
);
});
Currently the scroller moves up and down when you hover over the top and bottom buttons however you have to keep moving in and out of the hover area in order to get the scroller to move
My question is how can you make it so that it will do a continous scroll of the scroll-content div
Also currently the script has no way to limit the end of the scroll-content div and I cant seem to get it to stop once it gets to the bottom of this div
Any ideas are grateful
Cheers