lokomotivan
7/15/2017 - 9:26 PM

JQuery Snippets

JQuery Snippets

textarea_chars_limit.html
content_copyfile_download
<script>
$(document).ready(function() {
    var max = 50;
    var textarea    = $("#ivm-limited-textarea");
    textarea.keydown(function(e) {
        var textarea_val = textarea.val();
        var numbOfchars = textarea_val.length;
        $(".ivm-chars-counter").text(max - $(this).val().length);
    });
});
</script>

<textarea id="ivm-limited-textarea" class="uk-textarea" rows="5" name="text" maxlength="50"></textarea>
<span>Chars left: </span><span class="ivm-chars-counter">50</span>
snippets.js
content_copyfile_download
$(document).ready(function() {
     
     // Multiple events
     $('#some_id_here').on('change kepress click', function(e) {
         // do something
     });
     
     // add class on scroll
    $(window).scroll(function() {    
      var scroll = $(window).scrollTop();
         if (scroll >= 300) {
             $("#some_id_or_class").addClass("some_class");
         } else {
             $("#some_id_or_class").removeClass("some_class");
         }
    });
     
    // Add requerd class to all requierd inputs
    var reqInputs = $('input,textarea,select').filter('[required]:visible');
    reqInputs.addClass('ivm-required');
  
    // wrap first word in <span>
    Array.from(document.querySelectorAll('.color-title')).forEach(function(e) {
        e.innerHTML = e.innerHTML.replace(/^\s*\w+/, '<span style="color:red">$&</span>');
    });
     
    /**
     *  Add class when Select Option is not empty.
     *  Eg: to apply css animation when option is selected
     *
     */
    $('.ivm-form *').filter(':selected').each(function(){
        var value = $(this).val();
        if(value != '') {
            $(this).parent().addClass('ivm-active');
        }
    });

});
select_fields_dependency.html
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Select Field Dependency</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

        <script>
            $(document).ready(function() {
                // Set Default  Options
                if ($("#ivm-d-select-1").data('options') == undefined) {
                    /*Taking an array of all options-2 and kind of embedding it on the select1*/
                    $("#ivm-d-select-1").data('options', $('#ivm-d-select-2 option').clone());
                }
                var id = $("#ivm-d-select-1").val();
                var options = $("#ivm-d-select-1").data('options').filter('[class=' + id + ']');
                $('#ivm-d-select-2').html(options);
                // On change options
                $("#ivm-d-select-1").change(function() {
                    if ($(this).data('options') == undefined) {
                        /*Taking an array of all options-2 and kind of embedding it on the select1*/
                        $(this).data('options', $('#ivm-d-select-2 option').clone());
                    }
                    var id = $(this).val();
                    var options = $(this).data('options').filter('[class=' + id + ']');
                    $('#ivm-d-select-2').html(options);
                });
            });
        </script>

    </head>
    <body>

        <form action="" method="">

            <select id="ivm-d-select-1" class="uk-select uk-form-width-medium" name="country" requierd="">
                <option value="0">- All -</option>
                <option value="serbia">Serbia</option>
                <option value="usa">USA</option>
                <option value="germany">Germany</option>
            </select>

            <select id="ivm-d-select-2" class="uk-select uk-form-width-medium" name="city" requierd="">
                <option class="0" value="">- All -</option>
                <option class="serbia" value="">- Any -</option>
				 <option class="usa" value="">- Any -</option>
				 <option class="germany" value="">- Any -</option>
                <option class="serbia" value="belgrade">Belgrade</option>
                <option class="serbia" value="novi-sad">Novi Sad</option>
                <option class="usa" value="new-york">New York</option>
                <option class="usa" value="san-francisco">San Francisco</option>
                <option class="germany" value="berlin">Berlin</option>
                <option class="germany" value="hamburg">Hamburg</option>
            </select>

        </form>

    </body>
</html>
quantity_plus_minus.html
content_copyfile_download
<script>
$(document).ready(function() {
    // Quantity +/-
    $("#q-up").on('click',function(){
        var qValue = $("#ivm-q-input").val();
        $("#ivm-q-input").val(parseInt(qValue)+1);
    });
    $("#q-down").on('click',function(){
        var qValue = $("#ivm-q-input").val();
        if (qValue > 0) {
            $("#ivm-q-input").val(parseInt(qValue)-1);
        }
    });
});
</script>

<!-- markup -->
<div class="ivm-quantity">
    <input id="ivm-q-input" type="text" value="1"  />
    <div class="ivm-q-up-down">
        <span id="q-up"><i class="uk-icon-plus"></i></span>
        <span id="q-down"><i class="uk-icon-minus"></i></span>
    </div>
</div>
char_counter.html
content_copyfile_download
<script>
  $(document).ready(function() {
      
        var textarea    = $("#my_textarea");
  
        textarea.keydown(function(event) {
          
            var numbOfchars = textarea.val();
            var len = numbOfchars.length;
            $(".chars-counter").text(len);

        });
  
  
 }); 
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="my_textarea" class="uk-textarea" rows="5" name="text"></textarea>
<h1 class="chars-counter">0</h1>