[RESOLVED] Scrolling without scrollbars? [Archive] - HTML Forums

View Full Version : [RESOLVED] Scrolling without scrollbars?

sportsfanatic54

02-01-2008, 03:13 AM

I'm working on a page for a friend.. and what I'm trying to do is find a way to scroll this content section with arrow buttons, rather than with the typical scroll bar that you see now.

I've seen this on sites before but was unsuccessful finding the solution via searching google.

Any help would be greatly appreciated! Thanks :-)

http://www.pzfantasyfootball.com/franchisetesting/

ktorrepalma

02-01-2008, 03:22 AM

hi sportsfanatic54,
I had read before a tutorial about that at this address http://www.webdevelopersnotes.com/tips/html/transparent_hidden_scrollbar_code.php3
maybe you can try this. see if it helps.

sportsfanatic54

02-01-2008, 03:25 AM

Thanks for the article... but not quite what I'm looking for. What I want is a way to put two arrows underneath the content... one pointing up, one pointing down... and as you click them the content will scroll in whichever direction you clicked.

rangana

02-01-2008, 03:38 AM

Hi sportsfanatic54,
I once saw that trick on dynamic drive (http://www.dynamicdrive.com/dynamicindex2/pagescroller.htm)!

sportsfanatic54

02-01-2008, 03:58 AM

its nice... but it seems to only focus on the main scroll bar and not inner scroll bars like the one I need....

check the page out... I've set up the buttons... but scrolling over them does nothing, and clicking them brings up some sort of error screen...

coothead

02-01-2008, 04:03 AM

Hi there sportsfanatic54,

you can see an example here...
http://mysite.orange.co.uk/azygous/scrolling_box.html
...and the code here...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>scroll up and down</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#eef;
color:#006;
margin-top:30px;
}
#container {
width:488px;
border-top:8px solid #889;
border-right:8px solid #dde;
border-bottom:8px solid #dde;
border-left:8px solid #889;
margin:auto;
}
#box {
width:486px;
border:1px solid #003;
background-image:url(images/cloud.gif);
overflow:auto;
height:300px;
}
#content {
margin:30px;
background-color:inherit;
font-family:verdana,arial,helvetica,sans-serif;
font-size:1em;
color:#336;
text-align:justify;
}
#butts {
width:504px;
margin:auto;
}
.hide{
display:none;
}
#arrow_up,#arrow_dn {
width:30px;
height:25px;
float:right;
margin:15px 8px;
}
#arrow_up {
background-image:url(images/arrow_up.gif);
}
#arrow_dn {
background-image:url(images/arrow_dn.gif);
}
</style>

<script type="text/javascript">

var mar=30; //this is the 'content' margin
var bw=2; // this is the 'box' border-width x 2
var up;
var down;

window.onload=function() {
document.getElementById('box').style.overflow="hidden";
document.getElementById('butts').className='';
bh=document.getElementById('box').offsetHeight-(mar+bw);
obj=document.getElementById('content');
ch=obj.offsetHeight;

document.getElementById('arrow_up').onmouseover=function() {
goUp();
}
document.getElementById('arrow_up').onmouseout=function() {
clearTimeout(up);
return;
}
document.getElementById('arrow_dn').onmouseover=function() {
goDown();
}
document.getElementById('arrow_dn').onmouseout=function() {
clearTimeout(down);
return;
}
}

function goUp() {
clearTimeout(down);
obj.style.marginTop=mar +'px'
mar--;
if(mar+ch<=bh) {
mar=bh-ch;
clearTimeout(up);
return;
}
up=setTimeout('goUp()',20);
}

function goDown() {
clearTimeout(up);
obj.style.marginTop=mar +'px'
mar++;
if(mar>=20){
mar=20;
clearTimeout(down);
return;
}
down=setTimeout('goDown()',20);
}
</script>

</head>
<body>

<div id="container">

<div id="box">
<p id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
Quisque nec enim. Nullam elementum. Quisque rhoncus. Ut cursus, pede sit amet facilisis pretium,
est erat congue tortor, eget tincidunt metus augue in mauris. Sed id pede. Nam varius faucibus massa.
In orci. Suspendisse metus nunc, egestas non, porta a, fermentum interdum, mi. Nulla vel tellus nec
erat consectetuer molestie. Vivamus turpis erat, rhoncus sed, ornare vel, volutpat sagittis, nibh.
Nulla libero. Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut id mauris eget felis laoreet
semper. Maecenas venenatis erat et orci. Aenean interdum ligula sed nisi. Nulla vel lectus eu dolor porttitor
tempus. Proin at nisi fringilla pede feugiat luctus. Aenean id risus. Vestibulum a erat ac ipsum fringilla
feugiat. Cras mauris.
</p>
</div>

