Scrolling Tbody Not Working in Safari

mediumman · December 17, 2008, 4:06pm

I’ve created a scrolling tbody table for an application and for some reason the scrollbar is not appearing in Safari…it works across IE6,7 and Firefox…below is the html and javascript…I am also going to attach both files…if anyone can help that would be great…I am thinking it has something to do with lines 53-59 in the javascript…Safari must not be responding to something.

<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Test Scroll Safari</title>
<script type=“text/javascript” src=“scrolltable.js”></script>
</head>
<body>
<table cellspacing=“0” cellpadding=“0” class="" id=“myTable” width=“755”>
<thead>
<tr>
<th width=“15” class=“c”><input type=“checkbox” name=“checkall” onclick=“checkUncheckAll(this,‘check1’);”/></th>
<th width=“112” class=“c”><a href="#" class=“table_header_links”>| Message Name</a></th>
<th width=“90” class=“c”><a href="#" class=“table_header_links”>| Created by</a></th>
<th width=“122” class=“c”><a href="#" class=“table_header_links”>| Date Created</a></th>
<th width=“122” class=“c”><a href="#" class=“table_header_links”>| Last Modified by</a></th>
<th width=“110” class=“c”><a href="#" class=“table_header_links”>| Date Modified</a></th>
<th width=“80” class=“c”><a href="#" class=“table_header_links”>| Status</a></th>
</tr>
</thead>
<tbody>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
<tr class=“bottomborder”>
<td width=“15” class=“c”><input id=“messageCheckBox” type=“checkbox” name=“check1” value=“1”/></td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
<td class=“c”>test</td>
</tr>
</tbody>

</table>
<script type=“text/javascript”>
var tb = new ScrollableTable(document.getElementById(‘myTable’), 100);
</script>
</body>
</html>

function ScrollableTable (tableEl, tableHeight, tableWidth) {

this.initIEengine = function () {

	this.containerEl.style.overflowY = 'auto';
	this.containerEl.style.overflowX = 'hidden';
	if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight &lt; 0) {
		this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
	} else {
		this.containerEl.style.overflowY = 'hidden';
		this.containerEl.style.overflowX = 'hidden';
		this.tableEl.style.width = this.newWidth +'px';
	}

	if (this.thead) {
		var trs = this.thead.getElementsByTagName('tr');
		for (x=0; x&lt;trs.length; x++) {
			trs[x].style.position ='relative';
			trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
		}
	}

	if (this.tfoot) {
		var trs = this.tfoot.getElementsByTagName('tr');
		for (x=0; x&lt;trs.length; x++) {
			trs[x].style.position ='relative';
			trs[x].style.setExpression("bottom",  "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
		}
	}

	eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.display = 'none'; document.getElementById('" + this.tableEl.id + "').style.display = 'block'; } )");
};


this.initFFengine = function () {
	this.containerEl.style.overflow = 'hidden';
	this.tableEl.style.width = this.newWidth + 'px';

	var headHeight = (this.thead) ? this.thead.clientHeight : 0;
	var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
	var bodyHeight = this.tbody.clientHeight;
	var trs = this.tbody.getElementsByTagName('tr');
	if (bodyHeight &gt;= (this.newHeight - (headHeight + footHeight))) {
		this.tbody.style.overflow = '-moz-scrollbars-vertical';
		for (x=0; x&lt;trs.length; x++) {
			var tds = trs[x].getElementsByTagName('td');
			tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
		}
	} else {
		this.tbody.style.overflow = '-moz-scrollbars-none';
	}
	
	var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
	var xHeight = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)); // Fix for FireFox 3, Table Height
	//alert(xHeight);
	if(this.tableEl.offsetHeight &gt; xHeight){ // Fix for FireFox 3, Table Height
		this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';
		//alert(this.tbody.style.height);
	}
};

this.tableEl = tableEl;
this.scrollWidth = 16;

this.originalHeight = this.tableEl.clientHeight;
this.originalWidth = this.tableEl.clientWidth;

this.newHeight = parseInt(tableHeight);
this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;

this.tableEl.style.height = 'auto';
this.tableEl.removeAttribute('height');

this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
this.containerEl.appendChild(this.tableEl);
this.containerEl.style.height = this.newHeight + 'px';
this.containerEl.style.width = this.newWidth + 'px';


var thead = this.tableEl.getElementsByTagName('thead');
this.thead = (thead[0]) ? thead[0] : null;

var tfoot = this.tableEl.getElementsByTagName('tfoot');
this.tfoot = (tfoot[0]) ? tfoot[0] : null;

var tbody = this.tableEl.getElementsByTagName('tbody');
this.tbody = (tbody[0]) ? tbody[0] : null;

if (!this.tbody) return;

if (document.all && document.getElementById && !window.opera) this.initIEengine();
if (!document.all && document.getElementById && !window.opera) this.initFFengine();

}

Topic	Replies	Views
Scroll bar doesn't work in IE	121	November 1, 2006
Dreamweaver question bout layout tables web dev	111	January 27, 2004
Table Scroll web dev	72	February 3, 2005
Another Works IE; FF 100% height Fails web dev	131	November 5, 2006
JavaScript and CSS Trouble web dev	75	February 1, 2004

Scrolling Tbody Not Working in Safari

Follow:

Popular

Loose Ends

Scrolling Tbody Not Working in Safari

Related topics

Follow:

Popular

Loose Ends