Share via

Scrollbar (fx.Scrollbar.js) Common Control Service

 

Applies To: Windows Azure Pack

fxScrollBar styles an existing scrollbar on an element with the Framework Style.

Windows Azure Pack WAP fxScrollBar

Widgets

$("Selector").fxScrollbar()

Properties

Name

Type

Description

fx.fxScrollbar.options.animated

Boolean

If true, indicates that we should add 'fx-scrollbar-animated' in addition to 'fx-scrollbar'.

fx.fxScrollbar.options.autorefresh

Number

Polls the content area at specific intervals to see if the size has changed. If it has, refresh is called. Time in milliseconds. Set 0 to deactivate. Default value 0. Whenever possible, it is recommended to leave this value as 0 and call refresh when the content changes.

fx.fxScrollbar.options.isStaticContainerSize

Boolean

If true, indicates that the scrollbar size will not change if the content changes. It improves the speed of the control since there is no need to recalculate a possible change every time there is a refresh. Set to false if your control changes its size based on its content or the resizing of the window.

fx.fxScrollbar.options.overlay

Boolean

If true, indicates that the scrollbar will appear on top of the content. Otherwise, the scrollbar will have its own room. Default value false.

Methods

Name

Description

Returns

Parameters

fx.fxScrollbar.destroy

Destroys the widget.

Nothing

None

fx.fxScrollbar.refresh

Refreshes the scrollbar by recalculating the content size and drawing the scrollbar again.

Nothing

force (Boolean): Forces a full refresh causing wrap/unwrap of your element. This parameter is used only if you set the option isStaticContainerSize to true. By default, this parameter is false.

fx.fxScrollbar.scrollLeft

1: Gets the current horizontal position of the scrollbar. 1.1 - scrollTop() 2: Sets the current horizontal position of the scrollbar. 2.1 - scrollTop(value)

Number

value (Number): An integer indicating the new position to set the scrollbar to.

fx.fxScrollbar.scrollTop

1: Gets the current vertical position of the scrollbar. 1.1 - scrollTop() 2: Sets the current vertical position of the scrollbar. 2.1 - scrollTop(value)

Number

value (Number): An integer indicating the new position to set the scrollbar to.

fx.fxScrollbar.widget

Gets the element's widget. You must use that object if you wish to change its style.

JQuery

None

Enums

Name

Fields

fx.fxScrollbar._calls.horizontal

scrollPosition: scrollLeft

scrollSize: scrollWidth

clientSize: clientWidth

page: pageX

position: left

size: width

fx.fxScrollbar._calls.vertical

scrollPosition: scrollLeft

scrollSize: scrollWidth

clientSize: clientWidth

page: pageX

position: left

size: width

scrollPosition: scrollTop

scrollSize: scrollHeight

clientSize: clientHeight

page: pageY

position: top

size: height

Sample

<!DOCTYPE HTML>

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8"/>
        <title>Simple Scrollbar Examples</title>
        <!-- Style Links -->
        <link href="/Content/_oss/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 
        <link href="/Content/UxFxCss.css" rel="stylesheet" type="text/css" />
        <link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.Samples.css" rel="stylesheet" type="text/css" />
        <link href="/Extensions/Samples/ControlsPlayground/Styles/ControlsPlaygroundExtension.TabList.css" rel="stylesheet" type="text/css" />
        <style>
    .scroll {
        background-color: orange;
    }

    #scroll {
        border: 4px solid blue;
        overflow-x: hidden;
        overflow-y: auto;
        height: 200px;
    }

    #verticalDiv {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 200px;
        height: 200px;
    }

    #horizontalDiv {
        overflow-x: scroll;
        overflow-y: hidden;
        width: 200px;
        height: 200px;
    }

    #twoWayDiv {
        overflow-x: scroll;
        overflow-y: scroll;
        width: 200px;
        height: 200px;
    }

    #verticalDiv ul li, #horizontalDiv ul li, #twoWayDiv ul li {
        white-space: nowrap;
    }

    #absoluteDiv {
        position: absolute;
        top: 5px;
        left: 5px;
        bottom: 5px;
        width: 300px;
        overflow-y: auto;
    }

    #scroll-auto {
        width: 200px;
        height: 50px;
        overflow-y: auto;
    }
