i am sending whole javascript code(it is for freezing html header)
it works fine eith IE but not firefox scroll bar does not come
Expand|Select|Wrap|Line Numbers
- var divContent = null;
- var divHeaderRow = null;
- var divHeaderColumn = null;
- var divHeaderRowColumn = null;
- var headerRowFirstColumn = null;
- var x;
- var y;
- var horizontal = false;
- var vertical = false;
- var browsername = null;
- // Copy table to top and to left
- function CreateScrollHeader(content, scrollHorizontal, scrollVertical)
- {
- browsername = navigator.appName;
- horizontal = scrollHorizontal;
- vertical = scrollVertical;
- if (content != null)
- {
- divContent = content;
- if (browsername == 'Netscape')
- {
- var headerRow = divContent.childNodes[1].childNodes[1].childNodes[1];
- var headersecondrow =divContent.childNodes[1].childNodes[1].childNodes[2];
- x = divContent.childNodes[1].offsetWidth;
- y = divContent.childNodes[1].offsetHeight;
- }
- else
- {
- var headerRow = divContent.childNodes[0].childNodes[0].childNodes[0];
- var headersecondrow =divContent.childNodes[0].childNodes[0].childNodes[1];
- x = divContent.childNodes[0].offsetWidth;
- y = divContent.childNodes[0].offsetHeight;
- }
- divHeaderRow = divContent.cloneNode(true);
- if (horizontal)
- {
- divHeaderRow.style.height = headerRow.offsetHeight + headersecondrow.offsetHeight;
- divHeaderRow.style.overflow = "hidden";
- divContent.parentNode.insertBefore(divHeaderRow, divContent);
- if (browsername == 'Netscape')
- {
- divContent.childNodes[1].style.position = "absolute";
- divContent.childNodes[1].style.top = "-" + (headerRow.offsetHeight + headersecondrow.offsetHeight) ;
- }
- else
- {
- divContent.childNodes[0].style.position = "absolute";
- divContent.childNodes[0].style.top = "-" + (headerRow.offsetHeight + headersecondrow.offsetHeight) ;
- }
- y = y - headerRow.offsetHeight;
- }
- divHeaderRowColumn = divHeaderRow.cloneNode(true);
- if (browsername == 'Netscape')
- {
- headerRowFirstColumn = headerRow.childNodes[1];
- }
- else
- {
- headerRowFirstColumn = headerRow.childNodes[0];
- }
- divHeaderColumn = divContent.cloneNode(true);
- divContent.style.position = "relative";
- if (vertical)
- {
- divContent.parentNode.insertBefore(divHeaderColumn, divContent);
- divContent.style.left = headerRowFirstColumn.offsetWidth;
- if (browsername == 'Netscape')
- {
- divContent.childNodes[1].style.position = "absolute";
- divContent.childNodes[1].style.left = "-" + headerRowFirstColumn.offsetWidth;
- }
- else
- {
- divContent.childNodes[0].style.position = "absolute";
- divContent.childNodes[0].style.left = "-" + headerRowFirstColumn.offsetWidth;
- }
- }
- else
- {
- divContent.style.left = 0;
- }
- if (vertical)
- {
- divHeaderColumn.style.width = headerRowFirstColumn.offsetWidth;
- divHeaderColumn.style.overflow = "hidden";
- divHeaderColumn.style.zIndex = "99";
- divHeaderColumn.style.position = "absolute";
- divHeaderColumn.style.left = "0";
- addScrollSynchronization(divHeaderColumn, divContent, "vertical");
- x = x - headerRowFirstColumn.offsetWidth;
- }
- if (horizontal)
- {
- if (vertical)
- {
- divContent.parentNode.insertBefore(divHeaderRowColumn, divContent);
- }
- divHeaderRowColumn.style.position = "absolute";
- divHeaderRowColumn.style.left = "0";
- divHeaderRowColumn.style.top = "0";
- divHeaderRowColumn.style.width = headerRowFirstColumn.offsetWidth;
- divHeaderRowColumn.overflow = "hidden";
- divHeaderRowColumn.style.zIndex = "100";
- divHeaderRowColumn.style.backgroundColor = "#ffffff";
- }
- if (horizontal)
- {
- addScrollSynchronization(divHeaderRow, divContent, "horizontal");
- }
- if (horizontal || vertical)
- {
- window.onresize = ResizeScrollArea;
- ResizeScrollArea();
- }
- }
- }
- // Resize scroll area to window size.
- function ResizeScrollArea()
- {
- var height = document.documentElement.clientHeight - 120;
- if (!vertical)
- {
- height -= divHeaderRow.offsetHeight;
- }
- var width = document.documentElement.clientWidth - 50;
- if (!horizontal)
- {
- width -= divHeaderColumn.offsetWidth;
- }
- var headerRowsWidth = 0;
- if(browsername == 'Netscape')
- {
- divContent.childNodes[1].style.width = x;
- divContent.childNodes[1].style.height = y;
- }
- else
- {
- divContent.childNodes[0].style.width = x;
- divContent.childNodes[0].style.height = y;
- }
- if (divHeaderRowColumn != null)
- {
- headerRowsWidth = divHeaderRowColumn.offsetWidth;
- }
- // width
- if(browsername == 'Netscape')
- {
- if (divContent.childNodes[1].offsetWidth > width)
- {
- divContent.style.width = Math.max(width - headerRowsWidth, 0);
- divContent.style.overflowX = "scroll";
- divContent.style.overflowY = "auto";
- }
- else
- {
- divContent.style.width = x;
- divContent.style.overflowX = "auto";
- divContent.style.overflowY = "auto";
- }
- }
- else
- {
- if (divContent.childNodes[0].offsetWidth > width)
- {
- divContent.style.width = Math.max(width - headerRowsWidth, 0);
- divContent.style.overflowX = "scroll";
- divContent.style.overflowY = "auto";
- }
- else
- {
- divContent.style.width = x;
- divContent.style.overflowX = "auto";
- divContent.style.overflowY = "auto";
- }
- }
- if (divHeaderRow != null)
- {
- divHeaderRow.style.width = divContent.offsetWidth + headerRowsWidth;
- }
- // height
- if(browsername == 'Netscape')
- {
- if (divContent.childNodes[1].offsetHeight > height)
- {
- divContent.style.height = Math.max(height, 80);
- divContent.style.overflowY = "scroll";
- }
- else
- {
- divContent.style.height = y;
- divContent.style.overflowY = "hidden";
- }
- }
- else
- {
- if (divContent.childNodes[0].offsetHeight > height)
- {
- divContent.style.height = Math.max(height, 80);
- divContent.style.overflowY = "scroll";
- }
- else
- {
- divContent.style.height = y;
- divContent.style.overflowY = "hidden";
- }
- }
- if (divHeaderColumn != null)
- {
- divHeaderColumn.style.height = divContent.offsetHeight;
- }
- // check scrollbars
- if (divContent.style.overflowY == "scroll")
- {
- divContent.style.width = divContent.offsetWidth + 17;
- }
- if (divContent.style.overflowX == "scroll")
- {
- divContent.style.height = divContent.offsetHeight + 17;
- }
- if(browsername == 'Netscape')
- {
- divContent.parentNode.style.width = divContent.offsetWidth + headerRowsWidth;
- }
- else
- {
- divContent.parentElement.style.width = divContent.offsetWidth + headerRowsWidth;
- }
- }
- ********************************************************************************
- // Synchronize div elements when scrolling
- // from http://webfx.eae.net/dhtml/syncscroll/syncscroll.html
- // ********************************************************************************
- // 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.scrollLeft;
- if (oElement._scrollSyncDirection == "vertical" || oElement._scrollSyncDirection == "both")
- oElement.scrollTop = event.srcElement.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;
- if(browsername != 'Netscape')
- {
- toElement.attachEvent("onscroll", fromElement._syncScroll);
- }
- else
- {
- toElement.addEventListener("scroll", fromElement._syncScroll,true);
- }
- }
- // removes the scroll synchronization for an element
- function removeScrollSynchronization(fromElement) {
- if (fromElement._syncTo != null)
- if(browsername != 'Netscape')
- {
- fromElement._syncTo.detachEvent("onscroll", fromElement._syncScroll);
- }
- else
- {
- fromElement._syncTo.removeEventListener("scroll", fromElement._syncScroll,true);
- }
- fromElement._syncTo = null;
- fromElement._syncScroll = null;
- fromElement._scrollSyncDirection = null;
- }