asked on

how to dynamically change table height and make it scroll

I have the following javascript that worked perfectly for a div container. Whenever the browser window resized, the height of the DIV resized with it and prevented the browser's vertical scrollbar from appearing. The div had a vertical scrollbar. The idea is that I want the div to scroll when content goes too long, and never the browser window. So this worked:

window.onresize =
            function () {
                if (document.body) {
                    document.getElementById("divMain").style.height = (document.body.clientHeight - 220) + "px";
                    //document.getElementById("tblMain").style.height = (document.body.clientHeight - 220) + "px";
                }
            }

Open in new window

But then I had to change from a div to a table -- but I want to achieve the same thing. I can't get it to work with the table. I tried wrapping the table in a div and that didn't work either.

Please help.

leakim971

Have you some html code to do some test please?

SweatCoder

ASKER

Hardly seems necessary, but here it is:

<table id="tblMain" cellpadding="2" cellspacing="2">
...
</table>

So there's too much content in this table, and you would have to scroll the browser down to see it all. But I have to avoid browser window scroll, and instead I want the table to have its own vertical scrollbar.

leakim971

I asked you the HTML content to see it initialy working.
I get the vertical bar with the following :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">

		window.onresize = function () {
			if(document.body) {
			document.getElementById("divMain").style.height = (document.body.clientHeight - 220) + "px";
			//document.getElementById("tblMain").style.height = (document.body.clientHeight - 220) + "px";
			}
		}

</script>
</head>
<body>
<!--<table id="tblMain" cellpadding="2" cellspacing="2">
<tr>
<td>--><div id="divMainHuge"> Page Text Support

 This is a proposal for the huge page text extension support. The main changes are a kernel patch, a glibc kernel, the Linux binutils patches:

This directory contains the Linux binutils patches.
This directory contains a glibc patch.
This directory contains a kernel patch.
The following features are implemented:

The changes to the psABI are
To the section attribute flags, add SHF_GNU_HUGE_PAGE

#define SHF_GNU_HUGE_PAGE 0x02000000

described as follows:

SHF_GNU_HUGE_PAGE

The section contains text that will be placed in huge TLB pages at the runtime. If an implementation doesn't support huge TLB pages, it should be ignored.
 
To Special Sections, add the following:

.text..huge, type SHT_PROGBITS, attributes SHF_ALLOC+SHF_EXECINSTR+SHF_GNU_HUGE_PAGE

.rodata..huge, type SHT_PROGBITS, attributes SHF_ALLOC+SHF_GNU_HUGE_PAGE

.text..huge

This section holds text that contribute to the program's memory image. The section should be placed in huge TLB pages. If an implementation doesn't support huge TLB pages, it should be treated as a normal .text section.

.rodata..huge

This section holds read-only data that contribute to the program's memory image. The section should be placed in huge TLB pages. If an implementation doesn't support huge TLB pages, it should be treated as a normal .rodata section.
 
To the Program Header section, add a segment type PT_GNU_HUGE_PAGE:

#define PT_GNU_HUGE_PAGE (PT_LOOS + 0x474e553)

