Firefox compatibility

[horizonsonfire]

I've been working with a script (http://webfx.eae.net/dhtml/syncscroll/syncscroll.js and http://webfx.eae.net/dhtml/syncscroll/demo1.html) that I found for synchronous div scrolling that was originally made for IE. I've made some method subsititutions found on http://www.javascriptkit.com/domref/elementmethods.shtml. Anyone have any ideas? Thanks!

[djr33]

Pretty cool script. What could it actully be used for, though?
Just fun to play with, though :D

Not really sure, but I'll also note that it doesn't work in Safari.

There's a chance pieces of it may just be IE specific (certainly is right now)... it doesn't follow the standards, so it's just weird like that.

There's likely a solution, though. Sorry I don't have it.

[Twey]

You should use "target" rather than "srcElement" in standards-compliant browsers.

[1874house]

Did this work for anyone? I tried but they still don'y sync. I replaced "srcElement" in two places with "target" Advice is appreciated ..... Thank you


// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.target.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.target.scrollTop;
};

}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
toElement.attachEvent("onscroll", fromElement._syncScroll);
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);

fromElement._syncTo = null;;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}

[Twey]

No, IE needs srcElement. You should use (srcElement||target).

[1874house]

Thanks for getting back to me so quickly .......... I added that back in as you said ........ I can't get it to work. Do you have an example of it working that I could look at where I'm going wrong.
Thank you

[Twey]

Add these functions:
function addEvent(el, ev, handler) {
if(el.addEventListener) el.addEventListener(ev, handler);
else if(el.attachEvent) el.attachEvent("on" + ev, handler);
else el["on" + ev] = handler;
}

function rmEvent(el, ev, handler) {
if(el.removeEventListener) el.removeEventListener(ev, handler);
else if(el.detachEvent) el.detachEvent("on" + ev, handler);
else el["on" + ev] = null;
}Replace:
toElement.attachEvent("onscroll", fromElement._syncScroll);With:
addEvent(toElement, "scroll", fromElement._syncScroll);And:
fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);With:
rmEvent(fromElement._syncTo, "scroll", fromElement._syncScroll);

[1874house]

Thank you for your patience. My script now looks like:

// This is a function that returns a function that is used
// in the event listener
function getOnScrollFunction(oElement) {
return function () {
if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both")
oElement.scrollLeft = event.srcElement||target.scrollLeft;
if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
oElement.scrollTop = event.srcElement||target.scrollTop;
};

}
// This function adds scroll syncronization for the fromElement to the toElement
// this means that the fromElement will be updated when the toElement is scrolled
function addScrollSynchronization(fromElement, toElement, direction) {
removeScrollSynchronization(fromElement);

fromElement._syncScroll = getOnScrollFunction(fromElement);
fromElement._scrollSyncDirection = direction;
fromElement._syncTo = toElement;
addEvent(toElement, "scroll", fromElement._syncScroll);
}

// removes the scroll synchronization for an element
function removeScrollSynchronization(fromElement) {
if (fromElement._syncTo != null)
rmEvent(fromElement._syncTo, "scroll", fromElement._syncScroll);

fromElement._syncTo = null;;
fromElement._syncScroll = null;
fromElement._scrollSyncDirection = null;
}

function addEvent(el, ev, handler) {
if(el.addEventListener) el.addEventListener(ev, handler);
else if(el.attachEvent) el.attachEvent("on" + ev, handler);
else el["on" + ev] = handler;
}

function rmEvent(el, ev, handler) {
if(el.removeEventListener) el.removeEventListener(ev, handler);
else if(el.detachEvent) el.detachEvent("on" + ev, handler);
else el["on" + ev] = null;
}

My html like this .... but still not working in either browser.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Synchronized Scroll Demo 1</title>
<link rel="StyleSheet" type="text/css" href="webfx.css">
<style type="text/css">

div {
border: 1px solid black;
padding: 2px;
position: absolute;
width: 100px;
height: 100px;
}

#div1 {
overflow: auto;
left: 20px;
top: 20px;
}

#div2 {
overflow: hidden;
left: 20px;
top: 140px;
}

#div3 {
overflow: hidden;
left: 140px;
top: 20px;
}

#div4 {
overflow: hidden;
left: 140px;
top: 140px;
}


</style>
<script type="text/javascript" src="syncscroll.js"></script>
<script type="text/javascript">

window.onload = function () {
addScrollSynchronization(document.getElementById("div2"), document.getElementById("div1"), "horizontal");
addScrollSynchronization(document.getElementById("div3"), document.getElementById("div1"), "vertical");
addScrollSynchronization(document.getElementById("div4"), document.getElementById("div1"), "both");
};

</script>
</head>
<body>

<div id="div1">
<nobr>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
Scroll me and see the other divs being updated. Scroll me and see the other divs being updated.<br>
</nobr>
</div>

<div id="div2">
<nobr>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
This div has synchronized horizontal scrolling with the first div. This div has synchronized horizontal scrolling with the first div.<br>
</nobr>
</div>

<div id="div3">
<nobr>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
This div has synchronized vertical scrolling with the first div. This div has synchronized vertical scrolling with the first div.<br>
</nobr>

</div>

<div id="div4">
<nobr>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
This div has synchronized both vertical and horizontal scrolling with the first div.<br>
</nobr>
</div>


</body>
</html>

[Twey]

And the error(s)...?

[1874house]

It just doesn't work. When you open the html in a browser be it IE or Firefox it doesn't scroll or sync.

[Twey]

Do you have a demo page?

[1874house]

http://28fenetres.com/syncscroll/demo1.html

This is the link to were I have been testing. I want to get it working before integrating into the actual page

[Twey]

Don't know what you're talking about, then; I got an error straight away.

Unfortunately, the error was
Error: uncaught exception: nullwhich isn't particularly helpful. Gah -- time to fire up FireBug.

[1874house]

I downloaded FireBug .............. not very intuitive. I see that error ..... but I don't understand how to identify were it is in the script.

[Twey]

I find myself at a bit of a loss here. It's probably a browser bug -- certainly the browser should never throw null. Perhaps John or Mike will be able to work it out.

[1874house]

What I am looking to do is lock two tables together and scroll. The tables are then nested so that one can scroll under the other horizontally like an Excell spreadsheet. Do you know of a working script that will do that.