не tinyScroll включен

Question

я пытаюсь использовать tinyscrollbar плагин http://baijs.nl/tinyscrollbar/

так:

$('#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(); 

это называется прямо перед из АЯКС вызова, который загружает новое содержание в # nvl2 но tinyscroll не включен и поджигатель не скачет каких-либо ошибок

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; } 

и это образец содержимого после вызова Ajax делается

<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> 

И перед вызовом AJAX и tinyscrollbar инициализации 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> 

и может быть проверена здесь: http://toniweb.us/gm любая идея, что я я скучаю?

Answer 1

Что вы имеете в виду

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

в вас код? Функция .attr() с одним параметром является getter для значения атрибута. Вы хотите установить id для элемента? Если бы это была ваша идея, то лучший способ, чтобы вставить этот идентификатор в этот HTML код:

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

На странице, когда выполнение доходит до линии с инициализацией tinyScrollbar:

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

Там нет элемента с идентификатором 'sc2', и именно поэтому полоса прокрутки не отображается, а в firebug ошибок нет.

Answer 2

Попробуйте использовать метод tinyscrollbar_update(). Я столкнулся с проблемой, пока мне приходится менять контент по запросу ajax. и это работает для меня хорошо. Полная документация по адресу http://baijs.nl/tinyscrollbar/