Win a copy of Mastering Corda: Blockchain for Java Developers this week in the Cloud/Virtualization forum!

Zafar Hakim

Greenhorn
+ Follow
since Nov 04, 2008
Cows and Likes
Cows
Total received
0
In last 30 days
0
Total given
0
Likes
Total received
0
Received in last 30 days
0
Total given
0
Given in last 30 days
0
Forums and Threads
Scavenger Hunt
expand Ranch Hand Scavenger Hunt
expand Greenhorn Scavenger Hunt

Recent posts by Zafar Hakim

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
Greeting everyone!

Problem:
I have a page with data table --- I open a new modal dialog window (window.showModalDialog) on click of menu item on the row --> It opens the page to view details of the selected item --- When I close it and select different row of the table(in the first page) and open to see the details it shows the previous data.

The data on the form fields are populated from a backing bean which is session scoped. I am sure the backing bean is updated with new data(checked it while debug ). Only that it is not displayed/refreshed in the page rendered again.

Thanks for your time and appreciate any help on this.

Regards,
Zafar Hakim
12 years ago
JSF
Bauke,
thanks for your suggestion..
12 years ago
JSF
Does any one know solution to this problem. I too am facing similar problem.

Problem:
I have a page with data table --- I open a new modal dialog window (window.showModalDialog) on click of menu item on a page --> It opens the page to view details of the selected item --- When I close it and select different row of the table(in the first page) and open to see the details it shows the previous data.

The data on the form fields are populated from a backing bean which is session scoped. I am sure the backing bean is updated with new data(checked it while debug ). Only that it is not displayed/refreshed in the page rendered.

Thanks for your time and hoping to get your feedback on this.

Regards,
Hakim
12 years ago
JSF

Does any one know solution to this problem. I too am facing similar problem.

Problem:
I have a page with data table --- I open a new modal dialog window (window.showModalDialog) on click of menu item on a page --> It opens the page to view details of the item. When I close it and select different row of the table and open to see the details it shows the previous data.

The data on the form fields are populated from a backing bean which is session scoped. I am sure the backing bean is updated with new data. Only that it is not displayed/refreshed in the page rendered.

Thanks for your time.

Regards,
Hakim
12 years ago
JSF
Problem:
I Have a jsf component which is basically made of html Table. Each cell contains an image. On click of the image I want to change the image using AJAX. I am using Ajax4jsf from RichFaces and I am able to call a jsFunction which will be invoking a action(method) from the bean class. In the action method I decide depending on some condition which image to show. I am changing the image value in the object HTMLGraphicImage ( from which I am displaying the table, provided by RichFaces ) which is a member of the bean. Now I want to see this is reflected at the client. How do we rerender the image here when image source changes?

Code in action method looks something like this:
*********************************************************
...
...
hgImage= (a bean).getHgImage;

hgImage.setValue(imgSrc); // imgSrc changed
...
AjaxContext ajaxContext = AjaxContext.getCurrentInstance();
if(ajaxContext != null && ajaxContext.isAjaxRequest()) {

// WANT to Add the image with id "hgImage.getId()" to the list that are to be re-rendered.
}
*********************************************************

Any help is highly appreciated.

Regards,
Zafar
12 years ago
JSF