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

In the Horizontal Scroller magic system is there a way to automatically hide the controls (dragbar) if the contents of the scroller are less than the width of the scroller, they do not require scrolling?

The Answer

Prepared Oct. 2008 by Gerry Jacobsen, PVII

To have the Horizontal Scroller Magic system conditionally display the control bar based on the rendered width of the scroller contents you can apply this code tweak:

1. Open the p7hsmscripts.js file and locate this line in the P7_setHSM() function, around line 22:

  h+='.p7HSMdragchannel, .p7HSMtoolbar{display: block !important;}\n';

2. Replace that line with this line:

  h+='.p7HSMdragchannel, .p7HSMtoolbar{display: block;}\n';

3. Locate this line in the P7_initHSM() function, around line 872:

  if(!isNaN(xx)){
    dB.style.left=xx+"px";
  }
 }
}

4. Add this code block right after the next to last line:

 var cnt=sB.getElementsByTagName("DIV")[1];
 var dc=document.getElementById(sB.id.replace("b","cn"));
 dc.style.display=(cnt.offsetWidth<=sB.offsetWidth)?'none':'block';

so that it now looks like this:

  if(!isNaN(xx)){
    dB.style.left=xx+"px";
  }
 }
 var cnt=sB.getElementsByTagName("DIV")[1];
 var dc=document.getElementById(sB.id.replace("b","cn"));
 dc.style.display=(cnt.offsetWidth<=sB.offsetWidth)?'none':'block';
}

5. Save the file.

That's it. The system will now only show the control bar if the renderedcontents have sufficient width to warrant scrolling. This tweak will also autmatically show or hide the controls whenever broower window is resized.

Back to the questions list