Hi All,
I have a javascript scrollbar in the middle of the webpage, with two images as arrow at both end. Onclick of up and down arrow images the inside content moves up and down respectively. All works fine. What I need is, when I scroll down the down arrow should be disabled or invisible (as there is nothing to scrolldown) and same way when the content is at the top, the up arrow should be disabled or invisible. Please help…
Sharing the code :
<body>
<script src=“http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_event.js” type=“text/javascript”></script>
<script src=“http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/dw_scroll.js” type=“text/javascript”></script>
<script src=“http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/scroll_controls.js” type=“text/javascript”></script>
<script type=“text/javascript”>
function init_dw_Scroll() {
var wndo = new dw_scrollObj(‘wn1’, ‘lyr1’);
wndo.setUpScrollControls(‘scroll_links’);
wndo.setUpScrollControls(‘wn1’);
var wndo2 = new dw_scrollObj(‘wn2’, ‘lyr2’);
var wndo3 = new dw_scrollObj(‘wn3’, ‘lyr3’);
wndo3.setUpScrollbar(“dragBar”, “track”, “v”, 1, 1);
wndo3.setUpScrollControls(‘scrollbar’);
wndo3.setUpScrollControls(‘extra_controls’);
wndo3.setUpScrollControls(‘wn3’);
}
if ( dw_scrollObj.isSupported() ) {
dw_writeStyleSheet(‘http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css’);
dw_Event.add( window, ‘load’, init_dw_Scroll);
}
</script>
<link rel=“stylesheet” href=“http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/vert.css” media=“screen”>
<h2>Demonstration</h2>
<div class=“holder1”>
<div class=“hasImage scroll_controls” id=“scroll_links”>
<a class=“mouseover_up up” href=“”><img src=“http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-up.gif” alt=“” width=“12” height=“12”></a>
<a class=“mouseover_down dn” href=“”><img src=“http://milansolutions.com/file_depot/0-10000000/20000-30000/29948/folder/92044/tri-dn.gif” alt=“” width=“12” height=“12”></a>
</div>
<div id=“wn1”>
<div style=“left: 0px; top: 0px; visibility: visible;” id=“lyr1”>
<h3>Mouseover Scrolling </h3>
<p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p>
<p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p>
<p>The
documentation provides information for setup. The download file
contains examples in individual files for your convenience and ease of
implementation.</p>
<p>The code supports the capability to
hide or swap images when the end is reached. Further information is
provided upon request to licensed users of the code.</p>
<p>Content repeated for your scrolling pleasure :)</p>
<p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p>
<p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p>
<p>The
documentation provides information for setup. The download file
contains examples in individual files for your convenience and ease of
implementation.</p>
<p>The code supports the capability to
hide or swap images when the end is reached. Further information is
provided upon request to licensed users of the code.</p>
<p>Back to the <a href=“#” class=“click_up_to_0_0”>top</a></p>
</div>
</div>
</div>
