function sidebarList($scrollerElement, selectedClassName, leafClassName) {
        var $listElement = $scrollerElement.find("ul"),
            $selectionMarker,
            $selectionExtension,
            $sidebar = $("#sidebar"),
            showExtension = true;

        // build selectionMarker and position absolute within the scroller
        $selectionMarker = $(window.document.createElement("div")).addClass("sidebar-selection");
        $scrollerElement.prepend($selectionMarker);

        // enable scrolling
        $scrollerElement.css("overflow", "auto");

        // use relative postioning for clipping the selectionMarker within the scrollElement
        $scrollerElement.css("position", "relative");

        // build selectionExtension and position fixed to the window
        $selectionExtension = $(window.document.createElement("div")).addClass("sidebar-selection-extension");

        $scrollerElement.append($selectionExtension);

        selectedClassName = "." + (selectedClassName || "selected");

        var updateSelectionExtension = function () {
            var selectionMarkerHeight = $selectionMarker.height(),
                selectionMarkerOffset = $selectionMarker.offset(),  // offset relative to *document*
                scrollerOffset = $scrollerElement.offset(),
                selectionExtensionHeight = $selectionExtension.outerHeight(),
                scrollerTop = scrollerOffset.top,
                scrollerBottom = scrollerTop + $scrollerElement.outerHeight(),
                selectionExtensionTop = selectionMarkerOffset.top;

            $selectionExtension.css("top", selectionExtensionTop);
            $selectionExtension.css("left", $sidebar.width() - $selectionExtension.outerWidth());
            toggleClass($selectionExtension, "selectionExtension-visible", showExtension);

            var selectionExtensionClipOffsetYBy = Math.floor((selectionMarkerHeight - selectionExtensionHeight) / 2),
                selectionExtensionBottom = selectionExtensionTop + selectionExtensionHeight + selectionExtensionClipOffsetYBy;

            if (selectionExtensionTop < scrollerTop || selectionExtensionBottom > scrollerBottom) {
                $selectionExtension.css("clip", "rect(" + Math.max(scrollerTop - selectionExtensionTop - selectionExtensionClipOffsetYBy, 0) + "px, auto, " +
                                           (selectionExtensionHeight - Math.max(selectionExtensionBottom - scrollerBottom, 0)) + "px, auto)");
            } else {
                $selectionExtension.css("clip", "");
            }
        };

        var hideSelectionMarker = function (event) {
            $selectionExtension.addClass("forced-hidden");
            $selectionMarker.addClass("forced-hidden");
        };

        var updateSelectionMarker = function (event, reveal) {
            // find the selected list item
            var $listItem = $listElement.find(selectedClassName).closest("li");

            if (leafClassName) {
                showExtension = $listItem.hasClass(leafClassName);
            }

            $selectionExtension.removeClass("forced-hidden");
            $selectionMarker.removeClass("forced-hidden");

            // always hide selection visuals first to force layout (issue #719)
            $selectionExtension.hide();
            $selectionMarker.hide();

            if ($listItem.length === 1) {
                // list item position is relative to scroller
                var selectionMarkerTop = $listItem.offset().top - $scrollerElement.offset().top + $scrollerElement.get(0).scrollTop;

                // move the selectionMarker position to align with the list item
                $selectionMarker.css("top", selectionMarkerTop);
                $selectionMarker.show();

                updateSelectionExtension();
                $selectionExtension.show();

                // fully scroll to the selectionMarker if it's not initially in the viewport
                var scrollerElement = $scrollerElement.get(0),
                    scrollerHeight = scrollerElement.clientHeight,
                    selectionMarkerHeight = $selectionMarker.height(),
                    selectionMarkerBottom = selectionMarkerTop + selectionMarkerHeight,
                    currentScrollBottom = scrollerElement.scrollTop + scrollerHeight;

                // update scrollTop to reveal the selected list item
                if (reveal) {
                    if (selectionMarkerTop >= currentScrollBottom) {
                        $listItem.get(0).scrollIntoView(false);
                    } else if (selectionMarkerBottom <= scrollerElement.scrollTop) {
                        $listItem.get(0).scrollIntoView(true);
                    }
                }
            }
        };

        $listElement.on("selectionChanged", updateSelectionMarker);
        $scrollerElement.on("scroll", updateSelectionExtension);
        $scrollerElement.on("selectionRedraw", updateSelectionExtension);
        $scrollerElement.on("selectionHide", hideSelectionMarker);

        // update immediately
        updateSelectionMarker();

        // update clipping when the window resizes
        _resizeHandlers.push(updateSelectionExtension);
    }
