Scroll text with buttons

@ashleyOct 27.2003

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 ~~[url]~~http://www.aka1908.com/aka/programs/overview.htm[/url]

Thanks in advance for your help.

to post a comment

JavaScript

3 Comments(s) _↴

@cacalexOct 27.2003 — #Maybe this will help you ...

<html>

<body>



<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> <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>

@tonyhMar 23.2004 — #I modified cacalex's code:

[CODE][SIZE=2]<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> [/SIZE][/CODE]

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?

@tonyhMar 24.2004 — #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: [URL=http://www.enpassant.dk/chess/palview/p3demo/muliframe/multipleiframes.htm]A Palview Dempage[/URL].

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? .

Also in #JavaScript _↴

referencing named list element in JS function opening new windows Javascript print command prints only one page

Success!

Help @ashley spread the word by sharing this article on Twitter...

Tweet This

Scroll text with buttons

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Scroll text with buttons

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