Scrolling Div's Documentation Part Two
Page Topics:
Part One of the documentation for the Scrolling Div's Code covers basic instructions and general information for implementing the code. This page provides more details for setting up scroll controls, providing printing capability, as well as information about some of the methods available for use with the code and extra features and functionality possible through their use.
Scroll Control Class Names
Specially constructed class names are attached to scroll control links to enable the code to set up event handling unobtrusively, that is, without having to include event handler attributes in the HTML itself. You can add additional classes to these links for styling purposes if you like.
The components of these classes substitute for arguments passed to functions: direction to scroll, speed, distance, id, etc. The class name components are separated by underscores. For example, the class name to be attached to a link to scroll down onmouseover is mouseover_down. The class name for a link to jump to the top is click_up_to_0. An example link as shown in the documentation is set up as follows:
<a class="mouseover_down" href="">[img here]</a>
Sections below describe in more detail the components of the class name for the different types of scroll related links. Part One of the documentation describes how you instruct the code to initialize the event handling.
Mouseover and Mousedown Scroll Links
Class names for mouseover or mousedown scrolling consists of the following underscore delimited components: type of scrolling, direction, optional speed (default is 100). Some example class names: mouseover_right, mouseover_down_200, mousedown_up. In case that last seems a bit confusing, type of scrolling is mousedown (i.e., scrolling would be activated onmousedown), direction of scroll is up.
Glide Onclick Scroll Links
Class names for glide onclick scroll links are constructed similarly, with one important distinction. The class name begins with click, then the direction, then either to or by to indicate the type of scrolling (to a specified location or by a specified amount) followed by optional duration of glide. Some example class names:
click_down_by_140 (glide-scroll down by 140px) click_up_to_0_0 (jump to top) click_right_by_150_300 (glide-scroll right by 150px in 300 milliseconds)
The functions used for glide onclick scrolling are scrollTo and scrollBy. In cases where you need to specify scrolling for both dimensions you can set up classes to more directly address these functions and their arguments with class names such as:
scrollTo_0_0_0 jump to top (to 0, 0 in 0) scrollTo_end_end_0 jump to end
Scroll To Element with ID
The code supports scrolling to an element with a specific ID. This is to substitute for the problem encountered when attempting to use named anchors inside the scroll areas as described in Part One of the documentation.
When attaching ID's to elements you want to scroll to using scrollToId, don't include underscores in ID's themselves as this would conflict with the code. The following class name would be attached to a link to scroll to an element with the ID smile:
scrollToId_smile
If you are swapping content div's in the scroll area you need to specify the ID of the content div containing the element as the third argument. From the Dynamic Update demo, the link to scroll to the element with the ID smile which is contained in the content div with the ID lyr1 specifies this with the following class name:
scrollToId_smile_lyr1
Swap Content Div's
Links to swap the visibility of content div's contained within a scroll area as demonstrated at Dynamic Update are set up as follows, wn being the ID of the scroll container, lyr2 the ID of the div to display in the scroll area:
load_wn_lyr2
Printing Options
Perhaps you or your viewers have noticed that with the default settings of the code, attempting to print pages using the scrolling divs code results in garbled output. Nonetheless, with a few minor adjustments the code does support printing, whether you would like the page to be printed so that all of the content can be viewed or whether you would like to print the page as it appears on screen.
In order for the content to be printable and viewable by those with incapable browsers do these three things:
- Include the following style specification in the style sheet for content div(s) of scroll area(s). See Part One of the documentation for clarification if necessary. [1]
div#lyr1 { position:absolute; } - Set printEnabled true (line 28 of dw_scroll.js or in the code segment shown below):
dw_scrollObj.printEnabled = true;
- Use the following code to document.write or dynamically generate the style sheet. This code segment is included in the head of example documents in the download file. By default a media screen attribute is added by
dw_writeStyleSheet(ordw_addLinkCSS) unless you specify false with an optional second argument:if ( dw_scrollObj.isSupported() ) { // 2 ways to add style sheet (see scroll_controls.js) //dw_addLinkCSS('css/horiz.css'); dw_writeStyleSheet('css/horiz.css'); // Enable printing here if you like dw_scrollObj.printEnabled = true; dw_Event.add( window, 'load', init_dw_Scroll); }
When the scrolling content is images you may want to enable printing without displaying all of the images but rather have it appear as it does on screen. To do so you would link in the style sheet in the usual way rather than using the functions in the code segment above to generate the style sheet.
Useful Methods
There are some methods included in the scrolling code that you may find useful for special purposes in your implementation.
getX / getY
The getX and getY methods obtain the current location in the scroll area, perhaps for saving in a cookie to retrieve on a subsequent page.
updateDims
The updateDims method recalculates maximum values for scrolling (maxX and maxY) based on any changes that may have been made to affect the scroll area dimensions, through toggling the display of elements within scroll areas or adding or deleting content, for example.
The Dynamic Update example demonstrates using the getX, getY and updateDims methods to update the scroll area and scrollbar when content is added to the scroll area dynamically.
scrollToId
The scrollToId method provides the means to scroll to a specific element in a scroll area. This method is used by the code when you set up a link for this purpose as described above. The method can also be used directly, for example onload, based on information in the query string or in a cookie. An example use of scrollToId:
// arguments: scroll area id, id of element to scroll to,
// id of content div, duration of glide
dw_scrollObj.scrollToId('wn', 'imgId', 'lyr2', 200);
Custom Events
The code provides several custom events, such as on_scroll, on_update, on_scroll_stop, on_scroll_end, etc. The complete list is available near the top of dw_scroll.js. These methods are invoked in the code when the relevant "events" occur.
For example, the on_scroll_end event occurs when you have reached the maximum or minimum possible value on either axis during scrolling. One possible use for this particular event would be to enable you to hide or swap scroll images when the end of content is reached.
function init_dw_Scroll() {
var wndo = new dw_scrollObj('wn', 'lyr1');
wndo.setUpScrollControls('scroll_links');
// code for hiding scroll arrows
wndo.on_scroll = wndo.on_glidescroll = function () {
// set id's to match your doc's (images or containing elements)
var el = document.getElementById('down_aro');
if (wndo.y == -wndo.maxY) {
el.style.visibility = 'hidden';
} else {
el.style.visibility = 'visible';
}
// id for up arrow
el = document.getElementById('up_aro');
if (wndo.y == 0) {
el.style.visibility = 'hidden';
} else {
el.style.visibility = 'visible';
}
}
wndo.on_scroll(); // invoke immediately
}
Scroll Functions
The functions in html_att_ev.js were included in event handler attributes in earlier versions of the code. They provide a means of directly controlling scrolling or loading new content. The code still supports their use in event handler attributes if you choose to use them that way. The image map example demonstrates our usage.
Another example usage: dw_scrollObj.initScroll could be used to start scrolling automatically onload and then once the end is reached, dw_scrollObj.scrollTo could be used to go back to the beginning.
Extras
Further information or assistance in using the above methods is available upon request to licensed users of the code. In some cases an extra support fee may be required for extensive assistance or customization.
Some examples include:
- Load a content div specified in a query string.
- Scroll to an element based on information passed in the url or held in a cookie.
- Maintain scroll position from page to page.
- Hide or swap scroll images when end of content is reached.
- Scroll content from an another document originally loaded into an hidden iframe.
- By default, the content to scroll is positioned absolute in the code. This is intended to avoid problems created when people remove the style specifications that are necessary for the functioning of the code or add style specifications that interfere with the code when these are included in the style sheets of example documents in the download file. ^