File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Scroll of div fail to work when table row inside it is higlighted Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Scroll of div fail to work when table row inside it is higlighted" Watch "Scroll of div fail to work when table row inside it is higlighted" New topic
Author

Scroll of div fail to work when table row inside it is higlighted

Zafar Hakim
Greenhorn

Joined: Nov 04, 2008
Posts: 6
Hi,
The problem I am facing looks simple:

A table with few rows of data inside <div> (with id) and few more <div> tags to help scroll happen without hiding header. The scroll works fine normally when we use mousescroll or use scrollbar. Also the row is highlighted when is mouse over it. This is where problem is: When row is highlighted it puts off the scroll somehow and we cannot use mouse-scroll to scroll over table data. The table seems somehow locked for scroll.

The complete code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Scrollable HTML Table </title>

<style type="text/css" charset="utf-8">
.mouseOvr
{
background-color: grey;
}
.mouseOut tr
{
background-color: white;
}

table#table-header th
{
border:1px solid #000;
width:100px;
height:3px;
overflow:hidden;
white-space:nowrap;
}

table#table-body td
{
border:1px solid #000;
width:100px;
height:30px;
overflow:hidden;
white-space:nowrap;
}

div#header-container
{
overflow:hidden;
}

div#scroll
{
width:500px;
overflow:hidden;
max-height:150px;
padding-left:1px;
}

div#fake-scroll-container
{
width:500px;
overflow:hidden;
position:relative;
}

div#y-fake-scroll
{
overflow-y:scroll;
overflow-x:hidden;
background:transparent;
position:absolute;
right:0;
position:absolute;
max-height:149px;
top:31px;
}

div#x-fake-scroll
{
height:40px;
margin-top:-23px;
overflow-x:auto;
overflow-y:hidden;
margin-top:expression('0px');/* IE 7 fix*/
height:expression('17px'); /* IE 7 fix*/
}

div#y-scroll
{
max-height:150px;
overflow-y:auto;
overflow-x:hidden;
overflow:scroll;
width:1010px;
padding:0px 1px 1px 1px;
}

div#header-container
{
padding:1px 1px 0 1px;
}


</style>
</head>
<body>



<div id="fake-scroll-container">

<div id="header-container">
<table id="table-header" >
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
<th>Header 9</th>
<th>Header 10</th>
</tr>
</table>
</div>

<div id="scroll">
<table id="table-body" >
<tr id="width-row" >
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>

<tr >
<td>Cell 1.1</td>
<td>Cell 1.2</td>
<td>Cell 1.3</td>
<td>Cell 1.4</td>
<td>Cell 1.5</td>
<td>Cell 1.6</td>
<td>Cell 1.7</td>
<td>Cell 1.8</td>
<td>Cell 1.9</td>
<td>Cell 1.10</td>
</tr>
<tr >
<td>Cell 2.1</td>
<td>Cell 2.2</td>
<td>Cell 2.3</td>
<td>Cell 2.4</td>
<td>Cell 2.5</td>
<td>Cell 2.6</td>
<td>Cell 2.7</td>
<td>Cell 2.8</td>
<td>Cell 2.9</td>
<td>Cell 2.10</td>
</tr>
<tr >
<td>Cell 3.1</td>
<td>Cell 3.2</td>
<td>Cell 3.3</td>
<td>Cell 3.4</td>
<td>Cell 3.5</td>
<td>Cell 3.6</td>
<td>Cell 3.7</td>
<td>Cell 3.8</td>
<td>Cell 3.9</td>
<td>Cell 3.10</td>
</tr>
<tr >
<td>Cell 4.1</td>
<td>Cell 4.2</td>
<td>Cell 4.3</td>
<td>Cell 4.4</td>
<td>Cell 4.5</td>
<td>Cell 4.6</td>
<td>Cell 4.7</td>
<td>Cell 4.8</td>
<td>Cell 4.9</td>
<td>Cell 4.10</td>
</tr>
<tr >
<td>Cell 5.1</td>
<td>Cell 5.2</td>
<td>Cell 5.3</td>
<td>Cell 5.4</td>
<td>Cell 5.5</td>
<td>Cell 5.6</td>
<td>Cell 5.7</td>
<td>Cell 5.8</td>
<td>Cell 5.9</td>
<td>Cell 5.10</td>
</tr>
<tr >
<td>Cell 6.1</td>
<td>Cell 6.2</td>
<td>Cell 6.3</td>
<td>Cell 6.4</td>
<td>Cell 6.5</td>
<td>Cell 6.6</td>
<td>Cell 6.7</td>
<td>Cell 6.8</td>
<td>Cell 6.9</td>
<td>Cell 6.10</td>
</tr>
<tr >
<td>Cell 7.1</td>
<td>Cell 7.2</td>
<td>Cell 7.3</td>
<td>Cell 7.4</td>
<td>Cell 7.5</td>
<td>Cell 7.6</td>
<td>Cell 7.7</td>
<td>Cell 7.8</td>
<td>Cell 7.9</td>
<td>Cell 7.10</td>
</tr>
<tr >
<td>Cell 8.1</td>
<td>Cell 8.2</td>
<td>Cell 8.3</td>
<td>Cell 8.4</td>
<td>Cell 8.5</td>
<td>Cell 8.6</td>
<td>Cell 8.7</td>
<td>Cell 8.8</td>
<td>Cell 8.9</td>
<td>Cell 8.10</td>
</tr>
</table>
</div>

<div id="y-fake-scroll">
<div id="y-table-emulator" style="width:500px;">
 
</div>
</div>

<div id="x-fake-scroll">
<div id="x-table-emulator">
 
</div>
</div>
</div>


<script type="text/javascript">
var YtableEmulator = document.getElementById('y-table-emulator');
var XtableEmulator = document.getElementById('x-table-emulator');
var table = document.getElementById('table-body');

YtableEmulator.style.height = table.clientHeight == 0 ? "330px" : table.clientHeight + "px";
XtableEmulator.style.width = table.clientWidth + "px";

var scrollablePanel = document.getElementById('scroll');
var headerContainer = document.getElementById('header-container');
var footerContainer = document.getElementById('footer-container');
var YfakeScrollablePanel = document.getElementById('y-fake-scroll');
var XfakeScrollablePanel = document.getElementById('x-fake-scroll');


YfakeScrollablePanel.style.top = headerContainer.clientHeight == 0 ? "34px" : headerContainer.clientHeight + "px";
scrollablePanel.onscroll = function (e) {
XfakeScrollablePanel.scrollTop = scrollablePanel.scrollTop;
}
YfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollTop = YfakeScrollablePanel.scrollTop;
}
XfakeScrollablePanel.onscroll = function (e) {
scrollablePanel.scrollLeft = XfakeScrollablePanel.scrollLeft;
headerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
footerContainer.scrollLeft = XfakeScrollablePanel.scrollLeft;
}
</script>

</body>
</html>


The above code is complete and can be put in a fresh html file to see the table. Let me know if something not clear.

Please provide your suggestions..

Thanks in advance,
Zafar Hakim
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Scroll of div fail to work when table row inside it is higlighted