By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,766 Members | 1,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,766 IT Pros & Developers. It's quick & easy.

How to make a scrollable table?

100+
P: 157
Helo Friends,

I am a novice Java programmer, I'm working with Jsp + Javascript to develop a web application.I only have basic Html knowledge and I mostly use "FrontPage" to develop my web pages but currently my webpage requires some dHtml and CSS fundamentals hence I'm posting a query in this forum expecting some guidance,

I have a floating table in my webpage which I achieved using JS. I have written Jsp code to get database records one by one and append it to this table(i.e basically the table is being created on the fly), its all good till here but now I need to make this table scrollable and thats where I'm stuck! I have attached a snapshot of my webpage here and my code(Jsp) is as below:-

Expand|Select|Wrap|Line Numbers
  1. <%
  2. out.write("<html>\r\n");
  3. out.write("<head>\r\n");
  4. out.write("<style type=text/css>table.T1 {overflow: scroll}</style>");
  5. out.write("<layer id = divStayTopLeft>");
  6. out.write("<div align = right>");
  7. out.write("<table class = T1 align = right border = 1 width=450 cellspacing = 0 cellpadding = 0 >");
  8. out.write("<tr><td bgcolor=#FFFFCC><b>Candidate Name</b></td>");
  9. out.write("<td bgcolor=#FFFFCC><b>Batch-ID</b></td>");
  10. out.write("<td bgcolor=#FFFFCC><b>Reg Amt</b></td>");    
  11. out.write("<td bgcolor=#FFFFCC><b>Total Fees </b></td>");
  12. out.write("<td bgcolor=#FFFFCC><b>Balance</b></td></tr>");    
  13.  
  14. // Here I have the code for getting the backend-table's record and appending it to the Html table as a new row.
  15.  
  16. out.write("</table>");
  17. out.write("</div>");
  18. out.write("</layer>");
  19. out.write("</head>");
  20. out.write("</html>");        
  21. %>
The above code is supposed to make my table scrollable, but it doesn't work, can someone check it for me please and advice me how to go about it? Or if any other approach of carrying this out please suggest!
Jan 27 '07 #1
Share this Question
Share on Google+
6 Replies


100+
P: 157
Here is the snapshot
Jan 27 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
I have a few minutes right now and I'll work on this. Your code is very, very, very out of date. For example, there is no such thing as a <layer> tag and hasn't been used since 1998, I think.
Jan 27 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
This is as far as I can go right now. Hope it can get you started.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head><title></title>
  5. <style type=text/css>
  6.     #divStayTopLeft{
  7.         height:100px;
  8.         overflow:scroll
  9.         }
  10.     table.T1 {
  11.         text-align:center;
  12.         font-weight:bold;
  13.         float:right;
  14.         width:450px;
  15.         }
  16.  
  17.     .highlighted {
  18.         background-color:#ffffcc;
  19.         border:1px solid black;
  20.         }
  21.  
  22. </style>
  23. </head>
  24. <body>
  25.  
  26. <div id = "divStayTopLeft">
  27. <div>
  28. <table class = T1 cellspacing = 0 cellpadding = 0 >
  29. <tr><td class="highlighted">Candidate Name</td>
  30. <td class="highlighted">Batch-ID</td>
  31. <td class="highlighted">Reg Amt</td>
  32. <td class="highlighted">Total Fees</td>
  33. <td class="highlighted">Balance</td></tr>
  34. <tr><td>hello</td></tr>
  35. <tr><td>hello</td></tr>
  36. <tr><td>hello</td></tr>
  37. </table>
  38. </div>
  39. </div>
  40.  
  41. </body>
  42. </html>
  43.  
Jan 27 '07 #4

100+
P: 157
I have a few minutes right now and I'll work on this. Your code is very, very, very out of date. For example, there is no such thing as a <layer> tag and hasn't been used since 1998, I think.
Helo and thanks a lot for your time and inputs,much appreciated!

To be honest I just have basic Html knowledge and I have never worked with the <div> and <layer> tags before!

this is the script that I've incorporated into my webpage to give my Html-table a floating-effect, and its working fine too but the problem is that now I need the table to be scrollable as well.I tried to apply the CSS -overflow property to this table as one can see in my scriptlet-code..but it doesnt work..not sure if thats even the right way to use 'overflow' !

Presently I'm looking into the code that you have provided here but I still dont know how to place it into my Jsp scriptlet..still working on it!
Jan 28 '07 #5

100+
P: 157
I made the changes in my page.
Now my table is scrollable but unlike earlier it doesnt float,it just appears at the bottom of the page!

This is how my entire webpage(JSP) looks like now:-

