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/...tmethods.shtml. Anyone have any ideas? Thanks!

[djr33]

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

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.