Scroll function on your page

Here is a simply function I implemented a long long time ago.

Example scroll on form

What it does is basically places the content of a form in a <div> section and places another <div> section besides it. The second section contains two arrows, one for scrolling up, one for scrolling down. When moving over the button, based upon the location of your first section (‘contentLayer’) the div scrolls up or down.

End of scroll

What do you need to implement?

Here is what is placed on my form:

scroll form

And in the JSHeader write:

function verScroll(dir, spd, loop) {
 loop = true;
 direction = “up”;
 speed = 10;
 scrolltimer = null;
 if (document.layers) { var page = eval(document.contentLayer); }
 else {
  if (document.getElementById) { var page= eval(“document.getElementById(‘contentLayer’).style”);  }
 else {
  if (document.all) { var page = eval(document.all.contentLayer.style); }
    }
}

direction = dir;
speed = parseInt(spd);
var y_pos = parseInt(page.top);

if (loop == true) {
 if (direction == “dn”) { page.top = (y_pos – (speed)); }
 else {
  if (direction == “up” && y_pos < 10) { page.top = (y_pos + (speed)); }
  else {
   if (direction == “top”) { page.top = 10;  }
     }
 }
 scrolltimer = setTimeout(“verScroll(direction,speed)”, 1);
   }
}

function stopScroll() {
 loop = false;
 clearTimeout(scrolltimer);
}

That’s all! Please let me know if you experience any difficulties.

Ps. The nice icons can be found here.

Advertisements

2 thoughts on “Scroll function on your page

  1. Nathan T. Freeman 2007-April-20 / 2:21 pm

    This doesn’t seem to work at all under Firefox.

    Also, are you aware that there is no identifying information on this site? Who are you?

  2. quintessens 2007-April-20 / 6:05 pm

    Hi Nathan,

    thanks for your comment. I added a little introduction on the site. I am not really a fan of this software (WordPress) but at least it enables me to write a webblog whereever I am.

    I have not checked the code in firefox…

    KR// Patrick

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s