function sidebarList($scrollerElement, selectedClassName, leafClassName) {
        var $listElement = $scrollerElement.find("ul"),
            $selectionMarker,
            $selectionExtension,
            $sidebar = $("#sidebar"),
            showExtension = true;

        // build selectionMarker and position absolute within the scroller
        $selectionMarker = $(window.document.createElement("div")).addClass("sidebar-selection");
        $scrollerElement.prepend($selectionMarker);

        // enable scrolling
        $scrollerElement.css("overflow", "auto");

        // use relative postioning for clipping the selectionMarker within the scrollElement
        $scrollerElement.css("position", "relative");

        // build selectionExtension and position fixed to the window
        $selectionExtension = $(window.document.createElement("div")).addClass("sidebar-selection-extension");

        $scrollerElement.append($selectionExtension);

        selectedClassName = "." + (selectedClassName || "selected");

        var updateSelectionExtension = function () {
            var selectionMarkerHeight = $selectionMarker.height(),
                selectionMarkerOffset = $selectionMarker.offset(),  // offset relative to *document*
                scrollerOffset = $scrollerElement.offset(),
                selectionExtensionHeight = $selectionExtension.outerHeight(),
                scrollerTop = scrollerOffset.top,
                scrollerBottom = scrollerTop + $scrollerElement.outerHeight(),
                selectionExtensionTop = selectionMarkerOffset.top;

            $selectionExtension.css("top", selectionExtensionTop);
            $selectionExtension.css("left", $sidebar.width() - $selectionExtension.outerWidth());
            toggleClass($selectionExtension, "selectionExtension-visible", showExtension);

            var selectionExtensionClipOffsetYBy = Math.floor((selectionMarkerHeight - selectionExtensionHeight) / 2),
                selectionExtensionBottom = selectionExtensionTop + selectionExtensionHeight + selectionExtensionClipOffsetYBy;

            if (selectionExtensionTop < scrollerTop || selectionExtensionBottom > scrollerBottom) {
                $selectionExtension.css("clip", "rect(" + Math.max(scrollerTop - selectionExtensionTop - selectionExtensionClipOffsetYBy, 0) + "px, auto, " +
                                           (selectionExtensionHeight - Math.max(selectionExtensionBottom - scrollerBottom, 0)) + "px, auto)");
            } else {
                $selectionExtension.css("clip", "");
            }
        };

        var hideSelectionMarker = function (event) {
            $selectionExtension.addClass("forced-hidden");
            $selectionMarker.addClass("forced-hidden");
        };

        var updateSelectionMarker = function (event, reveal) {
            // find the selected list item
            var $listItem = $listElement.find(selectedClassName).closest("li");

            if (leafClassName) {
                showExtension = $listItem.hasClass(leafClassName);
            }

            $selectionExtension.removeClass("forced-hidden");
            $selectionMarker.removeClass("forced-hidden");

            // always hide selection visuals first to force layout (issue #719)
            $selectionExtension.hide();
            $selectionMarker.hide();

            if ($listItem.length === 1) {
                // list item position is relative to scroller
                var selectionMarkerTop = $listItem.offset().top - $scrollerElement.offset().top + $scrollerElement.get(0).scrollTop;

                // move the selectionMarker position to align with the list item
                $selectionMarker.css("top", selectionMarkerTop);
                $selectionMarker.show();

                updateSelectionExtension();
                $selectionExtension.show();

                // fully scroll to the selectionMarker if it's not initially in the viewport
                var scrollerElement = $scrollerElement.get(0),
                    scrollerHeight = scrollerElement.clientHeight,
                    selectionMarkerHeight = $selectionMarker.height(),
                    selectionMarkerBottom = selectionMarkerTop + selectionMarkerHeight,
                    currentScrollBottom = scrollerElement.scrollTop + scrollerHeight;

                // update scrollTop to reveal the selected list item
                if (reveal) {
                    if (selectionMarkerTop >= currentScrollBottom) {
                        $listItem.get(0).scrollIntoView(false);
                    } else if (selectionMarkerBottom <= scrollerElement.scrollTop) {
                        $listItem.get(0).scrollIntoView(true);
                    }
                }
            }
        };

        $listElement.on("selectionChanged", updateSelectionMarker);
        $scrollerElement.on("scroll", updateSelectionExtension);
        $scrollerElement.on("selectionRedraw", updateSelectionExtension);
        $scrollerElement.on("selectionHide", hideSelectionMarker);

        // update immediately
        updateSelectionMarker();

        // update clipping when the window resizes
        _resizeHandlers.push(updateSelectionExtension);
    }
