Saturday, February 10, 2018

Twitter like Expanding Textarea box with Jquery

In this tutorial, we are going to discuss how to create Twitter like Expanding Textbox with Jquery. It is very simple and easy to use. Here we have used focus and focusout function of Jquery.

focus function :
When user focus on textaxrea box, then it will automatically expand the textarea box height to 90px.
// on focus textarea box...
$("textarea").focus(function() {
$(this).animate({
"height": "90px",
}, "fast");
$(".EdgeButton").slideDown("fast");
});

focusout function :
When user focus out textaxrea box, then it will automatically collapse the textarea box height to 40px.
// on focus out textarea box...
$("textarea").focusout(function() {
$("textarea").animate({
"height": "40px",
}, "fast");
$(".EdgeButton").slideUp("fast");
});

Expand and Collapse like Twitter's textarea

Lets see the complete example for textarea box expand and collapse using Jquery :


<html>

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    
    <style>
        body {
            background-color: #f1f1f1;
        }
        .main-container {
            width: 500px;
            height: 140px;
            margin: 0px auto;
            background: white;
            padding: 10px;
            border-radius: 10px;
        }
        .main-container:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .EdgeButton {
            border-radius: 100px;
            box-shadow: none;
            cursor: pointer;
            font-size: 14px;
            font-weight: bold;
            line-height: 20px;
            padding: 6px 16px;
            position: relative;
            text-align: center;
            white-space: nowrap;
            background-color: #4AB3F4;
            color: white;
        }
        textarea {
            width: 450px;
            height: 40px;
            border: solid 2px #bedff6;
            font-size: 14px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {

           var getTextCount = $("textarea").val().length;
     
   // on focus textarea box...
            $("textarea").focus(function() {
                $(this).animate({
                    "height": "90px",
                }, "fast");
                $(".EdgeButton").slideDown("fast");

            });
    $("textarea").keyup(function() {
      getTextCount = $("textarea").val().length;
    });

            // on focus out textarea box...
            $("textarea").focusout(function() {   
       if( getTextCount  <= 0 ){
                $("textarea").animate({
                    "height": "40px",
                }, "fast");
                $(".EdgeButton").slideUp("fast");
    
    }
            });
    
        });
    </script>
</head>

<body>
        <div class="main-container">

        <textarea></textarea>

        <div style="float:right;margin-right:52px;">
            <button class="EdgeButton" style="display:none;margin-top:10px;"> Tweet</button>
        </div>

    </div>
</body>

</html>

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Twitter%20like%20Expanding%20Textarea%20box%20with%20Jquery

Demo Link :
https://skptricks.github.io/learncoding/twitter-like-expanding-textarea-box-with-jquery/twitter%20like%20Expanding%20Textbox%20with%20Jquery.html

This is all about textarea box expand and collapse demo. Please do comment in comment box if you have any thing to write.

No comments:

Post a Comment