nbekierma2
New Member
I am attempting to synchronise the 2 divs on Screen, and for some reason, it is not working for Firefox.No error is being raised that I can see, it simply does not work. I am Stumped on this. It works for all other browsers.If anyone can help, I would be most thankful!I have included most of the script below...CSS Stylesheet.css:\[code\]#menuFrame{ BORDER-RIGHT: #cfcfcf 1px; BORDER-TOP: #cfcfcf 1px; FONT-SIZE: 8pt; LEFT: 164px; OVERFLOW: hidden; BORDER-LEFT: #cfcfcf 1px; WIDTH: 520px; BORDER-BOTTOM: #cfcfcf 1px; TOP: -50px; HEIGHT: 50px}#dataFrame{ BORDER-RIGHT: #cfcfcf 1px; BORDER-TOP: #cfcfcf 1px; LEFT: 164px; OVERFLOW: scroll; BORDER-LEFT: #cfcfcf 1px; WIDTH: 545px; BORDER-BOTTOM: #cfcfcf 1px; TOP: -318px; HEIGHT: 284px}\[/code\]SCRIPT syncScroll.js\[code\]// This is a function that returns a function that is used// in the event listenerfunction getOnScrollFunction(oElement) {try{ return function () { if (oElement._scrollSyncDirection == "horizontal" || oElement._scrollSyncDirection == "both") oElement.scrollLeft = event.srcElement.scrollLeft; if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both") oElement.scrollTop = event.srcElement.scrollTop;};}catch(ex){ alert ('Error getOnScrollFunction/n'+ ex.message)}}// This function adds scroll syncronization for the fromElement to the toElement// this means that the fromElement will be updated when the toElement is scrolledfunction addScrollSynchronization(fromElement, toElement, direction) { try { removeScrollSynchronization(fromElement); fromElement._syncScroll = getOnScrollFunction(fromElement); fromElement._scrollSyncDirection = direction; fromElement._syncTo = toElement; //browser safe if(toElement.attachEvent) { toElement.attachEvent("onscroll", fromElement._syncScroll); } else { toElement.addEventListener("scroll", fromElement._syncScroll,true); } } catch(ex) { alert ('Error addScrollSynchronization\n'+ ex.message) }}// removes the scroll synchronization for an elementfunction removeScrollSynchronization(fromElement) { try { if (fromElement._syncTo != null) { if(fromElement.detachEvent) { fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll); } else { fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll,true, false); } fromElement._syncTo = null; fromElement._syncScroll = null; fromElement._scrollSyncDirection = null; } catch(ex) { alert ('Error removeScrollSynchronization\n'+ ex.message) }}</SCRIPT>\[/code\]HTML:\[code\]<html><head><META http-equiv="Content-Type" content="text/html"><META HTTP-EQUIV="Pragma" CONTENT="no-cache"><META HTTP-EQUIV="Expires" CONTENT="-1"><META HTTP-EQUIV="content-type" CONTENT="text/html; charset=utf-8"><link rel="stylesheet" href="http://stackoverflow.com/questions/11905146/Stylesheet.css" type="text/css"><script type="text/javascript" src="http://stackoverflow.com/questions/11905146/syncscroll.js"/></HEAD><BODY bgcolor="#FFFFFF" addScrollSynchronization(document.getElementById("menuFrame"), document.getElementById("dataFrame"), "horizontal");<table class="PageLayout" align="center" border="0"> <tr> <td class="DataCell"> <div id="menuFrame"> <table class="tblMenuframe"> <tr class="MenuFrameRow"> <td>Menu 1</td> <td>Menu 2</td> <td>Menu 3</td> </tr> </table> </div> </td> </tr> <tr> <td class="DataCell"> <div id="dataFrame"> <table class="tblDataFrame"> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> </table </div> </td> </tr></table></body></html>\[/code\]