Saturday, February 10, 2018

Skptricks CSS html html5 jquery web development Twitter Like Message Box With Live Character Count using HTML, Jquery and CSS

Twitter Like Message Box With Live Character Count using HTML, Jquery and CSS

by on February 10, 2018 in , , , ,
In this tutorial, we are going to discuss how to create twitter like message box using HTML, jQuery and CSS. Here we are counting live character or word count using jQuery.
Like wise twitter it will accept only 250 characters and when word count is more than 250, then it will show error message below the text area.


Twitter Tweet Message Box with Live Character Count

Lets see the complete example for twitter like message box and with the help of jQuery we are counting the total number of character entered in textarea box. 

<html>

<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link href="circle.css" rel="stylesheet" type="text/css">
    <script src="progress-circle.js"></script>
    <style>
        body {
            background-color: #f1f1f1;
        }
        .main-container {
            width: 500px;
            height: 140px;
            margin: 0px auto;
            background: #f2f8fd;
            padding: 10px;
            border: 3px solid #bedff6;
            border-radius: 10px;
        }
        .main-container:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .img-circle {
            border-radius: 50%;
            width: 70px;
            height: 70px;
        }
        .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;
        }
        #count {
            position: absolute;
            z-index: 10;
            padding: 2px;
            margin: 6px;
            text-align: center;
            font-size: 15px;
            font-weight: bold;
        }
        #circle {
            float: left;
        }
        #error-message {
            width: 300px;
            float: left;
            margin-top: 8px;
            color: red;
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // Default count value 
            var count = 0;
            // textarea max accept 250 characters...
            var maxLength = 250;
            $("textarea").keyup(function() {

                var getTextCount = $(this).val();
                var main = getTextCount.length * 100;
                var valueInPercentage = Math.ceil(main / maxLength);
                var charCount = maxLength - getTextCount.length;

                // set text count value...
                if (getTextCount.length <= maxLength) {
                    $('#count').html(charCount);
                    $('#circle').progressCircle({
                        nPercent: valueInPercentage,
                        showPercentText: false,
                        circleSize: 37,
                        thickness: 6
                    });
                } else {
                    $('#count').html(maxLength - getTextCount.length);
                    $('#error-message').show();

                }
                return false;
            });


            // Display loader on first load...
            $('#circle').progressCircle({
                nPercent: 0,
                showPercentText: false,
                circleSize: 37,
                thickness: 6
            });

        });
    </script>
</head>

<body>
<center> <h1> Twitter Tweet Message Box with Live Character Count </h1>   </center>

    <div class="main-container">
 
        <span> <img class="img-circle" src="H33H0z.jpg" /> </span>
        <textarea rows="5" cols="50"></textarea>

        <div style="float:right;margin-right:52px;">

            <div id="error-message">*It accept max 250 characters.</div>

            <div id="circle">
                <div id="count">250</div>
            </div>
            <button class="EdgeButton"> Tweet</button>

        </div>
    </div>
</body>

</html>

Output : 



Download link:
https://github.com/skptricks/php-Tutorials/tree/master/Twitter%20Like%20Message%20Box%20With%20Live%20Character%20Count%20using%20HTML-%20Jquery%20and%20CSS


Demo Link :
https://skptricks.github.io/learncoding/twitter-like-message-box-with-live-character-count/twitter.html

This is all about Twitter Like Character Count Validation using jQuery. Hope you like this tutorial.

By at
Tags: , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)