<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Scroll a Div - codesstore.blogspot.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
#buttons{
width:500px;
}
#right{
float:right;
}
#scrollable{
width:500px;
overflow:hidden;
border :1px solid #ccc;
}
#content{
width:1500px;
text-align:justify;
padding:10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#left').click(function(){
$('#scrollable').animate({scrollLeft : '-=100'});
});
$('#right').click(function(){
$('#scrollable').animate({scrollLeft : '+=100'});
});
});
</script>
</head>
<body>
<div id="buttons">
<input type="button" id="left" value="<" />
<input type="button" id="right" value=">" />
</div>
<div id="scrollable">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec neque vitae nibh volutpat ultricies vel ut dolor. Proin tempus ornare ipsum; in consequat sem rhoncus ac. Duis erat purus, porta nec arcu id, dapibus molestie magna. Cras sed velit vitae arcu sagittis iaculis. Morbi nibh ligula, vestibulum in cursus nec; vestibulum vel lacus. Morbi eu neque eget libero bibendum malesuada. Sed iaculis facilisis nisi vel euismod. Maecenas semper adipiscing sagittis? Integer scelerisque felis ullamcorper, viverra quam nec, euismod leo.
Vivamus condimentum egestas risus; quis commodo lacus dictum nec. . Sed varius accumsan nulla, nec varius enim aliquam id. Aenean nunc massa, elementum in congue ut, rhoncus eu leo. Aenean convallis at metus a euismod. Nulla nunc magna, ultrices sed hendrerit eu, ullamcorper sit amet tortor.
</p>
</div>
</div>
</body>
</html>
DemoClick arrow buttons to scroll .
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nec neque vitae nibh volutpat ultricies vel ut dolor. Proin tempus ornare ipsum; in consequat sem rhoncus ac. Duis erat purus, porta nec arcu id, dapibus molestie magna. Cras sed velit vitae arcu sagittis iaculis. Morbi nibh ligula, vestibulum in cursus nec; vestibulum vel lacus. Morbi eu neque eget libero bibendum malesuada. Sed iaculis facilisis nisi vel euismod. Maecenas semper adipiscing sagittis? Integer scelerisque felis ullamcorper, viverra quam nec, euismod leo.
Vivamus condimentum egestas risus; quis commodo lacus dictum nec. . Sed varius accumsan nulla, nec varius enim aliquam id. Aenean nunc massa, elementum in congue ut, rhoncus eu leo. Aenean convallis at metus a euismod. Nulla nunc magna, ultrices sed hendrerit eu, ullamcorper sit amet tortor.
This comment has been removed by the author.
ReplyDeleteThanks! Is it possible, using your template, but with "scrollTop" function, to scroll down a set (a column) of divs (or table rows) of equal height, if these divs are placed inside the div id=content? I'm trying to make a test, some questions (one question in one div) that can be changed by pressing the button "next question". I wonder if the div id=content with the same height as divs with my questions will hide the rest of the questions showing only the current one. I'm a newbie in Java. Simply I don't wanna create additional pages and use links. I'd like to have all questions in one file.
ReplyDelete