-1

I am asking for your help with this tinyscrollbar plugin. The user could fill this textarea with some text/questions and the scrollbar should update - it doesnt :( Perhaps I just let the users call me instead :)

here is my code:

<div id="ques-wrap">
  <div id="scrollbar1">
    <div class="scrollbar">
      <div class="track">
        <div class="thumb">
          <div class="end"></div>
          </div>
        </div>
      </div>

      <div class="viewport">
        <div class="overview">
          <textarea id="ques" class=" required " onfocus="if (this.value == 'ask question') {this.value = '';}" onblur="if (this.value == '') {this.value = 'ask question';}"type="text" name="question" value="ask question" size="30">ask question</textarea>
        </div>
      </div>
   </div>
 </div> 

jquery-version 1

 var oScrollbar = $('#scrollbar1');
 $(document).ready(function () {
     oScrollbar.tinyscrollbar();
     oScrollbar.tinyscrollbar_update();
     $('#scrollbar1').tinyscrollbar();
 });

jquery-version 2

$(document).ready(function () {
     // To fix scrollbar not showing all content
     function refreshScrollbar(scrollbar, counter, delay) {
         if (counter > 0) {
             counter--;
             scrollbar.tinyscrollbar_update('relative');
             setTimeout(function () {
                 refreshScrollbar(scrollbar, counter, delay);
             }, delay);
         }
     }
     $('#scrollbar1').tinyscrollbar();
     $("#scrollbar1 .scrollbar .viewport .overview #ques").load(function () {
         refreshScrollbar($('#scrollbar1'), 10, 250);
     });
 });

css

    #ques-wrap #scrollbar1 { width: 405px; clear: both; margin: 0px 0 10px; }
      #ques-wrap #scrollbar1 .viewport { width: 355px; height:40px; overflow: hidden; position:  relative; left: -17px;}
         #ques-wrap #scrollbar1 .overview { list-style: none; position: absolute; right: 0; top: 0; }
               #scrollbar1 .thumb .end,#scrollbar1 .thumb { background-color: #fb4365; }
                 #ques-wrap #scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }

       #ques-wrap #scrollbar1 .track { background-color: #b5b4b4; height: 100%; width:2px;  position: relative; right:2px; }
      #scrollbar1 .track { background-color: #b5b4b4; height: 100%; width:2px; position: relative; right:2px; }
         #scrollbar1 .thumb { height: 20px; width: 6px; cursor: pointer; overflow:hidden;            -webkit-border-radius: 10px;
               -moz-border-radius: 10px;

     border-radius: 10px; position: absolute; top: 0; right: -2px;}
    #scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 6px; }
   #scrollbar1 .disable{ display: none; }
   .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-  user-select: none; -webkit-user-select: none; }
#ques-wrap {
padding-top: 40px;
   }
    #ques {
    border:none;
    width: 355px;
    height:51px;
    background: none;
    color:#fff;
    margin-right: 19px;
    padding-left: 2px;
    direction: rtl;
    outline: none;
    }
2
  • Unrelated, but are you missing a closing </div> tag? May 2, 2013 at 12:26
  • checked again -nope here is the one you missed:) <div class="end"></div>
    – tali
    May 2, 2013 at 13:37

1 Answer 1

0

I recommend you try http://rocha.la/jQuery-slimScroll

This is a easy way to do that

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.