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

 <%

out.write("<html>\r\n");

out.write("<head>\r\n");

out.write("<style type=text/css>table.T1 {overflow: scroll}</style>");

out.write("<layer id = divStayTopLeft>");

out.write("<div align = right>");

out.write("<table class = T1 align = right border = 1 width=450 cellspacing = 0 cellpadding = 0 >");

out.write("<tr><td bgcolor=#FFFFCC><b>Candidate Name</b></td>");

out.write("<td bgcolor=#FFFFCC><b>Batch-ID</b></td>");

out.write("<td bgcolor=#FFFFCC><b>Reg Amt</b></td>");    

out.write("<td bgcolor=#FFFFCC><b>Total Fees </b></td>");

out.write("<td bgcolor=#FFFFCC><b>Balance</b></td></tr>");    
 
// Here I have the code for getting the backend-table's record and appending it to the Html table as a new row.
 
out.write("</table>");

out.write("</div>");

out.write("</layer>");

out.write("</head>");

out.write("</html>");        

%>

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

Subscribe Reply

20552

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head><title></title>

<style type=text/css>

    #divStayTopLeft{

        height:100px;

        overflow:scroll

        }

    table.T1 {

        text-align:center;

        font-weight:bold;

        float:right;

        width:450px;

        }
 
    .highlighted {

        background-color:#ffffcc;

        border:1px solid black;

        }
 
</style>

</head>

<body>
 
<div id = "divStayTopLeft">

<div>

<table class = T1 cellspacing = 0 cellpadding = 0 >

<tr><td class="highlighted">Candidate Name</td>

<td class="highlighted">Batch-ID</td>

<td class="highlighted">Reg Amt</td>

<td class="highlighted">Total Fees</td>

<td class="highlighted">Balance</td></tr>

<tr><td>hello</td></tr>

<tr><td>hello</td></tr>

<tr><td>hello</td></tr>

</table>

</div>

</div>
 
</body>

</html>

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..stil l 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

 <%@ page language = "JAVA" import = "java.sql.*"  %>

<html>

<head>

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title></title>

<style type=text/css>

    #divStayTopRight{

        height:100px;

        overflow:scroll

        }

    table.T1 {

        text-align:center;

        font-weight:bold;

        float:right;

        width:450px;

        }
 
    .highlighted {

        background-color:#ffffcc;

        border:1px solid black;

        }    

</style>

<script language = “javascript”>

// some clientside validation code

</script>

</head>

<body>

<form name = “Students”>

<table>

<!—This is the main layout table and I have fixed my entire webpage in to this table -->

</table>

</form>

