| Without scroll bars, a GUI would be about as useful as a car without a steering wheel. Scroll bars let you place an infinite amount of information in a finite space and move that information around as needed. Because the computer's operating system defines the look and feel of the scroll bars, however, they often limit the design of Web interfaces. Still, if you can animate a layer (see "Animating an Object" in Chapter 17), then you can scroll the layer up and down (Figures 24.3 and 24.4). Figure 24.3. The controls let the visitor scroll up or down the page, jump to the bottom, and jump back to the top. 
Figure 24.4. The header will always stay in a fixed place. 
To set up scroll bars: 1. | index.html
Create a frameset file, and save it as index.html (Code 24.4). Set up two frame columns (Figure 24.5).
Code 24.4. index.html: This file sets up two frame columns: a narrow column on the left for the scroll bar, and the rest of the space to hold the content. Figure 24.5. The frameset used to hold scrollBar.html (left frame) and the pages (right frame). 
The first column (named scrollBar) is a narrow frame containing the source scrollBar.html; the second (named contentFrame) contains the file content.html.
| | | 2. | scrollBar.html
Create an HTML file, and save it as scrollBar.html (Code 24.5). This file will contain the scroll bar controls. Steps 3 through 13 apply to this file.
Code 24.5. scrollBar.html: This file contains JavaScript for scrolling layers, goes in the scrollBar frame . The scroll() function animates the scrollArea in the content frame, and URT() and URB() take it to the top or bottom.| [View full width] <!DOCTYPE html PUBLIC "-//WC//DTD XHTML 1.0 Strict//EN" "http://www.w.org/TR/xhtml1/DTD  /xhtml1-strict.dtd"> <html xmlns ="http://www.w.org/1999/xhtml"> <head> <meta http -equiv="Content-Type" content="text/html; charset =utf-8" /> <title>CSS, DHTML & Ajax | Creating Scrollbars for a Layer</title> <script type ="text/javascript"> var scrolling = 0; var yT = 100; var lT = 100; var yI = 15; var yH = 0; var object = null; function startScroll (objectID, frameName, direction) { object = top[frameName].document. getElementById(objectID); scrolling = 1; yT = object.style.top; pxLoc = yT.indexOf('px'); if (pxLoc >= 1) yT = yT.substring(0,pxLoc); yH = document.body.clientHeight -object.offsetHeight - 25; scroll(direction); } function scroll (direction) { if (scrolling == 1) { if ((direction == 1) && (yT <= lT)) { yT = (yT/1) + yI; if (yT > lT) yT = lT; object.style.top = yT + 'px'; } else { if ((direction == 0) && (yT >= yH)) { yT -= yI; if (yT < yH) yT = yH; object.style.top = yT + 'px'; } } yT = object.style.top; pxLoc = yT.indexOf('px'); if (pxLoc >= 1) yT = yT.substring(0,pxLoc); code2run = 'scroll('+ direction + ')'; setTimeout(code2run,0); } return false ; } function stopScroll () { scrolling = 0; return false ; } function URB (objectID, frameName) { var object = top[frameName].document. getElementById(objectID); yH = document.body.clientHeight - object.offsetHeight - 25; object.style.top = yH +'px'; } function URT (objectID, frameName) { var object = top[frameName].document. getElementById(objectID); object.style.top = lT + 'px'; } </script> <style type ="text/css" media="screen"> body { background: white url(images/bg_scroll.gif) repeat -y px 0px; margin-left: px ; } a { text-decoration: none; } </style> </head><body> <div onmousedown ="startScroll('content', 'contentFrame', 1 ); return false;" onmouseup="stopScroll();" onmouseover = "window.status='Up'; return true;"> <img src ="images/up_off.gif" height="25" width="25" alt ="Up" /> </div> <div onmousedown ="URT('content', 'contentFrame'); return false;" onmouseover="window.status='Top'; returntrue;"> <img src="/books/3/292/1/html/2/images/top_off.gif" height ="25" width="25" alt="Top" /> </div> <div onmousedown ="URB('content', 'contentFrame'); return false; "onmouseover="window .status='Bottom'; return true ;" > <img src="/books/3/292/1/html/2/images/bottom_off.gif" height ="25" width="25" alt ="Bottom" /> </div> <div onmousedown ="startScroll('content', 'contentFrame',0); return false;" onmouseup= "stopScroll();" onmouseover ="window.status= 'Down'; return true;" > <img src="/books/3/292/1/html/2/images/down_off.gif" height ="25" width="25" alt ="Down" /></div> </body></html>
|
| 3. | var scrolling = 0;
Add a JavaScript block to scrollBar.html, and initialize the following variables:
scrolling sets whether the layer is currently scrolling. yT records the current top position of the scrolling layer. lT sets the initial position of the top of the layer. yI sets the increment by which the scrolling layer should move. You can change this number as desired. The higher the number, the faster the layer scrolls, but the choppier its movement. yH records the height of the layer. object records the address for the scrolling layer to access its properties.
| 4. | function startScroll (objectID, frameName, direction) {…}
Add startScroll() to the JavaScript.
This function sets scrolling to 1 (on), identifies the current location of the top of the layer (yT), the height of the layer (-25, to leave a margin at the bottom), and then triggers the scroll() function.
| | | 5. | function scroll(direction) {…}
Add scroll() to the JavaScript. This function moves the layer up or down incrementally based on the variable yI from Step 3. The direction depends on the direction variable: 1 for up, 0 for down. The function will continue to run while scrolling is equal to 1.
| 6. | function stopScroll () {…}
Add stopScroll() to the JavaScript. The function sets the variable scrolling to 0 (off), stopping the layer from scrolling.
| 7. | function URB (objectID, frameName) {…}
Add URB() to the JavaScript. This function scrolls instantly to the bottom of the page (moves the bottom of the layer to the bottom of the window).
| 8. | function URT (objectID, frameName) {…}
Add URT() to the JavaScript. This function scrolls instantly to the top of the window (moves the top of the layer to the top of the window).
| 9. | startScroll('content', 'contentFrame', 1); return false;
The controls have to be set up in the HTML in <div> tags with event handlers. To add a scroll-up event, trigger startScroll() with the onmousedown event handler. Pass the function the ID of the object to be scrolled, the name of the frame that contains the object, and a 1 (up).
| 10. | startScroll('content', 'contentFrame', 0);
Trigger startScroll() with the event handler onmousedown. Pass the function the ID of the object to be scrolled, the name of the frame that contains the object, and a 0 for down.
| 11. | stopScroll()
To stop the layer from scrolling, use the stopScroll() function with the event handler onmouseup.
| | | 12. | URT('content', 'contentFrame')
To get to the top of the layer, trigger the URT() function, and pass it the ID of the object and the name of the frame that contains the object.
| 13. | URB('content', 'contentFrame')
To get to the bottom of the layer, use the URB() function, and pass it the ID of the object and the name of the frame that contains the object.
| 14. | content.html
Create an HTML file, and save it as "content.html" (Code 24.6). This file will contain the layer that is being scrolled. Steps 15 and 16 apply to this file.
Code 24.6. content.html: This file goes into the content frame and contains the scrollArea layer, which is scrolled from the scrollBar frame.| [View full width] <!DOCTYPE html PUBLIC "-//WC//DTD XHTML 1.0 Strict//EN" "http://www.w.org/TR/xhtml1/DTD /xhtml1-strict.dtd"> <html xmlns ="http://www.w.org/1999/xhtml"> <head> <meta http -equiv="Content-Type" content="text/html; charset =utf-8" /> <title>CSS, DHTML & Ajax | Creating Scrollbars for a Layer</title> <link href ="default.css" media="screen" rel="stylesheet" type ="text/css" /> </head> <body> <div id ="header"> <h1>Alice's Adventures in Wonderland</h1> <span class ="authorName">Lewis Carroll</span> </div> <div id ="content"> <h2>Chapter I <span > Down the Rabbit-Hole</span></h2> <div class ="dropBox"> <img src="/books/3/292/1/html/2/images/alice02a.gif" alt ="The White Rabbit" height ="270" width="180" /> <p>'Oh dear ! Oh dear! I shall be late!'</p> </div> <div class ="copy"> <p>Alice was beginning to get very tired of sitting by her sister on the bank …</p> <h2>The End </h2> </div></div> </body></html>
|
| 15. | <link href ="default.css" media="screen" rel ="stylesheet" type="text/css" />
Link to an external style sheet to provide the layout for your page.
| 16. | <div id ="content">…</div>
Set up the scrollArea layer in a <div> element (see "Setting up an Object" in Chapter 12).
|
 Tips
I added a simple graphic-toggling function to this example so the controls will appear to light up when clicked. You can also place the controls in the same HTML file as the layer (content.html) and then take out the frame reference when you're using getElementById. URT stands for ubiquitous return to top, and URB stands foryou guessed itubiquitous return to bottom. Unlike most return-to-top buttons on most Web pages, these controls are always available.
|