</div>

<div id="butts" class="hide">
<span id="arrow_up"></span>
<span id="arrow_dn"></span>
</div>

</body>
</html>

sportsfanatic54

02-01-2008, 04:28 AM

awesome... something went wrong in my attempt to convert it to my layout... what did I mess up? lol

Also.. is there anyway to make it more like a scrollbar in that the user clicks it to scroll? I can see how some users may see the scrolling as too slow at times.

<!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>Franchise Page</title>

<style type="text/css">

* html {
margin:0;
padding: 0;
}

body {
background: url(sbtc_background.gif);
font-family: calibri, trebuchet ms, arial, verdana;
color: #000;
margin: 0;
padding: 0;
}

#wrap {
width: 800px;
height: 600px;
margin: 0 auto;
text-align: center;
}

#leftsidewrap {
width: 248px;
height: 100%;
float: left;
}

#logo {
background: url(franchise_01.gif) no-repeat;
width: 100%;
height: 162px;
}

#navigation {
background: url(franchise_04.gif) no-repeat;
width: 100%;
height: 192px;
}

#fadedimage {
background: url(franchise_05.gif) no-repeat;
width: 100%;
height: 246px;
}

#rightsidewrap {
width: 552px;
height: 100%;
float: left;
}

#header {
background: url(franchise_02.gif) no-repeat;
width: 100%;
height: 51px;
}

#content {
background: url(franchise_03.gif) no-repeat;
width: 100%;
height: 549px;
position: relative;
}

#content-text {
width: 465px;
height: 485px;
position: absolute;
top: 20px;
left: 50px;
font-size: 12px;
overflow: auto;
text-align: justify;
}

#arrow_up {
background-image:url(arrowup.gif);
width: 40px;
height: 40px;
position: absolute;
bottom: 1px;
left: 250px;
}
#arrow_dn {
background-image:url(arrowdown.gif);
width: 40px;
height: 40px;
position: absolute;
bottom: 1px;
left: 290px;
}
</style>

</head>

<script type="text/javascript">

var mar=30; //this is the 'content' margin
var bw=2; // this is the 'box' border-width x 2
var up;
var down;

window.onload=function() {
document.getElementById('content-text').style.overflow="hidden";
document.getElementById('butts').className='';
bh=document.getElementById('box').offsetHeight-(mar+bw);
obj=document.getElementById('content');
ch=obj.offsetHeight;

document.getElementById('arrow_up').onmouseover=function() {
goUp();
}
document.getElementById('arrow_up').onmouseout=function() {
clearTimeout(up);
return;
}
document.getElementById('arrow_dn').onmouseover=function() {
goDown();
}
document.getElementById('arrow_dn').onmouseout=function() {
clearTimeout(down);
return;
}
}

function goUp() {
clearTimeout(down);
obj.style.marginTop=mar +'px'
mar--;
if(mar+ch<=bh) {
mar=bh-ch;
clearTimeout(up);
return;
}
up=setTimeout('goUp()',20);
}

function goDown() {
clearTimeout(up);
obj.style.marginTop=mar +'px'
mar++;
if(mar>=20){
mar=20;
clearTimeout(down);
return;
}
down=setTimeout('goDown()',20);
}
</script>

<body>

<div id="wrap">

<div id="leftsidewrap">

<div id="logo"></div>

<div id="navigation"></div>

<div id="fadedimage"></div>
</div>

<div id="rightsidewrap">

<div id="header"></div>

<div id="content">
<div id="content-text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

<p />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

<p />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum

<p />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum
</div>

<div id="scrollingarrows">
<div id="arrow_up"></div>
<div id="arrow_dn"></div>
</div>
</div>
</div>

</div>

</body>

</html>

coothead

02-01-2008, 08:27 AM

Hi there sportsfanatic54,

