Forum Moderators: not2easy

Message Too Old, No Replies

Creating a matrix view

Keeping horizonal and vertical scrolls in view

         

Alternative Future

11:11 am on Nov 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello folks,

I want to create a container with a height and width restriction that contains a further two containers one on the right and one on the left. Both share the same top row of header information each having 50% width each. The one on the right should also be able to scroll vertically as the heading information can grow past the allowed room of 50% allocated to it.
i.e. the block container on the left will have Widget Action, Widget Details, Widget ID, Widget Type & Widget Status as the heading this should always be visible. The container on the right will have Widget Day 1, Widget Day 2, Widget Day 3 up to Day 14; this should be vertically scrollable so that it fits into the 50% allocated width.
The information under each heading and contained in each container can grow substantially requiring a vertical scroll when it over runs the allocated height.
i.e. each widget can have several or more rows of information. When the user is viewing this he should be able to scroll vertically down the widget information and also be able to scroll horizontally through the widget day information. Both scroll bars should be in view at all times.

sth = static heading
sch = scrollable heading (horizontal)
sti = static information
sci = scrollable information (horizontal & vertical)

¦ sth ¦ sth ¦ sth ¦ sth ¦ sth ¦ <- ¦sch ¦ sch ¦ sch ¦ sch ¦ sch ¦ sch ¦ sch ¦ sch ¦ ->
¦ sti ¦ sti ¦ sti ¦ sti ¦ sti ¦<- ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ ->
¦ sti ¦ sti ¦ sti ¦ sti ¦ sti ¦ <- ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ ->
¦ sti ¦ sti ¦ sti ¦ sti ¦ sti ¦ <- ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ ->
¦ sti ¦ sti ¦ sti ¦ sti ¦ sti ¦<- ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ ->
¦ sti ¦ sti ¦ sti ¦ sti ¦ sti ¦ <- ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ sci ¦ ->

All information in red should be able to scroll vertically. The information in blue should be static. The information in green should be able to scroll horizontally and vertically. Black should only be scrolled horizontally with the green info and remain in view when scrolling vertically.

Does this look possible to do? I have tried using absolute and relative positioning but just cannot get it to work properly.

I really hope this makes sense and someone might be able to assist me along the way.

TIA,

-Gs

Alternative Future

11:34 am on Nov 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I forgot to add this is only required to work in IE6+
It does not have to be cross browser compatible.

-Gs

Robin_reala

12:32 pm on Nov 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've stickied you a URL with an IE only solution.

Alternative Future

12:39 pm on Nov 3, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey thanks that looks perfect.

Thanks,

-Gs