• 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:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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
 
If you are using a wood chipper, you are doing it wrong. Even on this tiny ad:
a bit of art, as a gift, that will fit in a stocking
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic