<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').mouseenter(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').mouseenter(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>
<style type="text/css">
#scroll {
width: 200px;
height: 200px;
overflow: hidden;
padding: 4px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="scroll">
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here<br /><br />
Content here and more content here
</div>
<a href="#" id="scroll-down">Down</a> - <a href="#" id="scroll-up">Up</a>
</body>
</html>In above code content inside div "scroll" is scrolled on mouse action- down or up.
But when I use while loop to repeat div "scroll" only first div scrolls text inside, next div's stops scrolling text. Records comes from database so I don't know how many times div will repeat.
How to make script work ?
How to scroll text in all div's?
How my div comes
while($row = mysql_fetch_assoc($result))
{
<div id="scroll"> Content here</div>
}