The array element specifies the location of a huge TLB page segment. The interpretation of the huge TLB page segment is implementation-dependent. If an implementation doesn't support huge TLB pages, it can be ignored. The PT_GNU_HUGE_PAGE segment should only be used in dynamic or static executables. If a shared library or position independent executable contain such a segment, the behavior is undefined. An executable can only have at most one PT_GNU_HUGE_PAGE segment and it must precede any PT_LOAD segments in the program header.
Special sections:
.text..huge.*. It has the same section type and attribute as .text..huge.
.gnu.linkonce.ht.*. It has the same section type and attribute as .text..huge. If linker sees more than one section with the same name, only one section will be kept.
.rodata..huge.*. It has the same section type and attribute as .rodata..huge.
.gnu.linkonce.hr.*. It has the same section type and attribute as .rodata..huge. If linker sees more than one section with the same name, only one section will be kept.
Assembler will set the proper type and attribute for special sections listed above, regardless what the assembly directive specifies. No other sections with the SHF_GNU_HUGE_PAGE attribute are allowed.
By default, for executable outputs, linker will group together input .text..huge, .text..huge.* and  .gnu.linkonce.ht.* sections into a single output .text..huge section, and group together input .rodata..huge, .rodata..huge.* and  .gnu.linkonce.hr.* sections into a single output .rodata..huge section. A customized linker script can be used to put other text sections into the output .text..huge section and other read-only data sections into the output .rodata..huge section.
By default, sections from system libraries won't be put in the huge TLB page. A customized linker script can be used to remove this limit. But it has to ensure that the bootstrap code remains in the normal page.
The output .text..huge and .rodata..huge sections will be placed in a separate PT_LOAD segment and aligned to the maximum huge TLB page size supported by the architecture. This PT_LOAD segment will have the same addresses, offset and sizes as the PT_GNU_HUGE_PAGE segment, but its alignment will be set to the maximum normal page size.
Run time support:
The kernel loader should skip final mapping of the PT_LOAD segment specified by the PT_GNU_HUGE_PAGE segment. It should pass the huge TLB page size in the auxiliary vector, AT_HUGEPAGESZ and the pointer to the PT_GNU_HUGE_PAGE segment in the program header in another auxiliary vector, AT_HUGEPAGEPHDR.
If there are relocations in the loadable huge TLB page segment, the behavior is undefined.
The run time start up code will do the followings:
Locate the PT_GNU_HUGE_PAGE segment by checking AT_HUGEPAGEPHDR for executable. If it isn't available, skip the steps below.
If AT_HUGEPAGESZ isn't available, treat the PT_GNU_HUGE_PAGE segment as the normal PT_LOAD segment.
If AT_HUGEPAGESZ > the p_align field of the PT_GNU_HUGE_PAGE segment, treat the PT_GNU_HUGE_PAGE segment as the normal PT_LOAD segment. It is due to the PT_GNU_HUGE_PAGE segment will be rounded up to the next integral number of full pages of size p_align. A larger page size may affect memory layout.
Check the environment variable, LD_GNU_HUGE_PAGE_FS, for the huge TLB page file system. It will be default to /mnt/hugepage if it isn't set.
Lock the executable to prevent other processes from accessing it.
Create a backup file under /mnt/hugepage for the PT_LOAD segment specified by the with filename, /mnt/hugepage/st_dev/st_ino/text, st_dev and st_ino are the device and inode of the executable.
If the /mnt/hugepage doesn't exist or it isn't mounted, unlock the executable and treat the PT_GNU_HUGE_PAGE segment as the normal PT_LOAD segment.
If the backup file doesn't exist or is different from the executable, run time should mmap the backup file with the address and the size specified by the PT_LOAD segment and copy it from the executable to the mmaped area. Run time should set the time stamps of the backup file the same as the executable and unlock the executable after copying is finished.
If mmap fails on the backup file, unlock the executable and treat the PT_GNU_HUGE_PAGE segment as the normal PT_LOAD segment.
If the backup file exists and its time stamp is the same as the one in the executable, the existing backup file will be mmaped and the executable will be unlocked.
The user is ultimately responsible for maintaining the consistency between the executable and its backup file under /mnt/hugepage. Run time will make no attempt other than checking time stamp when comparing the executable/shared library and its backup file.
This should be backward compatible with existing kernel and the Linux C library if kernel supports mapping the PT_GNU_HUGE_PAGE segment as the normal PT_LOAD segment. Otherwise, the executable with the PT_GNU_HUGE_PAGE segment will abort if the huge TLB page isn't available for any reason.
There is a new linker option, -z huge, which will create a PT_GNU_HUGE_PAGE segment in executable automatically.</div><!--</td>
</tr>
</table>-->
</body>
</html>

Open in new window

dwkd

well this should work for table height:
document.getElementById("tblMain").style.height = (document.body.clientHeight - 220) + "px";
or
document.getElementsByTagName("table")[0].style.height = (document.body.clientHeight - 220) + "px";

but where's the overflowY in your function which makes it scroll?
document.getElementById("tblMain").style.overflowY="scroll";

SweatCoder

ASKER

dwkd, this didn't do anything:

document.getElementById("tblMain").style.height = (document.body.clientHeight - 220) + "px";
document.getElementById("tblMain").style.overflowY = "scroll";

leakim971, I'd like to try out your solution, but I don't understand why you commented out key table elements. It seems like you're saying "don't use a table, use a div". If that's the case, I already know it will work with a div, but I have to use a table in this situation (as mentioned in original post). Please advise.

Thanks.

leakim971

It's not a solution, just a try to test you initial working code.

ASKER CERTIFIED SOLUTION

SweatCoder

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SweatCoder

ASKER

I found the answer on my own.

dwkd

....as I said you needed 'overflow'...
and by the way you said you want to move from div to table yet your solution involves overflowing a div still...I'm confused :)

SweatCoder

ASKER

dwkd,

Your proposed solution didn't do anything:

document.getElementById("tblMain").style.height = (document.body.clientHeight - 220) + "px";
document.getElementById("tblMain").style.overflowY = "scroll";

Though it is true that I ended up using a div because I couldn't get the table by itself to do the behavior I needed. A table inside a div was perfect.

I appreciate your attempt to help me, but your solution just didn't work.

dwkd

glad u got it taken care of :)