Really long list of items on the left side of a page and a short message on the right.

[UJ]

I have a long list of items that the user will be able to select from. When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got a datagrid set up with the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.

 

[Guest]

I have a very similar setup in a webpage I'm working on... A flipping great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.

Easiest is to use two frames. One on the left for the datagrid, one on the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.

Hardest is to use a table with two cells, left and right. In the left cell
where your datagrid goes, you have to put a <div/> element with overflow set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I use
to control size (you may have to change them slightly for your application):
// helper that gets an element by name
function getElement(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table below
(table id=icantdothiswithcss), then a table with the treeview on the left in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow:auto;") and
the contents in a cell on the right. The table is width:100% height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if (div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}

 

[UJ]

When you do frames, can you load .aspx pages? I thought I read somewhere it
had to be .html pages.

Could you post your code?

TIA - Jeff.

I have a very similar setup in a webpage I'm working on... A flipping
great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.

Easiest is to use two frames. One on the left for the datagrid, one on
the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.

Hardest is to use a table with two cells, left and right. In the left
cell
where your datagrid goes, you have to put a <div/> element with overflow
set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a
specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I
use
to control size (you may have to change them slightly for your
application):
// helper that gets an element by name
function getElement(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table below
(table id=icantdothiswithcss), then a table with the treeview on the left
in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow:auto;")
and
the contents in a cell on the right. The table is width:100% height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if
(div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}

I have a long list of items that the user will be able to select from.
When
they select an item, I'd like to have more detailed information appear on
the right side of the screen. I've already got a datagrid set up with the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around
the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.

 

[=?ISO-8859-1?Q?G=F6ran_Andersson?=]

When you do frames, can you load .aspx pages? I thought I read somewhere it
had to be .html pages.

If you really read that somewhere; the one who wrote it doesn't know
what he/she is talking about.

 

[UJ]

Thanks that worked fine.

When you do frames, can you load .aspx pages? I thought I read somewhere
it had to be .html pages.

Could you post your code?

TIA - Jeff.

I have a very similar setup in a webpage I'm working on... A flipping
great
big tree on the left and PDFs on the right. I tried several different
methods of doing what you want, and ended up with two workable solutions.

Easiest is to use two frames. One on the left for the datagrid, one on
the
right for the content. The only problem with this setup is that your
datagrid and details are on two different pages.

Hardest is to use a table with two cells, left and right. In the left
cell
where your datagrid goes, you have to put a <div/> element with overflow
set
to auto. You then have to create javascript functions that handle the
browser window's onResize and onLoad events that sizes the div to a
specific
size. You cannot use percentages for the scroll div size, otherwise the
scroll div will just expand the table. Here's the javascript functions I
use
to control size (you may have to change them slightly for your
application):
// helper that gets an element by name
function getElement(elementName){return document.all ?
document.all[elementName] : document.getElementById(elementName);}
// scales the table cell holding my navigation treeview
// the webpage has a header (div id=outerdiv), then a controls table
below
(table id=icantdothiswithcss), then a table with the treeview on the left
in
a cell (td id=navCell) with a div (id = scrollDiv style="overflow:auto;")
and
the contents in a cell on the right. The table is width:100%
height:100%,
and the navCell width=30%
function scaleNav(){var div, header, controls;div =
getElement('scrollDiv');navcell = getElement('navCell');header =
getElement('outerDiv');controls = getElement('icantdothiswithcss');if
(div
&& header && controls && navcell){div.style.height = getWindowHeight() -
header.offsetHeight - controls.offsetHeight - 8;div.style.width =
navcell.offsetWidth;}}

I have a long list of items that the user will be able to select from.
When
they select an item, I'd like to have more detailed information appear
on
the right side of the screen. I've already got a datagrid set up with
the
clicking working correctly. Problem is, I'd like to have the list be
scrollable but leave the info on the right alone. What can I put around
the
datagrid so that the entire thing becomes scrollable?

TIA - Jeff.