How to give animation on the button when it is clicked using SASS and jQuery ?

Hi guys in today’s post I’m going to show you guys how to give animation on the button when user click on it.
So I uploaded the live example on the codepen from where you can see and can edit the file and make some more awesome stuff.

Click here to visit the pen.

Advertisements

How to make Vertical Drop-Down Navigation using HTML, CSS3 and jQuery ?

Description:- In today’s example I’m gonna show you how to make vertical drop-down navigation menu. You can use it in your site or in your admin dashboard like I did. So for this we need to download jquery file so go to http://code.jquery.com/jquery-1.11.3.min.js and download it and save it in your folder.

So, here is the finish product’s images in first image you can see only 5 menus with down arrow but after click on courses link it expands and the sub menus of courses will appear with the arrow facing to the upper direction.

pic1

pic2

Code is below just change the names of list items and use it or play with the colors or do whatever you want to do peeps.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(e) {
$(".course-sub").click(function(e){
$(this).toggleClass("roll");
});
});

</script>
<style>
*{padding:0px; margin:0px;}
.nav{width:250px; background:rgba(51,51,51,1);}
.nav a{display:block;padding:10px 0px 10px 20px; text-decoration:none; border-bottom:1px dotted gray;color:#fff; letter-spacing:.2em; text-transform:uppercase; transition:all 0.3s linear;}
.nav a:hover{background:#dd0909;}
.nav li{list-style:none;}
.nav-ul ul{display:none;}
.nav-ul li.roll ul{display:block;}
.arrow:after{content:'\203A'; float:right; margin-right:20px; transform:rotate(90deg); font-size:20px;}
.nav li.tap .arrow:after{content:'\2039';}
.nav-ul ul a:before{content:'\203A'; margin-right:20px;}

</style>
</head>
<body>
<nav class="nav">
<ul class="nav-ul">
<li><a href="#">Home</a></li>
<li class="course-sub"><a href="#">Courses<span class="arrow"></span></a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>

</ul>


</nav>

</body>
</html>

*Note:- Don’t forget to include jQuery file.

How to check and uncheck all the check boxes in just one click through jQuery ?

Description:- Through this example you can easily check all the check boxes of the list. So that you can delete them or you can perform whatever you want to do. This example includes jQuery file so download it from http://jquery.com/download/ or click on the link http://code.jquery.com/jquery-1.11.2.min.js  and save it in the same folder in which you are going to save this example.

<!DOCTYPE html>
<head>
<title>Check All</title>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
    $("#selectall").click(function(e){
        if(this.checked)
        {
            $(".checks").each(function() {
                this.checked= true;
            });
        }
        else
        {
        $(".checks").each(function() {
                this.checked= false;
            });
        }
    });
});

</script>
<style>
ul{list-style:none;}
</style>
</head>
<body>
<ul>
    <li><input type="checkbox" id="selectall" name="selectall"/>Select All</li>
    <br/>
    <hr>
    <li><input type="checkbox" class="checks"/> Menu1</li>
    <li><input type="checkbox" class="checks"/> Menu2</li>
    <li><input type="checkbox" class="checks"/> Menu3</li>
    <li><input type="checkbox" class="checks"/> Menu4</li>
    <li><input type="checkbox" class="checks"/> Menu5</li>
    <li><input type="checkbox" class="checks"/> Menu6</li>
    <li><input type="checkbox" class="checks"/> Menu7</li>
    <li><input type="checkbox" class="checks"/> Menu8</li>
    <li><input type="checkbox" class="checks"/> Menu9</li>
</ul>


</body>
</html>

How to validate your email , username and whether your password will match with your confirm password or not through jQuery or JavaScript ?

Description: In this form I’m gonna show you how to make validations to your registration form like if your username only contains letters and white spaces or not. But I made this form specially to show you guys how to match your confirm-password with your password.

<!DOCTYPE HTML>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>
    <link href="bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    <style>
    .errors{font-size:14px; color:rgba(255,0,0,1);}
    </style>
</head>
<body>
<div class="container" style="margin-top:50px;">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="jumbotron"><h3>Name, Email Validation with Password and confirm password matching </h3></div>
        </div>
        <div class="col-md-2"></div>
    </div>
    
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8" style="height:500px;">
            <form role="form" action="" method="post">
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" id="name" class="form-control" placeholder="Enter your name"/>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="passwrd" class="form-control" placeholder="Enter your Password"/>
                </div>
                <div class="form-group">
                    <label for="confirm password">Confirm Password</label>
                    <input type="password" id="cpasswrd" class="form-control" placeholder="Re-enter your password"/>
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" id="email" class="form-control" placeholder="Enter your email address"/>
                </div>
                <input type="submit" id="submit" class="btn btn-primary pull-right" value="Register"/>
            
            </form>
        
        </div>
        <div class="col-md-2"></div>
    </div> <!--END of row-->
</div><!--END of container-->
</body>
</html>
<!-- Starting the validations -->

<script>
    $(document).ready(function() {
        $('#submit').click(function(){
            
            // Declaring variables in which we will insert pattern for name and for email.
            
            var name_valid = /^([a-zA-Z\s]{3,50})$/;
            var email_valid = /^([a-zA-Z0-9_\-\.]){1,}\@([a-zA-Z_\-\.]){1,}\.([a-zA-Z]{2,4})$/;
            var errors = false;  
            
            $('.errors').remove();
            if($('#name').val() == "")
            {
                $('#name').after('<span class="errors"> Please fill your name here</span>');
                errors = true;
            }
            else if(!name_valid.test($('#name').val()))
            {
                $('#name').after('<span class="errors">Only letters and white spaces are allowed</span>');
                errors = true;
            }
            if($('#email').val() == "")
            {
                $('#email').after('<span class="errors">Please fill your email here</span>');
                errors = true;
            }
            else if(!email_valid.test($('#email').val()))
            {
                $('#email').after('<span class="errors">Invalid email. Please enter the valid one</span>');
                errors = true;
            }
            if($('#passwrd').val() == "")
            {
                $('#passwrd').after('<span class="errors">Please fill your password</span>');
                errors = true;
            }
            if($('#cpasswrd').val() == "")
            {
                $('#cpasswrd').after('<span class="errors">Please Re-enter your password</span>');
                errors = true;
            }
            if($('#passwrd').val() != $('#cpasswrd').val())
            {
                $('#cpasswrd').css('border-color','rgba(255,0,0,1)').after('<span class="errors">Confirm password not match with the Password. Please try again</span>');
                errors = true;
            }
                            
            if(errors == true)
            {
                return false;
            }
            else
            {
                return true;
            }
            
            
            });
        });
</script>

*Note:- This example is fully bootstrap so don’t forget to include the three main files to make it bootstrap. If you don’t wanna make it bootstrap then don’t include those three files but make sure that you include jquery-1.11.2.min.js because I made validations in jQuery.

How to make fully responsive Character Counter through jQuery?

Description:- Through this example you can easily made your own character counter through jQuery. Character counter will count your characters which you are typing in the given textarea or any where you want. Hence I made this by using Bootstrap so don’t forget to include three main bootstrap files in your head tag.

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Character count by Webtechball</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $("#characters").keyup(function(){
        var a = $("#characters").val();
        var b = a.length;
        document.getElementById("count").innerHTML=b;
    });
});
</script>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-md-4"></div>
      <div class="col-md-4">
    <form role="form">
        <div class="form-group">
            <label for="Message">Message</label>
            <textarea class="form-control" rows="5" id="characters"></textarea>
            <div id="count"></div>
        </div>
    </form>
    </div>
    <div class="col-md-4"></div>
</div>
</body>
</html>