> Date: Wed, 10 May 2000 10:28:38 -0700
> From: Ross Olson <[log in to unmask]>
> Subject: Re: webapp: persistent navigation
>
> "Kathy E. Gill" wrote:
>
> > >Richard Chimera wrote:
> > >> From: Mary Deaton <[log in to unmask]>
> > >> I have been asked by program management to design
> > >> a means of having the navigation links for a web
> > >> application persist
> >
> > >We use the HTML tag "DIV" to establish a region on the
> page that scrolls
> > >independently of the rest of the page. (We also turn off
> scrolling for the
> > >BODY tag so that the whole page itself does not draw a
> scroll bar and thus
> >
> > Is this CSS spec? And is it currently supported in anything
> other than MSIE?
>
> No, Richard may not have a full understanding about DIV tags,
> or at least how
> they are used at http://www.jda.com.
>
> The DIV tag does not have scrollable areas. On JDA.com there
> are frames that
> have scroll bars turned off and on. To my knowledge without
> some significant
> DHTML tricks, only frames and iframes can have scrollable
> areas (or need them
> to be turned off).
>
>
> ...Ross...
Woah, nellie! First of all, I did not say that it is www.jda.com that is
the implementation of which I state we use the DIV tag. As it turns out I
have nothing to do with our corporate web site, I am working on
intranet/extranet web applications that we sell to our clients.
Secondly, as was pointed out via a couple private replies I received, I
should have been more explicit as to which specs I am referring and which
browser versions I am testing. I am in the enviable position of only having
to support MSIE 5, which itself supports HTML 4.0 and CSS2 (to a large
degree).
Having explained that, the DIV tag does support scrolling via the use of the
STYLE attribute that has expanded capabilities in the CSS2 (two)
specification -- the OVERFLOW property. According to the book "The Complete
Reference HTML Second Edition" by Thomas A. Powell, only MSIE 5 supports the
OVERFLOW property. However, I think Netscape Navigator 4.5 did do the right
thing on a visitor's laptop.
The code snippet below implements a non-scrolling page with reserved areas
for particular actions and a scrolling work area via the DIV tag. Believe
me, I am not saying that this is excellent HTML code, just a quick example I
threw together to demonstrate the idea.
<HTML>
<HEAD>
<TITLE>Scrolling DIV Example</TITLE>
</HEAD>
<BODY scroll="no" topmargin="0" leftmargin="0" rightmargin="0"
bottommargin="0" >
<table id='Banner' width='800px' height='100px' align='center' border='8'>
<tr>
<td width='100%' align='center'>
Reserved Area 1, a banner probably
</td>
</tr>
</table>
<table width='800px' height='500'px'>
<tr>
<td width='160px' valign='top' style="border-right: 1px solid">
Reserved Area 2, a permanent navigation area probably<br><br>
Module 1<br>
Module 2<br>
Module 3<br>
Module 4<br>
Module 5<br>
Module 6<br>
Module 7<br>
</td>
<td width='640px' valign='top'>
<table id='TableHeaderWhichDoesNotScroll' width='624px'
border='1' cellspacing='0' cellpadding='0'>
<tr align='center'>
<td width="25%">
Row Number
</td>
<td width="25%">
Column 1
</td>
<td width="25%">
Column 2
</td>
<td width="25%">
Column 3
</td>
</tr>
</table>
<div id='TableDivWhichScrolls' valign="top" width="100%"
style="HEIGHT: 300px; OVERFLOW: scroll;">
<table id='TableData' width="100%" border='0' cellspacing='0'
cellpadding='0'>
<tr align='center'>
<td width='25%'>Row 1</td>
<td width='25%'>Cell 1,1</td>
<td width='25%'>Cell 1,2</td>
<td width='25%'>Cell 1,3</td>
</tr>
<tr align='center'>
<td>Row 2</td>
<td>Cell 2,1</td>
<td>Cell 2,2</td>
<td>Cell 2,3</td>
</tr>
<tr align='center'>
<td>Row 3</td>
<td>Cell 3,1</td>
<td>Cell 3,2</td>
<td>Cell 3,3</td>
</tr>
<tr align='center'>
<td>Row 4</td>
<td>Cell 4,1</td>
<td>Cell 4,2</td>
<td>Cell 4,3</td>
</tr>
<tr align='center'>
<td>Row 5</td>
<td>Cell 5,1</td>
<td>Cell 5,2</td>
<td>Cell 5,3</td>
</tr>
<tr align='center'>
<td>Row 6</td>
<td>Cell 6,1</td>
<td>Cell 6,2</td>
<td>Cell 6,3</td>
</tr>
<tr align='center'>
<td>Row 7</td>
<td>Cell 7,1</td>
<td>Cell 7,2</td>
<td>Cell 7,3</td>
</tr>
<tr align='center'>
<td>Row 8</td>
<td>Cell 8,1</td>
<td>Cell 8,2</td>
<td>Cell 8,3</td>
</tr>
<tr align='center'>
<td>Row 9</td>
<td>Cell 9,1</td>
<td>Cell 9,2</td>
<td>Cell 9,3</td>
</tr>
<tr align='center'>
<td>Row 10</td>
<td>Cell 10,1</td>
<td>Cell 10,2</td>
<td>Cell 10,3</td>
</tr>
<tr align='center'>
<td>Row 11</td>
<td>Cell 11,1</td>
<td>Cell 11,2</td>
<td>Cell 11,3</td>
</tr>
<tr align='center'>
<td>Row 12</td>
<td>Cell 12,1</td>
<td>Cell 12,2</td>
<td>Cell 12,3</td>
</tr>
<tr align='center'>
<td>Row 13</td>
<td>Cell 13,1</td>
<td>Cell 13,2</td>
<td>Cell 13,3</td>
</tr>
<tr align='center'>
<td>Row 14</td>
<td>Cell 14,1</td>
<td>Cell 14,2</td>
<td>Cell 14,3</td>
</tr>
<tr align='center'>
<td>Row 15</td>
<td>Cell 15,1</td>
<td>Cell 15,2</td>
<td>Cell 15,3</td>
</tr>
<tr align='center'>
<td>Row 16</td>
<td>Cell 16,1</td>
<td>Cell 16,2</td>
<td>Cell 16,3</td>
</tr>
<tr align='center'>
<td>Row 17</td>
<td>Cell 17,1</td>
<td>Cell 17,2</td>
<td>Cell 17,3</td>
</tr>
<tr align='center'>
<td>Row 18</td>
<td>Cell 18,1</td>
<td>Cell 18,2</td>
<td>Cell 18,3</td>
</tr>
<tr align='center'>
<td>Row 19</td>
<td>Cell 19,1</td>
<td>Cell 19,2</td>
<td>Cell 19,3</td>
</tr>
<tr align='center'>
<td>Row 20</td>
<td>Cell 20,1</td>
<td>Cell 20,2</td>
<td>Cell 20,3</td>
</tr>
<tr align='center'>
<td>Row 21</td>
<td>Cell 21,1</td>
<td>Cell 21,2</td>
<td>Cell 21,3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</BODY>
</HTML>
thanx,
+Rick
Richard Chimera, Design Council
[log in to unmask]
JDA Software, #1 in Software for Retail Businesses
www.jda.com
|
