manual scroller with scroll bar

**mcpalmer** · 04-25-2005, 05:06 PM

I'm trying to get the manual scroller script to work alongside a visible scrollbar but the bar does not function properly when moving content up and down. You can see what i mean here:

http://www.mrpdev.co.uk/scrolltest.htm

Anyone got any ideas?

**jscheuer1** · 04-27-2005, 10:22 PM

I thought this couldn't be done until I was looking into another scrolled content question and it more or less happened. Now with some refinemets, it is a two page solution using an iframe, here is the iframe page:

HTML Code:

<html>
<head>
<title>Manual Scroller w/scrollbar - Demo</title>
<script type="text/javascript">
var holder,scrollspeed
</script>
<style type="text/css">
span.cntrl {
cursor:hand;
cursor:pointer;
color:blue;
text-decoration:underline
}
</style>
</head>
<body>
<!--Scrollable iframe script- By Dynamic Drive-->
<!--For full source code and more DHTML scripts, visit http://www.dynamicdrive.com-->
<!--Highly modified here-->
<!--This credit MUST stay intact for use-->

<layer visibility=hide>
<div style="width:200px;margin-bottom:3px;text-align:center;cursor:default">
<span class="cntrl" onClick="scrollspeed=1">Down</span> <b>|</b> <span class="cntrl" onClick="scrollspeed=-1">Up</span> <b>|</b> <span class="cntrl" onClick="scrollspeed=0">Stop</span> <b>|</b> <span class="cntrl" onClick="scrollspeed=0;window['datamain'].location.replace('external.htm')">Top</span>
</div>
</layer>
<iframe onMouseOver="holder=scrollspeed;scrollspeed=0" onMouseOut="scrollspeed=holder" id="datamain" width=200 height=150 src="external.htm"></iframe>
</body>
</html>

and here is the external.htm file used by it:

HTML Code:

<!-- external.htm source-->
<html>
<body>


<div>
<!-- ADD YOUR SCROLLER CONTENT INSIDE HERE -->

<b>What's Hot</b></p>
<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex9/encrypter.htm" target="_top">Source
code encrypter</a>&nbsp;</small></font></strong><br>
<font face="Verdana" size="2">Scramble the source of any chunk of code using
this unique script.</font></p>
<p align="left"><strong><font face="Verdana"><small><a href="http://www.dynamicdrive.com/dynamicindex5/flashlink.htm" target="_top">Flashing
links</a>&nbsp;</small></font></strong><br>
<font face="Verdana"><small>Bring attention to special links, by making them
flash!</small></font></p>
<p align="left"><small><strong><font face="Verdana"><a href="http://www.dynamicdrive.com/dynamicindex13/roamcursor.htm" target="_top">Roaming
Cursor</a>&nbsp;</font></strong></small><br>
<small><font face="Verdana">Display a second, &quot;roaming&quot; cursor on your
page with this fun animation script.</font></small></p>
<p align="left"><font face="Verdana"><strong><a href="http://www.dynamicdrive.com/dynamicindex11/animatedtitle.htm" target="_top"><small>Animated
Document title</small></a><br>
</strong><small>Animate into view your document's title!</small></font>

<!-- END SCROLLER CONTENT -->

</div>

<!--DO NOT REMOVE BELOW SCRIPT. IT SHOULD ALWAYS APPEAR AT THE VERY END OF YOUR CONTENT-->

<script type="text/javascript">

//Scrollable content III- By http://www.dynamicdrive.com
//Modified here

var speed

function initialize(){
if (window.parent.scrollspeed!=0){
speed=window.parent.scrollspeed
scrollwindow()
}
}

function scrollwindow(){
window.scrollBy(0,speed)
}

setInterval("initialize()",10)

</script>

</body>
</html>

Some behaviors of these two pages will be easy to modify others will take more work, if you need a modification and can't figure it out, let me know.

**alexz** · 07-21-2005, 03:29 PM

How can i make the scroller move up or down on start and without the user clicking
up or down? Also how can add the auto pause?

**jscheuer1** · 07-21-2005, 06:28 PM

Put this on the top (the one with the iframe on it) page:

Code:

<body onload="scrollspeed=1">

It already pauses onmouseover of the scrolling content. What did you mean by auto pause?

**alexz** · 07-21-2005, 07:08 PM

Originally Posted by jscheuer1

Put this on the top (the one with the iframe on it) page:

Code:

<body onload="scrollspeed=1">

It already pauses onmouseover of the scrolling content. What did you mean by auto pause?

I actually don't need the IFRAME page. I just wanted to enable auto scroll
and the pause onMouseover in the manualscroll script.

http://www.dynamicdrive.com/dynamici...nualscroll.htm

Thanks. I will implement the IFrame for something else now that i can make it autoscroll.