• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
Sheriffs:
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

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

 
Greenhorn
Posts: 6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
reply
    Bookmark Topic Watch Topic
  • New Topic