<%

    PreparedStatement pst ; 

    ResultSet rs = null ;

 try

 {

   pst = con.prepareStatement(“select * from Students”);    

   rs = pst.executeQuery();
 
  if (rs != null)

  {            

      out.write("<div id = divStayTopRight>");

      out.write("<div>");

      out.write("<table class = T1 border = 1 cellspacing=0 cellpadding=2>");

      out.write("<tr>");

      out.write("<th  bgcolor=lightgrey>Candidate Name</th>");

      out.write("<th  bgcolor=lightgrey>Batch-ID</th>");

      out.write("<th  bgcolor=lightgrey>Reg Amt</th>");

      out.write("<th  bgcolor=lightgrey>Total Fees </th>");

      out.write("<th  bgcolor=lightgrey>Balance</th>");

      out.write("</tr>");    
 
      // Here I have the code for getting the backend record and appending it to the Html table

      while(rs.next())

       {                

               out.write("<tr><td >” + rs.getString(1) + "</b></a></td>");

               out.write("<td>" + rs.getString(2) + "</td>");

               out.write("<td>" + rs.getLong(3) + "</td>");

               out.write("<td>" + rs.getLong(4) + "</td>");

               out.write("<td>" + rs.getLong(5)+ "</td></tr>");    

       }        

       out.write("</table>");    

       out.write("</div>");

       out.write("</div>");                

  }

  rs.close();    

  pst.close();

 }

 catch(Exception e)

 {

     e.printStackTrace();

 }    

%>    

</body>

</html>

and this is the script I came across to make a table float on the webpage:-

Expand|Select|Wrap|Line Numbers

 <script>

if (!document.layers)

document.write('<div id="divStayTopLeft" style="position:absolute">')

</script>
 
<layer id="divStayTopLeft">
 
<!--EDIT BELOW CODE TO YOUR OWN MENU-->

<table border="1" width="130" cellspacing="0" cellpadding="0">

  <tr>

    <td width="100%" bgcolor="#FFFFCC">

      <p align="center"><b><font size="4">Menu</font></b></td>

  </tr>

  <tr>

    <td width="100%" bgcolor="#FFFFFF">

      <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>

       <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>

       <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>

       <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>

       <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>

  </tr>

</table>

<!--END OF EDIT-->
 
</layer>
 
<script type="text/javascript">
 
/*

Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)

Script featured on/available at http://www.dynamicdrive.com/

This notice must stay intact for use

*/
 
//Enter "frombottom" or "fromtop"

var verticalpos="frombottom"
 
if (!document.layers)

document.write('</div>')
 
function JSFX_FloatTopDiv()

{

    var startX = 3,

    startY = 150;

    var ns = (navigator.appName.indexOf("Netscape") != -1);

    var d = document;

    function ml(id)

    {

        var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];

        if(d.layers)el.style=el;

        el.sP=function(x,y){this.style.left=x;this.style.top=y;};

        el.x = startX;

        if (verticalpos=="fromtop")

        el.y = startY;

        else{

        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

        el.y -= startY;

        }

        return el;

    }

    window.stayTopLeft=function()

    {

        if (verticalpos=="fromtop"){

        var pY = ns ? pageYOffset : document.body.scrollTop;

        ftlObj.y += (pY + startY - ftlObj.y)/8;

        }

        else{

        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;

        ftlObj.y += (pY - startY - ftlObj.y)/8;

        }

        ftlObj.sP(ftlObj.x, ftlObj.y);

        setTimeout("stayTopLeft()", 10);

    }

    ftlObj = ml("divStayTopLeft");

    stayTopLeft();

}

JSFX_FloatTopDiv();

</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

image007.jpg (13.4 KB, 775 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

Similar topics

11271

Setting Scrollable position for div tag

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 which are fixed. Then a div tag inside which there is a table which is used for scrolling the data.When i select a radio i'm submitting the form.The problem is here i'm able to set focus to the radio button, but i'm unable to maintain the...

Javascript

11653

Layout: Full-screen table w/ scrollable content? Cross-browser problems...

by: Matt Kruse | last post by:

HTML / CSS

36366

Displaying a scrollable table with fixed head?

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 scrollable (with the ordinary scrollbars, no less). Whatever I try, the columns in the head and the body aren't aligned; the widths are computed independently which gives a completely ragged look. Michael --

HTML / CSS

24085

"Freeze Panes" in table to make body scrollable

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 screen. There are a number of solutions available. For example, http://www.litotes.demon.co.uk/example_scripts/tableScroll.html I'm just wondering if anyone knows of a "latest and greatest" script to solve this problem. My requirement at the...

Javascript

3049

v8 Dynamic Scrollable Cursors

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 pseudo-conversational CICS due to these cursors directly using the base table?

DB2 Database

16974

Resizable, sortable, findable and scrollable HTML table

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 examples I found on the web. Works in IE and mozilla. http://www.imaputz.com/cssStuff/bigFourVersion.html

Javascript

2369

Displaying a popup in a scrollable table

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 calendar icon, the calendar gets popped up. Then if I click the 2nd calendar icon, the image gets popped up properly. Now I have to scroll to the right to view the 3rd calendar icon. Now when I click the 3rd calendar icon, the calendar image gets...

Javascript

1992

Positioning anchor/cell contents within a scrollable div

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 click on a button in another table, the div is scrolled to the corresponding cell of the first table. However, it is positioned such that the cell's contents start at the top-left of the window. Can I add code which centers the contents of the...

Javascript

9273

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10032

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9841

The easy way to turn off automatic updates for Windows 10/11

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9711

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8712

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6534

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

3805

transfer the data from one system to another through ip address

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 we have to send another system

C# / C Sharp

3358

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2666

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General