Log in

View Full Version : Mozilla Problem


mburt
08-06-2006, 10:48 PM
Hi

I've created a script that is basically a dual-scroller. (a scroll-bar on the left side of the page, and one on the right)

My problem is that it doesn't work in Mozilla.
Here it is:


<html>
<head>
<script>
onload=function() {
leftscroller.innerHTML=content.innerHTML
content.onscroll=function() {
leftscroller.scrollTop=content.scrollTop
}
leftscroller.onscroll=function() {
content.scrollTop=leftscroller.scrollTop
}
}
</script>
<style type="text/css">
body {
margin:0px;
overflow:hidden
}
#leftscroller {
height:100%;
position:absolute;
left:-98.4%;
top:0%;
overflow-y:scroll;
width:100%
}
#content {
height:100%;
margin-left:20px;
overflow-y:scroll;
overflow-x:auto;
padding:15px
}
</style>
</head>
<body>
<div id="leftscroller"></div>
<div id="content">
Insert document text here:
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
</div>
</body>
</html>
Twey
08-06-2006, 11:23 PM
The onscroll event is, as far as I remember, unreliable. Poll the positions of both scrollbars instead.
mburt
08-07-2006, 12:10 AM
Do what?
Twey
08-07-2006, 02:27 AM
function $(id) { return document.getElementById(id); }
var lastPos = 0;

function paintUndersideOfFox() {
var ls = $('leftscroller'),
ct = $('content');
if(ls.scrollTop !== lastPos)
lastPos = ct.scrollTop = ls.scrollTop;
else if(ct !== lastPos)
lastPos = ls.scrollTop = ct.scrollTop;
}
window.setInterval(paintUndersideOfFox, 500);
mburt
08-07-2006, 02:19 PM
Umm.. I just tested it and it still doesn't work :)

Here it is now:


<html>
<head>
<script>
onload=function() {
leftscroller.innerHTML=content.innerHTML
content.onscroll=function() {
leftscroller.scrollTop=content.scrollTop
}
leftscroller.onscroll=function() {
content.scrollTop=leftscroller.scrollTop
}
}
function $(id) { return document.getElementById(id); }
var lastPos = 0;

function paintUndersideOfFox() {
var ls = $('leftscroller'),
ct = $('content');
if(ls.scrollTop !== lastPos)
lastPos = ct.scrollTop = ls.scrollTop;
else if(ct !== lastPos)
lastPos = ls.scrollTop = ct.scrollTop;
}
window.setInterval(paintUndersideOfFox, 500);
</script>
<style type="text/css">
body {
margin:0px;
overflow:hidden
}
#leftscroller {
height:100%;
position:absolute;
left:-98.4%;
top:0%;
overflow-y:scroll;
width:100%
}
#content {
height:100%;
margin-left:20px;
overflow-y:scroll;
overflow-x:auto;
padding:15px
}
</style>
</head>
<body>
<div id="leftscroller"></div>
<div id="content">
Insert document text here:
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt
<br>ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
<br>tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor
<br>sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
</div>
</body>
</html>
Twey
08-07-2006, 05:32 PM
Demo page?
mburt
08-07-2006, 07:09 PM
Try opening this in Mozilla:

http://www40.brinkster.com/mburt/scripts/dual_scroller.htm
Twey
08-07-2006, 09:41 PM
There seem to be no scrollbars.
blm126
08-07-2006, 09:42 PM
I see one on the left that is not working. then one on the right that does...
Twey
08-07-2006, 10:00 PM
Oh, I see, my window was too big.

Hm -- the problem is caused by the lack of content in the scroller div. There is no content, so the browser does not display the scrollbar.
mburt
08-07-2006, 11:27 PM
Ok, I'll keep trying to fix it though. Thanks for all the help!
mwinter
08-08-2006, 11:53 AM
function $(id) { return document.getElementById(id); }

Please don't copy the Prototype library's habit of using bad identifiers. The dollar symbol is reserved for machine-generated identifiers. More importantly, however, such an obscure identifier can hardly help comprehension.

The getElementById method shouldn't need to be called that often, and even so, the loss of readability isn't worth the saved keystrokes, in my opinion.

Mike
Twey
08-08-2006, 10:10 PM
You're right. I apologise; the original draft of that code used getElementById() a lot more.