CHI-WEB Archives

ACM SIGCHI WWW Human Factors (Open Discussion)

CHI-WEB@LISTSERV.ACM.ORG

Options: Use Classic View

Use Monospaced Font
Show HTML Part by Default
Show All Mail Headers

Topic: [<< First] [< Prev] [Next >] [Last >>]

Print Reply
Richard Chimera <[log in to unmask]>
Thu, 11 May 2000 12:43:10 -0700
text/plain (252 lines)
> 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

ATOM RSS1 RSS2