PDA

View Full Version : onscroll in firefox



Duffman12
Mar 7th, 2008, 03:55 PM
what i'm trying to do is to make the header table follow the main table when it is scrolled. to do this, i made two divs, one for the header and one for the table. i restricted the widths of the div so there is overflow. in each of the divs, i put a table that is wider than the div. when the main div is scrolled, it calls the javascript function:

function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.marginLeft = '-' + block.scrollLeft + 'px';
}
this just finds the scroll position of the main div and moves the top table accordingly.

this works in ie but not firefox. if you use firebug, you can see the javascript changing the margin-left, but it's not moving the content. although, when you scroll all the way to the end, then the header decides to jump over.

also, if you make the width of #tableHead and #tableHead table both 600px, it works. not sure what the deal is. any ideas?


you can download the html file here: 6104

here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tableHeader</title>

<script type="text/javascript" charset="utf-8">
function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.marginLeft = '-' + block.scrollLeft + 'px';
}
</script>

<style type="text/css" media="screen">

#tableHead {
width: 400px;
border: 1px solid cornflowerblue;
overflow: hidden;
}
#tableHead table {
width: 600px;
}
#tableHead td {
border: 1px solid gray;
}


#tableHolder {
width: 400px;
border: 1px solid cornflowerblue;
overflow: auto !important;
}
#tableHolder table {
width: 600px;
}
#tableHolder td {
border: 1px solid gray;
}
</style>

</head>

<body>

<div id="tableHead">
<table id="tableHeadTable" border="0" cellspacing="5" cellpadding="5" >
<tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
</table>
</div>

<div id="tableHolder" onscroll="javascript:scrollHeaders(this)">

<table border="0" cellspacing="5" cellpadding="5">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>

</body>

</html>

Kor
Mar 7th, 2008, 04:17 PM
It is a Mozilla's bug regarding the incomplete onscroll event implementation. Maybe you should try another approach.

vwphillips
Mar 7th, 2008, 04:19 PM
<html>

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>tableHeader</title>

<script type="text/javascript" charset="utf-8">
function scrollHeaders(block) {
document.getElementById('tableHeadTable').style.left = -block.scrollLeft + 'px';
}
</script>

<style type="text/css" media="screen">

#tableHead {
position:relative;width: 400px;
border: 1px solid cornflowerblue;
overflow: hidden;
}
#tableHead table {
position:relative;width: 600px;
}
#tableHead td {
border: 1px solid gray;
}


#tableHolder {
width: 400px;
border: 1px solid cornflowerblue;
overflow: auto !important;
}
#tableHolder table {
width: 600px;
}
#tableHolder td {
border: 1px solid gray;
}
</style>

</head>

<body>

<div id="tableHead">
<table id="tableHeadTable" border="0" cellspacing="5" cellpadding="5" >
<tr><td>Head</td><td>Head</td><td>Head</td><td>Head</td><td>Head</td></tr>
</table>
</div>

<div id="tableHolder" onscroll="scrollHeaders(this)">

<table border="0" cellspacing="5" cellpadding="5">
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
<tr><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td></tr>
</table>
</div>

</body>

</html>

Kor
Mar 7th, 2008, 04:23 PM
Vic, it does not matter. Have you tested your code? Anyway, it should have been marginLeft, not left in your code.