</style>

    </head>
    <body>
        <div id="scriptLinksContainer">
            <!-- JQuery scripts-->
            <script src="/Scripts/_oss/jquery-1.7.1.js"></script>
            <script src="/Scripts/_oss/jquery-ui-1.8.18.js"></script>

            <!-- Knockout script -->
            <script src="/Scripts/_oss/knockout-2.1.0.js"></script>

            <!-- fx shell scripts -->
            <script src="/Scripts/UxFxScript.js"></script>
        </div>

    <!-- Sample HTML code -->
    <div id="sampleHTMLCodeContainer">

        <div style="margin-top: 10px;">
            Turn Scrollbar On/Off:
            <button id="TurnOnButton">
                On</button>
            <button id="TurnOffButton">
                Off</button><br />
            <input id="LongTextCheckbox" type="checkbox" />
            Use long text
            <br />
            Add
            <input id="AddRowsTextBox" style="width: 40px" value="10" />
            rows
            <button id="AddRowsButton">
                Add</button><br />
            Remove
            <input id="RemoveRowsTextBox" style="width: 40px" value="10" />
            rows
            <button id="RemoveRowsButton">
                Remove</button><br />
            <button id="ClearListButton">
                Clear List</button>
            Scroll to
            <input id="ScrollTopTextBox" style="width: 40px" value="20" />
            pixels from Top
            <button id="ScrollTopButton">
                Go</button><br />
            Scroll to
            <input id="ScrollLeftTextBox" style="width: 40px" value="20" />
            pixels from Left
            <button id="ScrollLeftButton">
                Go</button><br />
        </div>
        <div id="sample-tablist" class="controlsPlayground pushbutton">
        </div>
        <div id="vertical" class="controlsPlayground">
            <h2>Vertical Scrollbar</h2>
                <section>
                    <div id="verticalDiv" class="scroll">
                        <ul></ul>
                    </div>
                </section>
        </div>
        <div id="horizontal" class="controlsPlayground">
            <h2>
                Horizontal Scrolling</h2>
            <div id="horizontalDiv" class="scroll">
                <ul></ul>
            </div>
        </div>
        <div id="twoWay" class="controlsPlayground">
            <h2>
                Two Way Scrolling</h2>
            <div id="twoWayDiv" class="scroll">
                <ul></ul>
            </div>
        </div>
        <div id="absolute" class="controlsPlayground">
            <h2>
                Absolute</h2>
            <div style="position: relative; width: 400px; height: 200px">
                <div id="absoluteDiv" class="scroll" >
                    <ul></ul>
                </div>
            </div>
        </div>
        <div id="contentDivDiv" class="controlsPlayground">
            <h2>
                Div Content Resizing</h2>
            <div class="scroll" style="height: 200px; width: 200px; background-color: #00b0f0;
                                                                       overflow: auto">
                <div id="contentDiv">
                </div>
            </div>
            <br />
            <button id="setContentDiv800">
                Set Content Div to height = 800</button><br />
            <button id="setContentDiv20">
                Set Content Div to height = 20</button>
        </div>
    </div>

    <!-- Sample Script Code -->
    <div id="sampleScriptCodeContainer">

        <script>
            $(function() {
                var addLines = function(to, text, amount) {
                    for (var i = 0; i < amount; i++) {
                        $("<li/>")
                            .html(text.replace("{0}", i))
                            .appendTo(to);
                    }
                };

                var addRows = function(numRows, theDiv) {
                    var useLongText = $("#LongTextCheckbox").is(':checked');
                    var rowText;

                    if (useLongText) {
                        rowText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et";
                    } else {
                        rowText = "Lorem ipsum";
                    }

                    for (var i = 0; i < numRows; i++) {
                        $(theDiv + " ul").append($("<li style='white-space: nowrap'>" + rowText + "</li>"));
                    }
                };

                //helper for figuring out wihch tab we are in
                var getCurrentDiv = function() {
                    var selected = $("#sample-tablist").fxTabList("value").value;
                    var selectedId;
                    switch (selected) {
                        case "Vertical":
                            selectedId = "#verticalDiv";
                            break;
                        case "Horizontal":
                            selectedId = "#horizontalDiv";
                            break;
                        case "TwoWay":
                            selectedId = "#twoWayDiv";
                            break;
                        case "Absolute":
                            selectedId = "#absoluteDiv";
                            break;
                        case "ContentDivDiv":
                            selectedId = "#contentDiv";
                            break;
                    }

                    return selectedId;
                };

                // Commands
                $("#TurnOnButton").click(function() {
                    $(".scroll").fxScrollbar({autorefresh:50});
                });

                $("#TurnOffButton").click(function() {
                    $(".scroll").fxScrollbar("destroy");
                });

                $("#AddRowsButton").click(function() {
                     addRows($("#AddRowsTextBox").val(), getCurrentDiv());
                });

                 $("#RemoveRowsButton").click(function() {
                     var currentDivId = getCurrentDiv();

                     var removeCount = $("#RemoveRowsTextBox").val();

                     for (var i = 0; i < removeCount; i++) {
                         $(currentDivId + " ul").find('li:last').remove();
                     }
                 });

                $("#setContentDiv800").click(function() {
                    $("#contentDiv").text("My height is 800px");
                    $("#contentDiv").height("800px");
                });

                $("#setContentDiv20").click(function() {
                    $("#contentDiv").text("My height is 20px");
                    $("#contentDiv").height("20px");
                });

                $("#ClearListButton").click(function() {
                    $(getCurrentDiv()).html("<ul/>");
                    $(getCurrentDiv()).fxScrollbar("refresh");
                });

                $("#ScrollTopButton").click(function() {
                    var currentDivId = getCurrentDiv();
                    $(currentDivId).fxScrollbar("scrollTop", $("#ScrollTopTextBox").val());
                });

                $("#ScrollLeftButton").click(function() {
                    var currentDivId = getCurrentDiv();
                    $(currentDivId).fxScrollbar("scrollLeft", $("#ScrollLeftTextBox").val());
                });

                // Pre-init
                addLines($("#scroll ul"), "Test {0}", 21);
                addLines($("#verticalDiv ul"), "Really long line which will take more space horizontally {0}", 30);
                addLines($("#horizontalDiv ul"), "Really long line which will take more space horizontally {0}", 10);
                addLines($("#twoWayDiv ul"), "Really long line which will take more space horizontally {0}", 30);
                addLines($("#absoluteDiv ul"), "Test {0}", 30);
                addLines($("#contentDiv ul"), "Really long line which will take more space horizontally {0}", 30);

                $("#sample-tablist").fxTabList({
                    values: [
                    { text: "Vertical", value: "Vertical" },
                    { text: "Horizontal", value: "Horizontal" },
                    { text: "TwoWay", value: "TwoWay" },
                    { text: "Absolute", value: "Absolute" },
                    { text: "ContentDivDiv", value: "ContentDivDiv" }
                ],
                    panels: [$("#vertical"), $("#horizontal"), $("#twoWay"), $("#absolute"), $("#contentDivDiv")]
                });

                // Init
                $("#TurnOnButton").click();
            });
        </script>
    </div>
</body>
</html>