tinyScroll not enabled

Question

i am trying to use the tinyscrollbar plugin http://baijs.nl/tinyscrollbar/

like this:

$('#nvl2 .content').html( '<div class="scrollbar">'+
                                        '<div class="track">'+
                                            '<div class="thumb"><div class="end"></div></div>'+
                                        '</div>'+
                                  '</div>'+
                                  '<div class="viewport">'+
                                        '<div class="overview">' +$('#nvl2 .content').html()+'</div>'+
                                   '</div></div>'   ).attr('id','sc2');

                $('#sc2').tinyscrollbar();

this is called right before of a ajax call that loads new content in #nvl2 but the tinyscroll is not enabled and firebug does not jump any errors

css:

/**************/
/* Tiny Scrollbar */
#nvl1 {   }
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl1 .disable { display: none; }

/**************/
/* Tiny Scrollbar */
#nvl2{   }
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl2 .disable { display: none; }

and this is the sample of the content once the ajax call is done

<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
    <div class="content" style="display: block;">
        <div class="scrollbar">
            <div class="track">
                <div class="thumb">
                    <div class="end">
                    </div>
                </div>
            </div>
        </div>
        <div class="viewport">
            <div class="overview">
                <span class="close"></span>
                <div class="contentHeader">
                    <div class="contentHeaderImg">
                        <img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
                    </div>
                    <h2>Red Level Glove</h2>
                    <h4>The boutique hotel within the hotel</h4>
                </div>
                <div class="contentImg">
                    <img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
                </div>
                <div class="contentTxt">
                    <p>
                        Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
                    </p>
                    <p>
                        The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="extra" style="width: 418px;">
    </div>
</div>

And before the ajax call and tinyscrollbar init exectuted:

<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
        <div class="content" style="display: block;">
                    <span class="close"></span>
                    <div class="contentHeader">
                        <div class="contentHeaderImg">
                            <img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
                        </div>
                        <h2>Red Level Glove</h2>
                        <h4>The boutique hotel within the hotel</h4>
                    </div>
                    <div class="contentImg">
                        <img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
                    </div>
                    <div class="contentTxt">
                        <p>
                            Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
                        </p>
                        <p>
                            The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
                        </p>
                    </div>
                </div>

        <div class="extra" style="width: 418px;">
        </div>
    </div>

and can be tested here: http://toniweb.us/gm any idea what am i missing?

Answer 1

Try using tinyscrollbar_update() method. I was facing issue while i have to change content on a ajax request. and it works for me fine. Full documentation at http://baijs.nl/tinyscrollbar/

Answer 2

What did you mean by

...).attr('sc2');

in you code? Function .attr() with one parameter is getter for attribute value. Did you want to set id for element? If this was your idea then better way is to insert this id to this html code:

<div id="sc2" class="scrollbar">

On your page when execution comes to line with tinyScrollbar initialization:

$('#sc2').tinyscrollbar();

There is no element with id 'sc2' and this is why scrollbar is not showing up and in firebug there are no errors.