Thumbnail scrolling using a Div and no Scrollbars 1

[iaresean]

Hi All;

I am developing my own custom image gallery module to use in my site. The thing is I want to create a scrollbar type effect on the bottom of the page containing all the thumbnails. The thumbnails all have the same height and varying widths.

I want to put all the images side by side in a horizontal fashion in a div with a set width. This I can do no problem, but if there are lots of images some remain hidden due to the set width of the div. I really don't want any scrollbars on this div as it is not in line with the design of my site.

I have created right and left click buttons, but need to attach code to these buttons to scroll through the div in a left or right fashion. Is this possible? I came across some javascript code that positions frames, but I would really like to keep my images in a div.

Can a javascript guru out there possibly point me in the right direction, give me some recommendations, or assist me in this matter?

Any and all help is GREATLY appreciated!

Sean.

 

[kaht]

I wrote this for fun - it should be pretty self explanatory of how to fix your problem. (hint: use scrollLeft)

<script type="text/javascript">

var a = 0;
var inc = true;

function blah() {
   (inc) ? a++ : a--;
   inc = (a == 100 || a == 0) ? !inc : inc;
   document.getElementById("myDiv").scrollLeft = a;
   window.setTimeout("blah()", 10);
}

window.onload = blah;

</script>

<style type="text/css">

div#myDiv {
   overflow:hidden;
   width:300px;
   height:300px;
   border:1px solid #000000;
}

</style>

<div id="myDiv">
<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eget tortor. Proin magna. Integer sed odio ut neque euismod ultrices. Cras vehicula. 
Vestibulum ultricies, diam eu molestie rutrum, diam metus lacinia mi, quis lacinia magna nunc eu pede. Maecenas libero. Nulla nibh odio, rutrum vitae, 
vehicula quis, aliquet at, eros. Duis rhoncus, dolor at mollis tincidunt, massa metus molestie velit, et convallis augue lorem sit amet augue. Donec 
condimentum. Sed aliquet nibh sed pede. Praesent nisl. Mauris ut tellus. Nullam condimentum rutrum nulla. Suspendisse id lectus a nulla pulvinar consequat.
In hac habitasse platea dictumst. Aliquam cursus auctor lectus. Maecenas congue facilisis ante. Morbi sollicitudin scelerisque nunc. Suspendisse non 
ante in urna mattis fringilla. Phasellus lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In felis 
velit, malesuada ut, dictum vitae, fermentum ac, eros. Praesent in ante. Vestibulum mauris. Sed quis mi. Donec bibendum, massa at scelerisque facilisis, 
purus justo vehicula diam, ut auctor ligula risus suscipit nisi. Donec id pede ac tellus iaculis eleifend. Integer faucibus luctus nibh.
Vivamus eu metus ut erat sagittis lacinia. Aenean quis nibh ac mauris posuere fermentum. Aliquam urna. Vivamus vitae eros. Pellentesque habitant morbi 
tristique senectus et netus et malesuada fames ac turpis egestas. Duis congue, justo vel accumsan semper, turpis justo rhoncus leo, id iaculis diam 
ipsum nec nisl. Pellentesque ultrices ultrices urna. Phasellus feugiat feugiat eros. Cras facilisis. Fusce ligula ligula, auctor sit amet, porttitor ut, 
sagittis quis, mi. Suspendisse pellentesque interdum lectus.
Sed mollis. Suspendisse potenti. Aenean ornare tempus orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse potenti. Mauris et 
justo. Vivamus tristique arcu id elit. Maecenas venenatis dictum felis. Donec tincidunt pulvinar magna. Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit.
Maecenas purus est, tristique eu, volutpat quis, faucibus nec, justo. Sed pulvinar lobortis dui. Aenean facilisis orci rhoncus augue. Lorem ipsum 
dolor sit amet, consectetuer adipiscing elit. Aliquam eu tortor in lacus porta feugiat. Duis ac dui. Vestibulum sodales diam in pede. Suspendisse mauris. 
Nunc semper consectetuer elit. Nunc blandit justo. Maecenas eget lectus eu metus blandit tincidunt. Etiam in quam.</pre>
</div>

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[iaresean]

Thanks for this code, it looks like exactly what i need.

Unfortunately, it is not working, because when my images are longer that the divs length they automatically get pushed to another line, instead of staying inline in a horizontal fashion. Since this is happening I there is nothing to scroll left or right to, I can only scroll up or down.

Does anyone know how I can force the images to stay in line horizontally? Or should I not be using divs but rather another html object?

Any and all help is greatly appreciated!

Sean.

 

[iaresean]

I figured it out myself. I put my images in a table with one row and then into the div, now it works 100% though.

I do have a final question though, is there a way I can get the length of the table/div containing all the images so that I can check how far the user can scroll too.

I noticed that when the user clicks the button and he is at the end of the images it takes a while for the browser to respond before he/she can click the left button again.

Also the response time seems pretty slow, the user can't click the left or right buttons very fast and has to wait untill each command is complete. Is there maybe a faster way to do the scrolling via javascript?

Thanks again for any and all help!

Sean.

 

[kaht]

Does anyone know how I can force the images to stay in line horizontally?

Did you apply the overflow:hidden; style to your div?

Is there maybe a faster way to do the scrolling via javascript?

You'll need to post the code for your page, or better yet a link so that we can experience the problem to give any suggestions.

-kaht

[small] <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]
[small](He's back)[/small]

 

[iaresean]

Hi Kaht;

Yes I did put overflow hidden, but using my table method I spoke about in an above post sorted the issue. It's fine, after doing some research on the net I eventually constructed my own little script (it took me quite a while though!) that seems to be working 100% fine.

Thanks for the help again.

Sean.