Solved

Keeping one column static while other scroll

Posted on 2003-12-04
13
675 Views
Last Modified: 2010-04-09
I have a JSP page in which I am displaying data in the form of HTML table.
<TABLE>
  <TR>
       <TH>ID</TH>
       <TH>NAME</TH>
      ...  
      <TH>ADDRESS</TH>
     </TR>
  <TR>
       <TD><%=rs.getString("id")%></TD>
       <TD><%=rs.getString("name")%></TD>
       ...
       <TD><%=rs.getString("address")%></TD>
   </TR>
  </TABLE>
The problem is there are large number of columns. To view all of them the user needs to scroll horizontally and then he/she looses view of the primary key column.
Say "Address" is the 15 column. To view it user scrolls horizontally but then he/she is not able to make out for which "id" this address is. I want that the "id" column always stays where it is while others move horizontally.
Plz help as to how this  can be done.
0
Comment
Question by:anna_123
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
  • +3
13 Comments
 
LVL 3

Expert Comment

by:daveroydunn
ID: 9881408
A straight forward method would be to have an ID column every few columns.
There are other methods that are more complex but I think that going for the simple solution is often the best.
0
 

Author Comment

by:anna_123
ID: 9881684
Thanks for ur suggestion.
Already did this. But was rejected, reason being there are already too many columns it only increases the number. Secondly, it's a bit confusing for users to
find the id column repeated in between. So in hunt for a better method
0
 
LVL 9

Expert Comment

by:pepsichris
ID: 9881792
I'd suggest some sort of DHTML floating menu.  They're usually designed to follow the page as it goes down, but you should be able to tailor it so it goes horizontally...

http://www.web-friend.com/services/samples/dhtmltopfloat.html

http://javascript.internet.com/navigation/portable-menu.html
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Expert Comment

by:langjt
ID: 9882217
Easiest solution would be to make a frame with the side of the frame to have the ID, and the other to have the rest oft he table, although this will not work very well if you also scroll vertically.

anyways, thats my 2 cents.

Jody
0
 

Expert Comment

by:langjt
ID: 9882232
just thought, maybe you could embed an excel docuent in the webpage? dont ask me how to do it, but it would be an interesting thought. Because with excel, you can make some column stationary so that they are always visible.

thats my other 2 cents :D

Jody
0
 
LVL 9

Expert Comment

by:pepsichris
ID: 9882282
I think Jody's second idea could well work - in most versions of Excel you can simply select "Save as html" off the File menu.  It gives you really messy coding, but it does the job.  I think Dreamweaver MX has a feature for "repairing" Microsoft coding, so maybe use them together?
0
 

Expert Comment

by:langjt
ID: 9882288
interesting, i didnt know you could actually save an excel sheet as html.. gonna try that and see if it works.
let ya know how it works out.
0
 

Expert Comment

by:langjt
ID: 9882295
okay, it works, but the stationary column feature goes away when you do it. i think actually embedding it would be the way to go so far, if that is feasible.
0
 
LVL 9

Assisted Solution

by:pepsichris
pepsichris earned 82 total points
ID: 9882403
This seems to work.  Obviously needs neatening up etc.

<html>
<head>
<title>Thing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function setVariables() {
if (navigator.appName == "Netscape") {
v=".left=";
dS="document.";
sD="";
x="window.pageXOffset";
}
else {
v=".pixelLeft=";
dS="";
sD=".style";
x="document.body.scrollLeft";
   }
}
function checkLocation() {
object="object1";
xx=eval(x);
eval(dS+object+sD+v+xx);
setTimeout("checkLocation()",10);
}
//  End -->
</script>


</head>



<body bgcolor="#FFFFFF" link="#0000CC" vlink="#0000CC" alink="#0000CC" OnLoad="setVariables();checkLocation()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="object1" style="position:absolute; left:0px; top:0px; z-index:2">
  <table width=20 border=0 cellspacing=0 cellpadding=0 bgcolor="#9999FF">
    <tr align="center">
      <td>1</td>
</tr>
    <tr align="center">
      <td>2</td>
</tr>
    <tr align="center">
      <td>3</td>
</tr>
    <tr align="center">
      <td>4</td>
</tr>
    <tr align="center">
      <td>5</td>
</tr>
    <tr align="center">
      <td>6</td>
</tr>
    <tr align="center">
      <td>7</td>
</tr>
    <tr align="center">
      <td>8</td>
</tr>
</table>
</div>
<table width="200%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
  <tr>
    <td width="20" />
    <td>khklh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
    <td>klhlkh</td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>
0
 

Expert Comment

by:langjt
ID: 9882419
not too shabby!
needs neating sure, but it always does ;)

Jody
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 175 total points
ID: 9882848
This will make genration a little more difficult, but it will give you smooth scrolling without re-positioning the column.  Works for IE and Mozilla based browsers.  The beauty is that it is pure HTML with a little CSS, so it will still function correctly even if the user has disabled scripting:

<html>
<head>
   <title> scrollable table</title>
<body>
      <div style="position:absolute;top:60;left:0;width:100">
      <table width="100" frame="border">
      <tr style="height:60"><td>Row 1</td></tr>
      <tr style="height:60"><td>Row 2</td></tr>
      <tr style="height:60"><td>Row 3</td></tr></table></div>
      <div class="maindiv" STYLE="position:absolute;left:100;top:60;overflow:scroll;width:250px">
         <table frame="border">
         <tr>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
         </tr>
         <tr>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
         </tr>
         <tr>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
            <td height=60>Cd&</td>
            <td height=60>:^)</td>
            <td height=60>colC</td>
            <td height=60>xxxx</td>
            <td height=60>:^)</td>
            <td height=60>Cd&</td>
         </tr>
      </table>
   </div>
</body>
</html>
      
Cd&

0
 
LVL 11

Assisted Solution

by:Zontar
Zontar earned 73 total points
ID: 9886704
CD, your CSS is invalid; non-zero lengths require units of measurement.

Also, there's no need for absolutel positioning or all that height=60 bloativity, either, when three lines of CSS will do the job:

<html>
<style type="text/css">
  div.maindiv { overflow:scroll; width:250px; }
 
  table#outer td { height:60px; padding:0px; }
 
  table#inner td { height:60px; }
</style>
<head>
   <title> scrollable table</title>
<body>
      <table id="outer" frame="border">
      <tr>
        <td nowrap>Row 1</td>
        <td rowspan="3">        
          <div class="maindiv">
             <table id="inner" frame="border">
             <tr>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
             </tr>
             <tr>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
             </tr>
             <tr>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
                <td>Cd&</td>
                <td>:^)</td>
                <td>colC</td>
                <td>xxxx</td>
                <td>:^)</td>
                <td>Cd&</td>
             </tr>
          </table>
       </div>
        </td></tr>
      <tr nowrap><td>Row 2</td></tr>
      <tr nowrap><td>Row 3</td></tr></table>
</body>
</html>

Inline styles are evil and should be avoided.
0
 

Author Comment

by:anna_123
ID: 9887135
Thank You So much Experts for ur help.
That was great.
;)
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question