1

i created a div made it scrollable with <p>text</p> as seen below:
the code has 2 scrollable buttons that change color once they scrolled all the way to the end.

    <!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">
<head>
<title></title>
<style rel="stylesheet" type="text/css">
#scroller
{
border: 1px solid black;
height: 80px;
width: 400px;
overflow-y: hidden;
overflow-x: hidden;
}
a
{
display:block;
padding:10px;
background-color:red;
width:25px;
position:relative;
top:20px;
}
div
{
float:left;
}
#type
{
position:absolute;
top: 100px;
left: 250px
}
#left
{
background-color:blue;
}
</style>
<script type="text/javascript">
var PixelPerInterval = 1;
var stop = false;
var t;
var scroll_width;
function scroll_left()
{
document.getElementById('right').style.backgroundColor='red';
document.getElementById('scroller').scrollLeft-=PixelPerInterval;
if(!stop)
t = setTimeout("scroll_left()",10);
else
stop = false;
scrX = document.getElementById('scroller').scrollLeft;
divwidth=document.getElementById('scroller').clientWidth;
pwidth=document.getElementById('cont').clientWidth;
type.innerHTML = scrX;
if ((scrX) <= 0)
//type.innerHTML = scrX + ' left';
document.getElementById('left').style.backgroundColor='blue';
}
function scroll_right()
{
document.getElementById('left').style.backgroundColor='red';
document.getElementById('scroller').scrollLeft+=PixelPerInterval;
if(!stop)
t = setTimeout("scroll_right()",10);
else
stop = false;
scrX = document.getElementById('scroller').scrollLeft;
divwidth=document.getElementById('scroller').clientWidth;
pwidth=document.getElementById('cont').clientWidth;
type.innerHTML = scrX;
if ((divwidth+scrX) >= pwidth)
//type.innerHTML = scrX + ' right';
document.getElementById('right').style.backgroundColor='blue';
}
function stop_scroll() {
stop = true;
}
</script>
</head>
<body>
<div><a id="left" onmouseover="scroll_left();" onmouseout="stop_scroll();" href="#">Left</a></div>
<div id="scroller">
<p id="cont" style="width:700px;">
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
alot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of textalot of text<br/>
</p>
</div>
<div><a id="right" onmouseover="scroll_right();" onmouseout="stop_scroll();" href="#">Right</a></div>
<p id="type">asd</p>
</body>


when adding pictures they won't overflow to the right and only down. thanks alot for the help.

2
  • What speaks against creating a scrollable div only with css? Commented Mar 10, 2011 at 12:55
  • Isn't that using CSS3? <br/> i can't use CSS3 and if it isn't in css3 then i have no idea how to scroll using css
    – Chen
    Commented Mar 10, 2011 at 13:07

1 Answer 1

1

This is an answer related to your comment of doing it purely in CSS, it's NOT CSS 3, just CSS 2.1 Here you go:

HTML:

<div id="wrapper">
    <div id="container">
        <img src="http://whatscookingmexico.com/wp-content/uploads/2007/09/pear1.jpg" alt="" />
        <img src="http://whatscookingmexico.com/wp-content/uploads/2007/09/pear1.jpg" alt="" />
        <img src="http://whatscookingmexico.com/wp-content/uploads/2007/09/pear1.jpg" alt="" />
    </div>
</div>

CSS:

#wrapper {
    width: 200px;
    border: 1px solid #333;
    overflow: auto;
}

#container {
    white-space: nowrap;
}

Working example: http://jsfiddle.net/pdJ6r/2/

2
  • Thank you verry much. :) (btw the js i use is only for the scroll bar, i thought u ment also auto scroll using css).
    – Chen
    Commented Mar 10, 2011 at 13:26
  • indead CSS cannot do any autoscroll. But perhaps a little JS that once every so many milliseconds changes the negative margin #container could be enough to make that happen. Do change #wrapper overflow: auto; into overflow: hidden then. So the scrollbar doesn't show. Here is a link: jsfiddle.net/pdJ6r/4 Change the negative margin on #container to see it shift to the left. If you change this by JS, it looks like it is autoscrolling.
    – Bazzz
    Commented Mar 10, 2011 at 13:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.