JavaScript - Please Help Me With Javascript Scrollbar Problem!

Hey Guys!

I'm new to the site but, I am building a site that has a small area of scrollable text on the page.

Basically, my scrollbar is created using layers and styles and it runs an external .js file. It has been working great up until about 6 months ago where it was incompatible in all browsers. I have no idea why. I'm literally pulling out my hair thinking about it. Any help would be nice.

The external .js file is below

<code>
// variables
var mouseover = false;
var scrolldirection;
var scrollratio;
var theheartbeat, scrolling;
var menuOffsetTop = menuOffsetLeft = menuMaxHeight = 0;
var currentX = currentY = 0;
var whichIt = null;

// events
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;

// switch direction scroller will move while pressing a button
function switchit(obj, cmd)
{
if (cmd == 'in')
{
mouseover = true;
if (obj.getAttribute('id') == "scrollup")
{
scrolldirection = -1;
}
else
{
scrolldirection = 1;
}
}
else
{
mouseover = false;
}
}

function scroll()
{
if (((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight)))
{
scrollbox.style.pixelTop += scrolldirection;
}
}

function heartBeat()
{
data.style.pixelTop = -1 * scrollratio * (scrollbox.style.pixelTop + menuOffsetTop - menuOffsetTop);
}

function grabIt(e) {
if (event.button == 1)
{
if (mouseover)
scrolling = window.setInterval("scroll();",1);
else
{
whichIt = event.srcElement;
while (whichIt.id.indexOf("scrollbox") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
// whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}

theheartbeat = window.setInterval("heartBeat()",1);
}
}

function moveIt(e) {
if (whichIt == null) { return false; }
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
if (((scrollbox.style.pixelTop + menuOffsetTop + distanceY) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + distanceY) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight)))
{
scrollbox.style.pixelTop += distanceY;
}
event.returnValue = false;
return false;
}

function dropIt() {
clearInterval(scrolling);
clearInterval(theheartbeat);
whichIt = null;
}

function init()
{
menuOffsetTop = floater.style.pixelTop;
menuMaxHeight = floater.style.pixelHeight;

getscrollinc();
}

function getscrollinc()
{
var contentinc;
var scrollerinc;
var contentHeight = data.offsetHeight;
var scrollerHeight = content.style.pixelHeight;

if (scrollerHeight < contentHeight)
{
contentinc = content.style.pixelHeight / contentHeight;
scrollerinc = floater.style.pixelHeight*contentinc;
scrollratio = contentHeight / floater.style.pixelHeight;
}
else
{
scrollerinc = floater.style.pixelHeight;
contentinc = 1;
}

scrollbox.style.height = scrollerinc;
}
</code>


An example of a page I was trying to use it on is (http://desifraternity.org/history.html)


Thanks you in advance!

Hi, I'm currently working on a JavaScript scrollbar on my website: http://allotrope-dome.net.

I managed to get most of the code working. The only part that isn't working is that users can't click and drag on the scrollbar (click on the "About" section in the navigation bar to get a better idea of what I'm talking about). If any of you could help me out with that, I'd really appreciate it. Thanks!

To see the code, go to http://allotrope-dome.net/about.php and click "View Source."

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>

Hi,

I'm just putting the finishing touches on my new website and decided to include a custom scroll bar to really finish off the look of a couple of pages.

I've managed to implement it successfully into one of my pages, however on another it seems to be a bit hit and miss as to whether it works in different browsers. After some experimentation I think I've managed to determine that the problem is that the javascript for the custom scrollbar is conflicting with some other javascript on the same page (lightbox image viewer).

I came to this conclusion as prior to adding the custom scrollbar lightbox worked fine, and now after adding the addition javascript for the scrollbar lightbox has stopped working (and the scrollbar is hit and miss as to whether it works). In addition as I say, I have implemented the scrollbar into a different page (which doesn't have any other javascript to conflict with) which seems to work fine.

Here's the page prior to adding the new scrollbar and with lightbox working:

Here's the page with the scrollbar added and lightbox not working:

The code that I suspect is conflicting is as follows:

Code:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Ryan Robinson | Gear</title>
<!-- lightbox script -->
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>
<!-- scrollbar script -->
<link rel="stylesheet" href="scrollbar/css/scrollbar_gear.css" type="text/css" media="screen"/>	
<script type="text/javascript" src="scrollbar/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scrollbar/js/jquery.tinyscrollbar.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$('#scrollbar1').tinyscrollbar();	
		});
</script>

I could be wrong, but considering they work separately but whenever I put them together one or both stops it leads me to believe this must be the problem.

Anyone have any idea of how I might fix this?
(PS. I am still a bit of a noob when it comes to code, so please make any suggestions as simple as possible!)

Thanks

Appending to a div (id=right) over time. There is a scrollbar on the right side. At some point, the scrollbar appears but the user has to manually move the scrollbar to the bottom to see the newest appends.

Googled and found a number of "solutions" that I can't get to work. The ideal would be to always have the scrollbar move to the bottom after each append.

Code:

 #right {
    background-color: #FF0;
    width: 150px;
    height: 300px;
    float: right;
    overflow : auto;
  }

$("#right").append("<p>something important here");