Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


Tip of the Day
Language: Web
Expertise: All
Jun 29, 2000

Scrolling DIVs

These days, most Web developers are discouraged from using frames (with good reason). However, users still like the functionality they provide. FRAME and IFRAME are handy scrolling containers, but you may not know that scrolling DIVs can accomplish most of the same things—without the headaches of frames.

Frames are most commonly used to keep some elements stationary while scrolling others. For example, an ASP page might produce a large table that would make the user scroll far past the navigation bars. The table could be placed in a scrolling DIV, where it will scroll just like it was in an IFRAME!

 
<div style="HEIGHT:100px; WIDTH:50%; OVERFLOW:auto">
  <table border=1 width=100%>
    <tr><td>stuff</td>
        <td>more stuff</td></tr>

    <!-- many more table rows -->

    <tr><td>stuff</td>
        <td>more stuff</td></tr>
  </table>
</div>

The CSS-2 attribute OVERFLOW:auto scrolls the element when needed; scrollbars are hidden when they are not needed. OVERFLOW:scroll forces scrollbars to appear. The OVERFLOW attribute is described here: http://www.w3.org/TR/REC-CSS2/visufx.html#overflow-clipping. The HEIGHT attribute must then be set so the DIV will run out of space and begin to scroll.

Scrolling DIVs can be used instead of framesets to keep navigation bars stationary while content scrolls:

 
<body>
<table width=100% height=100% border=1>
  <tr><td colspan=2 height=20% valign=top>
      I'm the banner and global navigation.</td></tr>
  <tr><td width=20% valign=top>
      I'm the left nav bar.</td>
    <td width=90% valign=top>
      <div id=divContent style="HEIGHT: 100%; OVERFLOW: auto">
        <P>I'm the content. I scroll if I need to.</P>
      </div></td></tr>
</table>
</body>

I frequently use a scrolling DIV surrounded by a table cell instead of a read-only TEXTAREA:

 
<table border=1 cellspacing=0 cellpadding=0 width=50%>
  <tr><td>
    <div style="HEIGHT: 70px; WIDTH: 100%; OVERFLOW: auto">
      <INPUT id=checkbox1 name=checkbox1 type=checkbox>Choose Me<BR>
      <!-- more checkboxes -->
      <INPUT id=checkboxN name=checkboxN type=checkbox>Choose Me<BR>
    </div>
  </td></tr>
</table>
Of course, almost anything can go inside a DIV, like these checkboxes.

Note:OVERFLOW is supported by IE4+, but not by Navigator.
Chris McCann
 
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date