fleXcroll Example Archive Contents -update:03.02.2013

This archive contains examples to show the capabilities and usage of fleXcroll.

fleXcroll documentation

Please examine the examples with your favourite editor to see comments and how the effects are achieved.

Full Alpha Image Scrollbars-commented: New styling method provided by 2.1.1 and up. Makes it easier to understand how to style, with comments inside the CSS file.
Full Image Scrollbars-commented: Image scrollbars for both horizontal and vertical scrollbars, with comments.
Full Image Scrollbars: Same as above, comments removed to show that the overhead of CSS is very little.
Fat and cuddly-commented: A large vertical scrollbar, with basic colored horizontal scrollbar, with comments.
Fat and cuddly: same as above, comments removed to show the low overhead.
Minimal: This is the minimally required styles to run, with only colors

Always display scroll base: This shows the CSS trick required to have the scroll-base (scroll-track) visible even when there's not enough content to warrant a scrollbar
Full alpha: Made obsolete by the new styling method provided by v2.1.1, this is an example on how to use 8-bit alpha scrollbars that is also compatible with IE6. The images that should be used for transparent scrollbars is slightly diferent that usual.
Fixed size, transparent: This example shows the trick to fix the size of the scrollbars, so it does not change with content size. The scrollbar is also transparent.
Horizontally liquid layout: Here you can see fleXcroll supports percentage width scrollbars. The example also contains a fix for IE6 with percentage widths.
Scrollbar at the opposite side: A demonstration of scrollbar placement on the left of the div.
Using floats: This examples shows how to use floated contents inside a fleXcroll div.
Horizontal scrollbar with previously unknown width: In this example, you can see how to do horizontal placement of elements, with previously unknown size.
External scrollbars: As of fleXcroll 2.0, fleXcroll supports externally placed scrollbars in the HTML. Use of this is only recommended for very specific cases when you want the scrollbar to be somewhere else on the screen.

fleXcroll is very easy to program for your needs. More examples will be added in future.

fleXcroll news ticker: Automatic scrolling fleXcroll div, to display news, etc. You can see how easy it is to create a small application using very few lines of code, and without using any external libraries.