Форум

Deff · #11 (**permalink**) 05.02.2013, 23:04

<!DOCTYPE HTML>
<html>
  <head>
<style>
input[name='chb-agree']:disabled{
  outline: 1px solid red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
  $("input[name='chb-agree']").attr('disabled',true).removeAttr('id')
  var tarea=$("#txt-sign")
  setTimeout( function(){tarea.scrollTop(3000);},20)
  var tareaScroll;
  var timerscroll;
  setTimeout( function(){
       tareaScroll = tarea.scrollTop();
       //alert(tareaScroll);
       tarea.scrollTop(0);


    $("#txt-sign").bind('scroll',function () {
      clearTimeout(timerscroll);
      timerscroll=setTimeout( function(){  //  очистка чрезмерных срабатываний;
         if(tarea.scrollTop()>=tareaScroll-12) {

          $("input[name='chb-agree']").removeAttr('disabled').attr('id','chb-agree');
          $("#txt-sign").ubind('scroll');

          }

      },20)
    });

  },20)

});
</script>
 </head>
  <body>
<form action="">
    <div class="verification-form-wrap sign">
   
        <textarea id="txt-sign" name="txt-sign" cols="70" rows="10">
        
        TEMPORARY REGISTRATION AGREEMENT
        
        1. I have read andagree to Siberian Health Compensation Plan and Siberian Health products andservices as set forth in official
        Siberian Health literature 
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
        .....................................................................
                                        
        </textarea>
    <div class="chb-wrapper">
        <input type="checkbox" id="chb-agree" name="chb-agree" />
        <label for="chb-agree" class="lb-agree">I accept all terms and conditions of the contact (please read contract)</label>
    </div>
</form>


  </body>
</html>

a_l · #12 (**permalink**) 05.02.2013, 23:24

Deff, можно ведь проще:
http://jsfiddle.net/vsEuc/

Deff · #13 (**permalink**) 06.02.2013, 02:36

a_l,
Cимпатично( чот не пришёл такой путь
Да , нужно отнять десяток пиксел от высоты

if($(this)[0].scrollTop + $(this).height() >= $(this)[0].scrollHeight-12) {

у некоторых браузов скролл чуть менее высоты

Deff · #14 (**permalink**) 06.02.2013, 02:44

Возможно Ваш элегантней... сплю уже

<!DOCTYPE html>
  <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title> - jsFiddle demo</title>
       <style>
          input[name='galochka']:disabled{
          outline: 1px solid red;
       }
     </style>
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
      <link rel="stylesheet" type="text/css" href="/css/normalize.css">
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <style type="text/css">
    textarea{
    width:300px;
    height:100px;
    display:block;
}
  </style>
      <script type="text/javascript">//&lt;![CDATA[ 
$(window).load(function(){
$("input[name=galochka]").attr("disabled", true);
$("textarea").scroll(function() {
    if($(this)[0].scrollTop + $(this).height() >= $(this)[0].scrollHeight-10) {
      $('input[name=galochka]').removeAttr("disabled");  
    }    
});

});//]]&gt;  

</script>
    </head>
    <body style="">
      <textarea>Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
Очень  длинное соглашение!
</textarea>
      <input type="checkbox" name="galochka">
    </body>
  </html>

Вот тут без отъёма 10 пиксел не сработало
Но всё одно - данный Ваш код элегантней!

Deff · #15 (**permalink**) 06.02.2013, 02:54

a_l,
Нашел синхронную оплошку в обоих кодах:

При растягивании textarea до лишения скролла - естественно событие не срабатывает и checkbox никогда не раздизаблится
Нун таймаутом изредка проверять высоту textarea и высоту контента

a_l · #16 (**permalink**) 06.02.2013, 11:29

Цитата:

При растягивании textarea до лишения скролла - естественно событие не срабатывает и checkbox никогда не раздизаблится

Есть такое, но можно же запретить ресайз в css:

textarea{ 
  resize: none;
}

Deff · #17 (**permalink**) 06.02.2013, 13:33

Сообщение от a_l

Есть такое, но можно же запретить ресайз в css:

Неудобно, я в частности при длином контексте часто растягиваю, к примеру тут форму ответа.

georg · #18 (**permalink**) 06.02.2013, 19:19

Да, ресайз должен быть запрещен.
Я вчера стал писать по-своему как-то, но a_l действительно предложил элегантное решение, посему использовал его.

Спасибо a_l и deff за помощь. Огромное.

Форум

Справочник

Discord чат

Курсы javascript