Solved

Keeping one column static while other scroll

Posted on 2003-12-04
13
669 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Expert Comment

by:langjt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Expert Comment

by:langjt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
not too shabby!
needs neating sure, but it always does ;)

Jody
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 175 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Thank You So much Experts for ur help.
That was great.
;)
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Zoom web page in asp.net 2 34
HTML table 7 54
Include css using javascript/jquery in html 1 49
FTP File permissions 1 27
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.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now