Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Knowledge Base

1. Select a product ...
2. Select category ...
3. Search the Knowledge Base...

Question #171

I'm using the Vertical Scroller extension, is it possible to automatically hide the Up, Down and other controls if the scroller does not contain enough content to require scrolling?

The Answer

Prepared Oct. 2005 by Gerry Jacobsen, PVII

In cases where the content is created dynamically there may be times when the rendered content of the vertical scrolling layer is not enough to require scrolling. You can add a special javascript function, P7_checkSH(), to your page that will handle this automatically.

Note #1: If you are using the Vertical Scroller Magic system then use the tweak outlined in tech note #260

Note #2: If you are using the GeeWizz Scroller system the use the special GeeWizz script in our tech note #88.

1. Add this function to your script file:

function P7_checkSH(c,s){
  var cC,sC,h,i,g,tC = new Array();
  //declare the list of control divs to be hidden
  tC[0] = 'myControlDiv1';
  tC[1] = 'myControlDiv2';
  cC=document.getElementById(c);
  sC=document.getElementById(s);
  if(cC&&sC){
  if(sC.offsetHeight<=cC.offsetHeight){
  for(i=0;i<tC.length;i++){
  g=document.getElementById(tC[i]);
  if(g){g.style.visibility="hidden";}}}}
  }

2. To activate the script, add this to your <body> onLoad event:

P7_checkSH('scrollercontainer','scrollercontent');

so it looks like this:

<body onload="P7_checkSH('scrollercontainer','scrollercontent')">

You specify the scroller container id as the first argument, and the scrolling layer id as the second argument.

You define all of the control elements, or any other html element, that you wish to hide when the content does not require scrolling by listing the id of the element in the fist section of the script, like:

  tC[0] = 'myControlDiv1';
  tC[1] = 'myControlDiv2';
  tC[2] = 'myControlDiv3';
  tC[3] = 'myControlDiv4';

That's it! Now the scroller will automatically check the rendered height of the content layer and show or hide the scroller controls as needed.

Back to the questions list