fleXcroll V2.1.1 Basic Usage Guide -update:03.02.2013

Setting up fleXcroll

flexcroll.js has to be included in the head element of the html document.
- ```
<script type='text/javascript' src="flexcroll.js"></script>
```
Styles relating to your custom scrollbars should be added inside a CSS file.
- fleXcroll won't work without proper CSS that styles its scrollbars.
- Minimum required CSS for fleXcroll to run, without the need of any images, can be seen in variations-howto's/minimal in the fleXcroll example archive that can be downloaded from fleXcroll page.
fleXcroll only works with the HTML element div
You should style your target div to overflow: auto;
height: auto; style is not currently supported. Percentage heights directly applied on the fleXcroll target div may not work correctly on some browsers.

Applying fleXcroll to your div

Automatic starting on page load

Add the flexcroll class to your div.
- Example - HTML
```
<div class="flexcroll">
```

Fast Automatic Starting

If you have too many images delaying page load, fleXcroll will take time to initialize. If you are not using any javascript libraries for DomContentLoaded, you can still use the following trick to get a fast start:
- Add <div id='flexcroll-init'></div> at the end of your html, right before the </body> end tag, so it looks like:
  - Example - HTML
```
<div id='flexcroll-init'></div> 
</body> 
</html>
```

Manual starting

For various reasons, you may need to run fleXcroll at a specific point in your javascript, for example, you may use your own DomContentLoaded code, or you may apply fleXcroll to a div that is not present on page load. Make sure the DOM contents are fully loaded, or otherwise fleXcroll may not initialize properly or initialize at all.
- Application of fleXcroll using id - Javascript
```
fleXenv.fleXcrollMain("your-div-id");
```
- Application of fleXcroll using javascript element - Javascript
```
fleXenv.fleXcrollMain(yourDivElement);
```
- Application of fleXcroll using a custom class - Javascript
```
fleXenv.initByClass("a-class-name-of-your-choice");
```

Styling your scroll bars

Automatically generated scrollbars (recommended)

fleXcroll creates necessary div elements for scrollbars on-the-fly, you just need to style those scrollbars for them to be visible. For styling, fleXcroll gives class names to these dynamically generated divs. Vertical boxes on the left stands for the vertical scroller, and horizontal boxes on the left stands for the horizontal scroller. The scrollbars are under the fleXcroll-applied div in the DOM tree.

Hover to see the class names associated with the scrollers

Version 2.0.0

Version 2.1.1 (New styling method)

fleXcroll 2.1.1 provides new elements in the middle to make it easier to style alpha transparent scrollbars, and also makes it easier to put images in the middle of the scrollbase and scrollbar. These middle objects are only activated when basebeg, barbeg elements have a forced size (using !important CSS styles). This way, compatibility with older styles are preserved.

Please see the fleXcroll example archive on the fleXcroll page and examine the CSS files to see how to style your scrollbars.
fleXcroll currently does not support true arrows in the scrollbars, faux arrow images can still be used as background images.

External scrollbars

As of version 2.0, fleXcroll supports external scrollbars, that is, scrollbars that are structured in the html of the document. For this, please see the fleXcroll example archive on the fleXcroll page.

CSS tricks

Arrows

You can place your arrow images inside .vscrollerbasebeg, .vscrollerbaseend, .hscrollerbasebeg, .hscrollerbaseend. However, you'll see that the scrollbars overlap these areas.

To remedy this, you'll apply paddings on the scrollbars. These paddings are not used for styling the scrollbars but will be used to know how much scrollbars will be padded against the scrolltrack, and will be set to 0 once they are read by fleXcroll.

Example - Arrows - CSS

.vscrollerbar, .hscrollerbar { 
padding: 16px; 
}

The top padding provides space for top arrow, the left padding provieds space for left arrow, and so on. They can be set individually.

Fixed size scrollbars

If you don't want the scrollbar size to be set automatically, for example, if you want the scrollbar to be 100px big, you can set it to a fixed size using the following trick:

Example - fixed height vertical scrollbar - CSS

.vscrollerbase { 
height: 100px !important; 
}

Example - fixed width horizontal scrollbars - CSS
```
.hscrollerbase { 
width: 100px !important!; 
}
```

Always display scrollbase (scroll-track)

If you want to keep the scroll-track visible whether there's enough content to warrant a scrollbar or not, you can use the following trick:

Example - always display vertical scrollbase - CSS

.vscrollerbase { 
visibility: visible !important; 
}

Example - always display horizontal scrollbase - CSS

.hscrollerbase { 
visibility: visible !important; 
}

Put the vertical scrollbar on the left-side

Example - put scrollbar on left - CSS

.vscrollerbase { 
.vscrollerbase {left: 0 !important;}
}

fleXcroll and printing

You can allow printing of fleXcroll content by adding the following CSS rules:

Printing - non-specific - CSS

@media print { 
div { 
height: auto!important; width: auto!important; 
position: static!important; margin: 0!important; padding: 0!important 
} 
.scrollgeneric {display: none;} 
}

If you want to make just fleXcroll contents printable, and have the rest of your page styled as is: Printing - specific to fleXcroll divs - CSS

@media print { 
.flexcrollactive, .flexcrollactive div  { 
height: auto!important; width: auto!important; 
position: static!important; margin: 0!important; padding: 0!important 
} 
.scrollgeneric {display: none;} 
}

fleXcroll and embedding flash content

Firefox has a bug with embedded flash content, where the embed is still displayed in overflowed portions of the content. To remedy this problem, use of <embed> tag should be avoided, you should use <object> instead. To see how to do this, please see how to remove the embed tag (link to external webpage). If there are still problems, after removing the embeds as mentioned in the article, add the following param: <param name="wmode" value="transparent" />

Programming with fleXcroll

You don't need any javascript knowledge to get the basic custom scrollbar functionality, but if you are programming web applications, fleXcroll provides several useful methods for your Javascript needs. You could even program a news-ticker, for example (but you don't need to, as fleXcroll comes with a news-ticker module as a programming example).

Please see the programming guide for fleXcroll if you need any additional fleXcroll functionality.