Simple problem [Archive] - Dynamic Drive Forums

riptide

06-11-2012, 10:50 PM

I really didn't want to make a thread but I couldn't find the answer else where. I'm using a script for a scrolling div.

scrollStep=4

timerLeft=""
timerRight=""

function toLeft(id){
document.getElementById(id).scrollLeft=0
}

function scrollDivLeft(id){
clearTimeout(timerRight)
document.getElementById(id).scrollLeft+=scrollStep
timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
}

function scrollDivRight(id){
clearTimeout(timerLeft)
document.getElementById(id).scrollLeft-=scrollStep
timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
}
function toRight(id){
document.getElementById(id).scrollLeft=document.getElementById(id).scrollWidth
}
function stopMe(){
clearTimeout(timerRight)
clearTimeout(timerLeft)

This function is connected to a div named scroll which has other divs in it.
the script came from.
http://www.javascriptsource.com/miscellaneous/scroll-div-horizontal.html#null

the CSS is

#scroller {
width:1000px;

1000px works but I wanted to change it to auto because the divs in the scroller may not take up that much space. And I don't want to be left with 500 or more px of space to the right of the content.

but the script doesn't work with width:auto. It does with width:100%
I was thinking that scrollWidth was not the right property. I can't prove either way right now.

Nothing from the scroller to the divs inside of it have any display property. Setting scroller with overflow to visible doesn't do anything either. I'm confused; I don't know if I need to edit the CSS or the JavaScript or both.

vwphillips

06-12-2012, 09:10 AM

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

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

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
border: solid red 1px;
}

#scroller {
width: 2128px; /* = a large number */
}

.content {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-right: 10px;
padding: 5px;
border: 1px solid #EFEFEF;
font-size: .8em;
}

.scrollNav, .scrollNav a:link, .scrollNav a:visited {
font-size: .8em;
color:#00009C;
font-weight: bold;
}

</style>
<script type="text/javascript">
/*<![CDATA[*/

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Mr J | http://www.huntingground.net/ */

scrollStep=1

timerLeft=""
timerRight=""

function toLeft(id){
document.getElementById(id).scrollLeft=0
}

function scrollsz(id){
var obj=document.getElementById(id).getElementsByTagName('DIV')[0],lst=obj.lastChild;
lst=lst.nodeType==1?lst:lst.previousSibling;
obj.style.width=lst.offsetLeft+lst.offsetWidth+'px';
scrollsz[id]=true;
}

function scrollDivLeft(id){
clearTimeout(timerRight);
var obj=document.getElementById(id);
if (!scrollsz[id]){
scrollsz(id);
}
obj.scrollLeft+=scrollStep
timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
}

function scrollDivRight(id){
clearTimeout(timerLeft)
document.getElementById(id).scrollLeft-=scrollStep
timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
}

function toRight(id){
var obj=document.getElementById(id);
if (!scrollsz[id]){
scrollsz(id);
}
obj.scrollLeft=document.getElementById(id).scrollWidth
}

function stopMe(){
clearTimeout(timerRight)
clearTimeout(timerLeft)
}

/*]]>*/
</script>

</head>

<body>

<span class="scrollNav">
<a href="#null" onclick="toLeft('container')">« first</a> |
<a href="#null" onmouseover="scrollDivLeft('container')" onmouseout="stopMe()">scroll left</a> |
<a href="#null" onmouseover="scrollDivRight('container')" onmouseout="stopMe()">scroll right</a> |
<a href="#null" onclick="toRight('container')">last »</a>
</span>

<br><br>

<div id="container">

<div id="scroller">

<div class="content" style="background-color:#8ECF8E;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris orci. Suspendisse aliquam, quam eu convallis pellentesque, felis velit blandit augue, vitae semper pede metus non nulla. Etiam eu eros in ligula euismod vestibulum. Aenean porttitor adipiscing metus.</div>

<div class="content" style="background-color:#FFFF00;">Phasellus tellus nisi, viverra non, fringilla eget, tristique sit amet,<img src="pic1.gif" style="width:40px;height:58px;float:left;margin:4px 5px 0px 0px"> felis. Vestibulum iaculis mauris non lectus. Suspendisse libero arcu, fermentum at, eleifend<img src="pic2.gif" style="width:40px;height:58px;float:right;margin:4px 0px 0px 10px"> non, fringilla eu, lectus. Mauris sit amet tortor. Proin accumsan mauris sit amet mauris.<br style="clear:both"></div>

<div class="content">Lorem ipsum dolor<p><img src="pic3.gif" width="200" height="150"></div>

<div class="content" style="background-color:#FFD700;">Sed vitae risus. Vivamus vitae augue et est aliquet malesuada. Vivamus sit amet dolor ac arcu posuere ullamcorper. Praesent faucibus augue sit amet quam. Integer viverra laoreet dui. Vestibulum semper odio auctor libero. Maecenas consectetuer, elit nec ornare luctus, diam odio feugiat felis, ut nonummy dolor sapien sed orci.</div>

<br style="clear:both">
</div>
</div>

</body>

</html>