473,480 Members | 1,498 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

How to make a scrollable table?

157 New Member
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
6 20534
abctech
157 New Member
Here is the snapshot
Jan 27 '07 #2
drhowarddrfine
7,435 Recognized Expert Expert
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
7,435 Recognized Expert Expert
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
abctech
157 New Member
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
abctech
157 New Member
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, 772 views)
Jan 28 '07 #6
abctech
157 New Member
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

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

Similar topics

1
11257
by: Muralidhar | last post by:
Hi, I'm having a jsp page which is having a table and a div tag.The heading such as a radio button,Name , Age etc. are fixed.Only the data under it is scrolling. So i've set one table for header...
7
11634
by: Matt Kruse | last post by:
This is a typical layout, but I have specific requirements. I'm trying to figure out a) if it's possible to meet the requirements and b) if so, how. +---------------+ | header |...
25
36317
by: Michael Schuerig | last post by:
I'm trying to do something seemingly very simple, but it's brought me close to crushing my head on the keyboard. All I want is a table where the head row is fixed and the body columns below are...
11
24050
by: Matt Kruse | last post by:
This is a common requirement - "freeze panes" in a table, so that some header rows and some columns on the left are frozen while the body content scrolls. This makes large tables more usable on...
1
3026
by: david.joyce | last post by:
I am aware that v7 Static Scrollable Cursors do not work with pseudo-conversational CICS because of the temp work file being destroyed but will v8 Dynamic Scrollable Cursors work with...
1
16924
by: since | last post by:
I figured I would post my solution to the following. Resizable column tables. Search and replace values in a table. (IE only) Scrollable tables. Sortable tables. It is based on a lot...
3
2346
by: anniejose | last post by:
I am facing an issue in displaying a calendar popup on click of a calendar icon in one of my JSP pages. In my JSP page I have 3 calendar icons in a horizontally scrollable table. If I click the 1st...
5
1984
by: phub11 | last post by:
Hi all, This is a pretty simple question, but after some hunting on the web I can't find the answer: I have a table embedded in a scrollable div, and have each cell anchored so that when a...
0
7044
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7087
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
6741
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
6944
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
1
4782
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
0
2995
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
2985
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
0
1300
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
1
563
muto222
php
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.