PDA

Click to See Complete Forum and Search --> : Scroll text with buttons

ashley
10-27-2003, 10:52 AM
Hi all,
Someone showed me this site that has a table and in one of the table cells you can scroll the text up or down by clicking two buttons. I took a look at the code and have tried to find out how to do it online and in my javascript book. Needless to say, I can't find an explanation. Can someone please explain it or point me in the direction of a place where it is explained. The address is http://www.aka1908.com/aka/programs/overview.htm

Thanks in advance for your help.
cacalex
10-27-2003, 12:52 PM
Maybe this will help you ...

<html>
<body>
<!-- the first div has sets the size of the box, you can rezise it as you like, just make shure you have the same width in both of your divs -->
<div id="enclose" style="position: relative;width: 300; height: 100; overflow:hidden;" align=center>
<div id="crap" style="position: absolute; Left: 0px; Top: 0px; width: 300;">
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
Here you put everything you would like to have inside the "box"
</div>
</div>
<br>
<a href="#" onmouseover="upp()" onmouseout="clearTimeout(uppvar)" style="cursor: default;">/up\</a>&nbsp;<a href="#" onmouseover="ner()" onmouseout="clearTimeout(nervar)" style="cursor: default;">\down/</a>


<script language="Javascript">
// the names of the functions are swedish, upp
// means up and ner means down
// set the speed of the scrolling
// greater = faster
var speed=5;
var yta=document.getElementById("crap");
var hojd=yta.offsetHeight;


function upp(){


if(parseInt(yta.style.top)){
yta.style.top=parseInt(yta.style.top)+speed;
}
uppvar=setTimeout("upp()",100)
}


function ner(){


if(parseInt(yta.style.top)>=(hojd*(-1)+100)){
yta.style.top=parseInt(yta.style.top)-speed;
}
nervar=setTimeout("ner()",100)
}
</script>
</body>
</html>
tonyh
03-23-2004, 12:40 AM
I modified cacalex's code:
<span id="content">
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
<p>Your site content goes here.</p>
</span>
<a href="#" onmouseover="scrollUp('content')" onmouseout="clearTimeout(varUp)">Scroll Up</a>
<a href="#" onmouseover="scrollDown('content')" onmouseout="clearTimeout(varDown)">Scroll Down</a>

<script language="Javascript">

//var el = document.getElementById("content");
//var elOff = el.offsetHeight;

function scrollUp(strId) {
var el = document.getElementById(strId);

if (parseInt(el.style.top)) {
el.style.top = parseInt(el.style.top) + 5;
}
varUp = setTimeout("scrollUp(strId)",100);
}

function scrollDown(strId) {
var el = document.getElementById(strId);
var elOff = el.offsetHeight;

if (parseInt(el.style.top) >= (elOff*(-1))) {
el.style.top = parseInt(el.style.top) - 5;
}
varDown = setTimeout("scrollDown(strId)",100);
}
</script> What I am trying to do is make the functions reuseable by passing the id, rather than having several global variables like cacalex's. You may never know if you have more than one scrollable area.

The problem is it only scrolls like one px then stops and displays error on page. I'm pretty sure it's something simple, but it may just be that the variables must be global rather than local to continue the increment/decrement. If that's the case, would anyone have any suggestions?

And as a cross over into CSS, how would I align "ScrollUp" with the top and "ScrollDown" at the bottom of the <span>? The only thing I could get to work was "position: absolute; top: ?; left: ?;" but if the <span> should change height or width, the links would be out of place. Using relative placed them below the <span> rather than to the right where I want them. I tried a <div> within the <span> using text-align and vertical-align, but that didn't work either.

Oh, and I'm not sure if I'm using <span> properly. I've always been under the impression that you use <span> in place of <div> if it contains data (text and/or images). Right or wrong?

And finally, how would I set the overflow to auto rather than hidden if JS is disabled? Or check to see if JS is enabled to set the overflow to hidden from auto? Is it even possible to check JS's state?
tonyh
03-23-2004, 06:16 PM
I've realized that all that's necessary is to have overflow: auto as default and use onLoad to change overflow: hidden and make the scroll buttons (anchors) visible/active.

But I still haven't determined how to apply the above functions to multiple IDs. Or even further functionality as horizontal scrolling as well as vertical. I thought that maybe having a global HorPos and VertPos variables would work to maintain the scrolling position. But I realized if there were more than one scrolling area the global variables might conflict with each ID.

Here's an example of multiple scrolling areas: A Palview Dempage (http://www.enpassant.dk/chess/palview/p3demo/muliframe/multipleiframes.htm).

Essentially I am trying to recreate iframes with JS and CSS. I thought that cacalex's code would be a good starting point. Does anyone have any suggestions on how I can modify my code to apply this to more than one element (div or tag)?

Any help would be appreciated:) .