Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Синхронизация textarea и checkbox (https://javascript.ru/forum/dom-window/35274-sinkhronizaciya-textarea-i-checkbox.html)

Deff 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 05.02.2013 23:24

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

Deff 06.02.2013 02:36

a_l,
Cимпатично( чот не пришёл такой путь
Да , нужно отнять десяток пиксел от высоты
if($(this)[0].scrollTop + $(this).height() >= $(this)[0].scrollHeight-12) {

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

Deff 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 06.02.2013 02:54

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

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

a_l 06.02.2013 11:29

Цитата:

При растягивании textarea до лишения скролла - естественно событие не срабатывает и checkbox никогда не раздизаблится
Есть такое, но можно же запретить ресайз в css:
textarea{ 
  resize: none;
}

Deff 06.02.2013 13:33

Цитата:

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

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

georg 06.02.2013 19:19

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

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


Часовой пояс GMT +3, время: 07:45.