Expand|Select|Wrap|Line Numbers
  1. <%@ page language = "JAVA" import = "java.sql.*"  %>
  2. <html>
  3. <head>
  4. <meta name="GENERATOR" content="Microsoft FrontPage 5.0">
  5. <meta name="ProgId" content="FrontPage.Editor.Document">
  6. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  7. <title></title>
  8. <style type=text/css>
  9.     #divStayTopRight{
  10.         height:100px;
  11.         overflow:scroll
  12.         }
  13.     table.T1 {
  14.         text-align:center;
  15.         font-weight:bold;
  16.         float:right;
  17.         width:450px;
  18.         }
  19.  
  20.     .highlighted {
  21.         background-color:#ffffcc;
  22.         border:1px solid black;
  23.         }    
  24. </style>
  25. <script language = “javascript”>
  26. // some clientside validation code
  27. </script>
  28. </head>
  29. <body>
  30. <form name = “Students”>
  31. <table>
  32. <!—This is the main layout table and I have fixed my entire webpage in to this table -->
  33. </table>
  34. </form>
  35. <%
  36.     PreparedStatement pst ; 
  37.     ResultSet rs = null ;
  38.  try
  39.  {
  40.    pst = con.prepareStatement(“select * from Students”);    
  41.    rs = pst.executeQuery();
  42.  
  43.   if (rs != null)
  44.   {            
  45.       out.write("<div id = divStayTopRight>");
  46.       out.write("<div>");
  47.       out.write("<table class = T1 border = 1 cellspacing=0 cellpadding=2>");
  48.       out.write("<tr>");
  49.       out.write("<th  bgcolor=lightgrey>Candidate Name</th>");
  50.       out.write("<th  bgcolor=lightgrey>Batch-ID</th>");
  51.       out.write("<th  bgcolor=lightgrey>Reg Amt</th>");
  52.       out.write("<th  bgcolor=lightgrey>Total Fees </th>");
  53.       out.write("<th  bgcolor=lightgrey>Balance</th>");
  54.       out.write("</tr>");    
  55.  
  56.       // Here I have the code for getting the backend record and appending it to the Html table
  57.       while(rs.next())
  58.        {                
  59.                out.write("<tr><td >” + rs.getString(1) + "</b></a></td>");
  60.                out.write("<td>" + rs.getString(2) + "</td>");
  61.                out.write("<td>" + rs.getLong(3) + "</td>");
  62.                out.write("<td>" + rs.getLong(4) + "</td>");
  63.                out.write("<td>" + rs.getLong(5)+ "</td></tr>");    
  64.        }        
  65.        out.write("</table>");    
  66.        out.write("</div>");
  67.        out.write("</div>");                
  68.   }
  69.   rs.close();    
  70.   pst.close();
  71.  }
  72.  catch(Exception e)
  73.  {
  74.      e.printStackTrace();
  75.  }    
  76. %>    
  77. </body>
  78. </html>
and this is the script I came across to make a table float on the webpage:-

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. if (!document.layers)
  3. document.write('<div id="divStayTopLeft" style="position:absolute">')
  4. </script>
  5.  
  6. <layer id="divStayTopLeft">
  7.  
  8. <!--EDIT BELOW CODE TO YOUR OWN MENU-->
  9. <table border="1" width="130" cellspacing="0" cellpadding="0">
  10.   <tr>
  11.     <td width="100%" bgcolor="#FFFFCC">
  12.       <p align="center"><b><font size="4">Menu</font></b></td>
  13.   </tr>
  14.   <tr>
  15.     <td width="100%" bgcolor="#FFFFFF">
  16.       <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
  17.        <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
  18.        <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
  19.        <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
  20.        <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
  21.   </tr>
  22. </table>
  23. <!--END OF EDIT-->
  24.  
  25. </layer>
  26.  
  27.  
  28. <script type="text/javascript">
  29.  
  30. /*
  31. Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
  32. Script featured on/available at http://www.dynamicdrive.com/
  33. This notice must stay intact for use
  34. */
  35.  
  36. //Enter "frombottom" or "fromtop"
  37. var verticalpos="frombottom"
  38.  
  39. if (!document.layers)
  40. document.write('</div>')
  41.  
  42. function JSFX_FloatTopDiv()
  43. {
  44.     var startX = 3,
  45.     startY = 150;
  46.     var ns = (navigator.appName.indexOf("Netscape") != -1);
  47.     var d = document;
  48.     function ml(id)
  49.     {
  50.         var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
  51.         if(d.layers)el.style=el;
  52.         el.sP=function(x,y){this.style.left=x;this.style.top=y;};
  53.         el.x = startX;
  54.         if (verticalpos=="fromtop")
  55.         el.y = startY;
  56.         else{
  57.         el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
  58.         el.y -= startY;
  59.         }
  60.         return el;
  61.     }
  62.     window.stayTopLeft=function()
  63.     {
  64.         if (verticalpos=="fromtop"){
  65.         var pY = ns ? pageYOffset : document.body.scrollTop;
  66.         ftlObj.y += (pY + startY - ftlObj.y)/8;
  67.         }
  68.         else{
  69.         var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
  70.         ftlObj.y += (pY - startY - ftlObj.y)/8;
  71.         }
  72.         ftlObj.sP(ftlObj.x, ftlObj.y);
  73.         setTimeout("stayTopLeft()", 10);
  74.     }
  75.     ftlObj = ml("divStayTopLeft");
  76.     stayTopLeft();
  77. }
  78. JSFX_FloatTopDiv();
  79. </script>
Now I need to add the above code in my scriptlet to give my table a floating effect! Not sure how to achieve that..Still working on it !
Attached Images
File Type: jpg image007.jpg (13.4 KB, 730 views)
Jan 28 '07 #6

100+
P: 157
The issue is resolved now using <iframe> and <div>, the iframe is scrollable as well as floating!
here is the view

Thanks to this forum for all the help!
Jan 29 '07 #7

Post your reply

Sign in to post your reply or Sign up for a free account.