function sidebarList ( $scrollerElement , selectedClassName , leafClassName ) { var $listElement = $scrollerElement . find ( "ul" ) , $selectionMarker , $selectionExtension , $sidebar = $ ( "#sidebar" ) , showExtension = true ; // build selectionMarker and position absolute within the scroller $selectionMarker = $ ( window . document . createElement ( "div" ) ) . addClass ( "sidebar-selection" ) ; $scrollerElement . prepend ( $selectionMarker ) ; // enable scrolling $scrollerElement . css ( "overflow" , "auto" ) ; // use relative postioning for clipping the selectionMarker within the scrollElement $scrollerElement . css ( "position" , "relative" ) ; // build selectionExtension and position fixed to the window $selectionExtension = $ ( window . document . createElement ( "div" ) ) . addClass ( "sidebar-selection-extension" ) ; $scrollerElement . append ( $selectionExtension ) ; selectedClassName = "." + ( selectedClassName || "selected" ) ; var updateSelectionExtension = function ( ) { var selectionMarkerHeight = $selectionMarker . height ( ) , selectionMarkerOffset = $selectionMarker . offset ( ) , // offset relative to *document* scrollerOffset = $scrollerElement . offset ( ) , selectionExtensionHeight = $selectionExtension . outerHeight ( ) , scrollerTop = scrollerOffset . top , scrollerBottom = scrollerTop + $scrollerElement . outerHeight ( ) , selectionExtensionTop = selectionMarkerOffset . top ; $selectionExtension . css ( "top" , selectionExtensionTop ) ; $selectionExtension . css ( "left" , $sidebar . width ( ) - $selectionExtension . outerWidth ( ) ) ; toggleClass ( $selectionExtension , "selectionExtension-visible" , showExtension ) ; var selectionExtensionClipOffsetYBy = Math . floor ( ( selectionMarkerHeight - selectionExtensionHeight ) / 2 ) , selectionExtensionBottom = selectionExtensionTop + selectionExtensionHeight + selectionExtensionClipOffsetYBy ; if ( selectionExtensionTop < scrollerTop || selectionExtensionBottom > scrollerBottom ) { $selectionExtension . css ( "clip" , "rect(" + Math . max ( scrollerTop - selectionExtensionTop - selectionExtensionClipOffsetYBy , 0 ) + "px, auto, " + ( selectionExtensionHeight - Math . max ( selectionExtensionBottom - scrollerBottom , 0 ) ) + "px, auto)" ) ; } else { $selectionExtension . css ( "clip" , "" ) ; } } ; var hideSelectionMarker = function ( event ) { $selectionExtension . addClass ( "forced-hidden" ) ; $selectionMarker . addClass ( "forced-hidden" ) ; } ; var updateSelectionMarker = function ( event , reveal ) { // find the selected list item var $listItem = $listElement . find ( selectedClassName ) . closest ( "li" ) ; if ( leafClassName ) { showExtension = $listItem . hasClass ( leafClassName ) ; } $selectionExtension . removeClass ( "forced-hidden" ) ; $selectionMarker . removeClass ( "forced-hidden" ) ; // always hide selection visuals first to force layout (issue #719) $selectionExtension . hide ( ) ; $selectionMarker . hide ( ) ; if ( $listItem . length === 1 ) { // list item position is relative to scroller var selectionMarkerTop = $listItem . offset ( ) . top - $scrollerElement . offset ( ) . top + $scrollerElement . get ( 0 ) . scrollTop ; // move the selectionMarker position to align with the list item $selectionMarker . css ( "top" , selectionMarkerTop ) ; $selectionMarker . show ( ) ; updateSelectionExtension ( ) ; $selectionExtension . show ( ) ; // fully scroll to the selectionMarker if it's not initially in the viewport var scrollerElement = $scrollerElement . get ( 0 ) , scrollerHeight = scrollerElement . clientHeight , selectionMarkerHeight = $selectionMarker . height ( ) , selectionMarkerBottom = selectionMarkerTop + selectionMarkerHeight , currentScrollBottom = scrollerElement . scrollTop + scrollerHeight ; // update scrollTop to reveal the selected list item if ( reveal ) { if ( selectionMarkerTop >= currentScrollBottom ) { $listItem . get ( 0 ) . scrollIntoView ( false ) ; } else if ( selectionMarkerBottom <= scrollerElement . scrollTop ) { $listItem . get ( 0 ) . scrollIntoView ( true ) ; } } } } ; $listElement . on ( "selectionChanged" , updateSelectionMarker ) ; $scrollerElement . on ( "scroll" , updateSelectionExtension ) ; $scrollerElement . on ( "selectionRedraw" , updateSelectionExtension ) ; $scrollerElement . on ( "selectionHide" , hideSelectionMarker ) ; // update immediately updateSelectionMarker ( ) ; // update clipping when the window resizes _resizeHandlers . push ( updateSelectionExtension ) ; }
Within a scrolling DOMElement, creates and positions a styled selection
div to align a single selected list item from a ul list element.

Assumptions:
- scrollerElement is a child of the #sidebar div
- ul list element fires a "selectionChanged" event after the
selectedClassName is assigned to a new list item

@param {!DOMElement} scrollElement A DOMElement containing a ul list element
@param {!string} selectedClassName A CSS class name on at most one list item in the contained list
Within a scrolling DOMElement creates and positions a styled selection div to align a single selected list item from a ul list element .
Creates sidebar list