Scrolling Div Content
DYN-WEB's scrolling code (formerly called Scrolling Layers) has been around for several years. The code is periodically reviewed and updated with new features. Recent feature additions or improvements include mousewheel support, unobtrusive event handling, accessibility features, and dynamic update capability.
See the list of features below, demonstrated by examples listed in the right column and in the download file (latest update: May, 2010).
Code Features
The scrolling div's code supports the following features, most of which are demonstrated in the examples[1]:
- Scroll onmouseover, onmousedown, onmousewheel, and/or glide onclick.
- Scroll vertically and/or horizontally.
- Scrollbars which can be set up using the styles and graphics of your choice.
- Scroll multiple content areas in a document.
- Swap new content into scroll areas, replacing it with content in previously hidden divs on the page or via ajax.
- Dynamic update capabilities. Whether you want to toggle display of elements within scroll areas, add or remove content, modify via ajax or other means, the code can accommodate these changes.
- Absolute or relative positioning of the scroll areas, in tables or CSS layouts.
- Hide scrollbars or scroll links when content is insufficient to necessitate scrolling.
- Scroll to elements with specific id's in the content area, onclick or onload.
- Accessibility features ensuring content is available to incapable browsers or those with JavaScript turned off, and device independent scrolling.
- Unobtrusive event handling
- Provide speed options for mouseover scrolling using image maps.
- Double the speed of mouseover scrolling on mousedown of scroll links.
Additional features that can be made available using more advanced features of the code are listed in Part Two of the documentation.
More About the Code
The code supports Internet Explorer 6+, Firefox, Opera, Safari, Chrome, and should also support any other relatively up-to-date browser.
The scrolling animation is time-based, eliminating the problem of different scroll speeds on different browsers, platforms and operating systems. Smoothness of the animation varies across browsers and platforms, but generally, the time-based algorithms result in smoother motion than frame-based ones.[2]
More Information
See Documentation for basic instructions as well as more detailed information about advanced features of the code. The download file contains basic example documents to assist you in the process of implementation to suit your purposes.
See Licensing Information for use of the code. Please read dyn-web's Terms of Use if you plan to use our code.