This page provides documentation for dyn-web's Scrolling Div's Code. The best starting point when implementing the code is to choose an example document from the download file that most closely resembles your desired implementation. Follow the pattern set there and read below for details and clarification.
The download file contains numerous examples that are designed to make it as easy as possible for you to locate the code components required.
Instructions for Setting Up Scrolling Div Code
The following list outlines the steps for implementing the code. Details on each step are available below.
Include script tags pointing to the external JavaScript files.
Place nested div's in the document where you wish the scroll area(s) to appear.
Adjust style specifications for the div's.
Add scroll controls and/or scrollbar elements.
Initialize the code.
Script Tags
Place script tags for the external JavaScript files in the head of your document:
Not all implementations require all four files. If you are working from an example document in the download file just use the ones included there. ^
Scroll Area Div's
Scroll areas are set up using nested div tags: a container and content. Each needs to be assigned a unique ID.
[Content to scroll goes here]
If you would like to swap content in the scroll area, you can specify additional div's inside the container div, attaching a class of content which is used in the style sheet to set visibility hidden.
[Content to scroll goes here]
[Content in second hidden div goes here]
An
example demonstrates this feature. See
below for information on setting up multiple scroll areas.
^Div Style Specifications
The container div (wn in this case) can be positioned absolute or relative. Width, height and overflow hidden are required specifications. Adjust width and height to suit.div#wn {
position:relative;
width:280px; height:200px;
overflow:hidden;
}
The scrolling content div is positioned absolute in the code, with left and top position set at 0, 0.
^Scroll Controls and Scrollbar
You can set up scroll links for mouseover, mousedown, or onclick scrolling in addition to scrollbars. For example, linked images for mouseover scrolling could be set up as follows:
Event handling is set up by the code so that there is no need for event handler attributes in your HTML. As shown above, classes are attached to the scroll controls' linked images. Classes such as mouseover_down or click_down_by_100 instruct the code as to what event handlers should be attached to those links.
Notice that the scroll control links demonstrated above are contained in a div with an ID. The ID itself is not important but in order to set up the scroll controls they do need to be contained within an element with a unique ID. You can add an additional class to links to apply margins, or place the individual linked images in table cells or div's or any other elements that you like, applying classes and styles to suit your design, as long as a container element has an ID that you can pass to the code, as shown
below. To initialize these scroll controls (apart from the scrollbar as demonstrated below) you would use the following: wndo.setUpScrollControls('scrollLinks');
The scrollbar itself consists of the following elements:
Generally, the dragBar consists of a div with a background color specified in the style sheet. Unless you specify otherwise when initializing the scrollbar (see
below), the dragBar will be resized by the code according to the relative dimensions of the content and container. However if you would like it to be an image of fixed size you can include that in the dragBar element itself. This is generally advisable because of a problem for Internet Explorer in properly displaying an image in the background when a layer is dragged.
Often when including both scroll controls and scrollbar you will put them in one containing element and control their position in the style sheet:
Example style specifications for the above scrollbar elements: div#scrollbar {
position:relative;
width:11px; height:200px;
font-size:1px; /* for image vertical alignment issue */
}
div#track {
position:absolute; left:0; top:12px;
width:11px; height:176px;
background: #336;
}
div#dragBar {
position:absolute; left:1px; top:1px;
width:9px; height:20px;
background-color:#ceced6;
}
div#up { position:absolute; left:0; top:0; }
div#down { position:absolute; left:0; bottom:0; }
/* for safari, to prevent selection problem */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
-moz-user-select: none;
-khtml-user-select: none;
}
/* so no gap or misplacement due to image vertical alignment
[1]*/
div#scrollbar img {
display:block;
}
If you are using a table-based layout, the components could be placed in table cells, but the track and dragBar do need to be positioned. For example, the track could be a relative positioned div inside a table cell, the dragBar an absolute positioned div inside the track. Generally the height of the scrollbar and track would be adjusted to correspond to the height of your scroll area.
The scroll controls and scrollbar are not initially displayed (display: none in the style sheet) so that users with incapable browsers will not see them. At the beginning of page load, the code determines the browser's capabilities and appropriately handles display of controls and content.
^Initializing the Code
The code checks whether the browser supports the necessary objects and then assigns a function to be called onload. A link element for the style sheet is dynamically generated
[2] so that the contents will be fully visible for those without the necessary JavaScript support.if ( dw_scrollObj.isSupported() ) {
dw_writeStyleSheet('css/scroll.css');
dw_Event.add( window, 'load', init_dw_Scroll);
}
function init_dw_Scroll() {
// Initialize scroll area
// arguments: id of outer div, id of content div
var wndo = new dw_scrollObj('wn', 'lyr1');
// Initialize scrollbar
// id of dragbar, id of track,
// axis (v for vertical scrolling, 'h' for horizontal)
// horizontal offset of dragbar in track, vertical offset
// size dragBar according to amount of content? (boolean)
wndo.setUpScrollbar('dragBar', 'track', 'v', 1, 1, true);
// Initialize scroll links
// id of element within which to locate scroll controls
wndo.setUpScrollControls('scrollbar');
}
The function called onload instantiates the scroll and scrollbar objects and sets up event handling for the controls and scrollbar. This is generally included in a script segment in the head of example documents, but can be placed in an external file for use throughout your site if you prefer.
If you are setting up scroll areas in situations where scrolling may not always be required, it is possible to instruct the code to hide the controls when they are not needed as shown below. An
example demonstrates.
^// arguments: controls container id,
// autohide controls (boolean), axis ('v' or 'h')
wndo.setUpScrollControls('scrollbar', true, 'v');
Setting up Multiple Scroll Areas
The code easily supports multiple scrolling content areas in a document. The
horizontal scrolling and
glide onclick scrolling examples both demonstrate, as does an example document in the
download file.
Set up nested div's as described
above for each scroll area, assigning a unique ID to each. Use these ID's for the
style specifications for each scroll area. You may find it helpful to view the
style sheet for the horizontal scrolling demo. The elements containing the scroll controls and/or scrollbars also need unique ID's and style specifications set up as described
above.
Initializing the code for multiple scroll areas (copying from the horizontal scrolling example) is accomplished as follows: function init_dw_Scroll() {
var wndo1 = new dw_scrollObj('wn1', 'lyr1', 't1');
var wndo2 = new dw_scrollObj('wn2', 'lyr2', 't2');
var wndo3 = new dw_scrollObj('wn3', 'lyr3', 't3');
wndo1.setUpScrollControls('scrollLinks1');
wndo2.setUpScrollControls('scrollLinks2');
wndo3.setUpScrollControls('scrollbar');
wndo3.setUpScrollbar('dragBar', 'track', 'h', 1, 1);
}
Since only one of the scroll areas in that example uses a scrollbar, there is only one invocation of setUpScrollbar.
Accessibility Features of Scrolling Div's Code
The style sheet is dynamically written or generated once it is determined that the browser is capable of supporting the code so content will be available when JavaScript is disabled or the user's browser is otherwise incapable of supporting the code.
Device independent scrolling is provided by the code. You can include glide onclick scroll controls so that when a user focuses on a scroll link and hits enter scrolling occurs.
Known Issues
When users tab among elements, such as form elements or links inside the scroll area, this can cause the scrolling content div to jump which will throw off the scroll calculations. You can provide a link to jump to the top and reset the scroll mechanism. A similar related problem occurs when you attempt to point to named anchors inside the scrolling div's. The code provides a substitute: glide onclick scrolling to a specified ID. You can see both of these
demonstrated.
If your scrolling content areas containing large images and if you don't include width and height attributes in those images, the initial calculations for the content div may not accurately reflect the size of the content. This may be due to some browsers calling onload before all images have completed loading or if you are using some version of DOM ready to initialize the code rather than onload. The easiest solution, although not always practical, is to specify width and height attributes for images to be included in the scrolling content areas.
Scrolling large images is not recommended. You will generally be disappointed with the performance when attempting to do so. Unfortunately, the motion tends to be less than smooth and images tend to break up during scrolling movement. The larger the images, the more pronounced the problem. The problem tends to be more pronounced with mouseover scrolling and can often be minimized with relatively fast glide onclick scrolling.
http://www.dyn-web.com/code/scroll/documentation.php
