?
Solved

Keeping one column static while other scroll

Posted on 2003-12-04
13
Medium Priority
?
683 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
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 328 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 700 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 292 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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

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.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

807 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