PDA

View Full Version : scroll without click



db2six9
Mar 5th, 2007, 05:38 AM
I am pretty sure this acheived with Java;

I would like to have a pannel of thumbnails on the bottom of my screen which viewers can scroll thru. I would like to have all the tumbnails on one row across the bottom of the screen, and when the viewer scrolls to the end of the screen the rest of the thumnails will appear. This is basically the same effect as the user clicking on the right arrow of a horizontal scroll bar, but I dont want a scroll bar to be visable and I dont want the user to have to click.

Any suggestions? Thanks

chump2877
Mar 5th, 2007, 09:53 AM
Are you looking for something like this?:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">

<head>

<title>scroll without scrollbars</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

#container
{
margin:250px auto 0 auto;
width:850px;
background-color:#eee;
}

#myDiv
{
width:720px;
height:200px;
padding:15px;
background-color:#eee;
overflow:auto;
float:left;
}

#myDiv p
{
width:2000px;
}

#scroll-left,#scroll-right
{
width:50px;
height:230px;
background-color:#333;
font:bold 18px Impact,Arial;
color:#fff;
}

#scroll-left
{
float:left;
}

#scroll-right
{
float:right;
}

.box
{
margin:90px auto 0 auto;
width:40px;
height:50px;
background-color:#aaa;
cursor:default;
}

.box p
{
padding:15px 0 0 10px;
}

</style>

</head>

<body>

<div id="container">
<div id="scroll-left">
<div class="box" onmouseover="scrollIt('myDiv',1);" onmouseout="stopScroll('myDiv');">
<p><--</p>
</div>
</div>
<div id="myDiv">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
</div>
<div id="scroll-right">
<div class="box" onmouseover="scrollIt('myDiv',2);" onmouseout="stopScroll('myDiv');">
<p>--></p>
</div>
</div>
<div style="clear:both"></div>
</div>

<script type="text/javascript">

//If JS is enabled, eliminate scroll bar
document.getElementById('myDiv').style.overflow = "hidden";

var timer;
var speed = 5; // Change this number to affect scroll speed

function scrollIt(id,dir)
{
var divObj = document.getElementById(id);

if (dir == 1)
{
divObj.scrollLeft -= speed;
timer = setTimeout('scrollIt("'+id+'",1)',1);
}
else if (dir == 2)
{
divObj.scrollLeft += speed;
timer = setTimeout('scrollIt("'+id+'",2)',1);
}
}

function stopScroll()
{
if (timer)
clearTimeout(timer);
}

</script>

</body>

</html>

db2six9
Mar 6th, 2007, 02:40 AM
thats pretty much what I was looking for. Thanks. I am going to play with it a bit. If I have any issues I will post on this thread. Great bit of code!

Thanks again.