try it like this...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Franchise Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* html {
margin:0;
padding:0;
}
body {
background:url(sbtc_background.gif);
font-family:calibri,'trebuchet ms',arial,verdana,sans-serif;
color: #000;
}
#wrap {
width:800px;
height:600px;
margin:auto;
text-align: center;
}
#leftsidewrap {
width:248px;
height:100%;
float:left;
}
#logo {
background:url(franchise_01.gif) no-repeat;
width:100%;
height:162px;
}
#navigation {
background:url(franchise_04.gif) no-repeat;
width:100%;
height:192px;
}
#fadedimage {
background:url(franchise_05.gif) no-repeat;
width:100%;
height:246px;
}
#rightsidewrap {
width:552px;
height:100%;
float:left;
}
#header {
background:url(franchise_02.gif) no-repeat;
width:100%;
height:51px;
}
#container {
width:488px;
margin:auto;
}
#content {
background:url(franchise_03.gif) no-repeat;
width:486px;
height:549px;
overflow:auto;
}
#content-text {
padding:5px;
font-size:12px;
text-align:justify;
margin:20px 0 0 50px;
}
#arrow_up {
background-image:url(arrowup.gif);
width:40px;
height:40px;
position:absolute;
bottom:1px;
left:250px;
cursor:pointer;
}
#arrow_dn {
background-image:url(arrowdown.gif);
width:40px;
height:40px;
position:absolute;
bottom:1px;
left:290px;
cursor:pointer;
}

/**********this is required for users that do not have javascript enabled**********/

.hide {
display:none;
}

/**********************************************************************************/

</style>

<script type="text/javascript">

var bh,obj,ch;
var mar=20; //this is the 'content-text' margin
var bw=0; // this is the 'content' border-width x 2
var up;
var down;

window.onload=function() {
document.getElementById('content').style.overflow="hidden";
document.getElementById('scrollingarrows').className='';
bh=document.getElementById('content').offsetHeight-(mar+bw);
obj=document.getElementById('content-text');
ch=obj.offsetHeight;

document.getElementById('arrow_up').onmouseover=function() {
goUp();
}
document.getElementById('arrow_up').onmouseout=function() {
clearTimeout(up);
return;
}
document.getElementById('arrow_dn').onmouseover=function() {
goDown();
}
document.getElementById('arrow_dn').onmouseout=function() {
clearTimeout(down);
return;
}
}

function goUp() {
clearTimeout(down);
obj.style.marginTop=mar +'px'
mar-=8;
if(mar+ch<=bh) {
mar=bh-ch;
clearTimeout(up);
return;
}
up=setTimeout('goUp()',20);
}

function goDown() {
clearTimeout(up);
obj.style.marginTop=mar +'px'
mar+=8;
if(mar>=20){
mar=20;
clearTimeout(down);
return;
}
down=setTimeout('goDown()',20);
}
</script>

</head>
<body>

<div id="wrap">

<div id="leftsidewrap">

<div id="logo"></div>
<div id="navigation"></div>
<div id="fadedimage"></div>

</div>

<div id="rightsidewrap">
<div id="header"></div>

<div id="container">
<div id="content">
<div id="content-text">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.
</p><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque
adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam
libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor
cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum
pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque
in dui. In eget elit. Praesent eu lorem.
</p>
</div>
</div>
</div>
</div>

<div id="scrollingarrows" class="hide">
<div id="arrow_up"></div>
<div id="arrow_dn"></div>
</div>

</div>

</body>
</html>

sportsfanatic54

02-01-2008, 01:17 PM

still didn't work out too well in firefox... idk why... but just found out that the guy I'm helping is using flash for the content so he'll have his own scrollbars anyways...

thanks for all the help coothead, sorry about this. :-)

Mortar

02-01-2008, 02:41 PM

Wow, that 'scroll up and down' page is pretty nice.

jaketone

02-06-2008, 02:33 PM

Using this same method, how can you increase the speed at which it is scolled?

coothead

02-06-2008, 05:00 PM

Hi there jaketone,
....how can you increase the speed at which it is scolled?
This can be achieved by increasing the highlighted values...

function goUp() {
clearTimeout(down);
obj.style.marginTop=mar +'px'
mar-=8;
if(mar+ch<=bh) {
mar=bh-ch;
clearTimeout(up);
return;
}
up=setTimeout('goUp()',20);
}

function goDown() {
clearTimeout(up);
obj.style.marginTop=mar +'px'
mar+=8;
if(mar>=20){
mar=20;
clearTimeout(down);
return;
}
down=setTimeout('goDown()',20);
}

jaketone

02-07-2008, 11:28 AM

oh ok thanks. I thought it was the setTimeout(20)

jaketone

02-12-2008, 02:11 PM

Ok, Coothead your javascript scrollbars seem to be the only working script I can find. I think it's great but I'm having troubles getting it to work correctly and I'm not sure what is throwing it off.

I added it to my site here: http://www.capcoa.org/climatechange/ to the box called, "Upcoming Events". If you hover over the UP/DOWN arrows, you will see what I'm talking about. I'm trying to figure it out so I can implement it into another box on this same page but it's frusterating me! Haha.

I copied your code and eliminated most of the text and it looks as though the problem is if there is not enough text. Here's you're code replicated only with less text. http://www.capcoa.org/climatechange/test.php