jquery - tinyscrollbar: am i doing it right? -
i asking tinyscrollbar plugin. user fill textarea text/questions , scrollbar should update - doesnt :( perhaps let users call me instead :)
here 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 () { // fix scrollbar not showing 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; }
i recommend try http://rocha.la/jquery-slimscroll
this easy way that
Comments
Post a Comment