How to make custom popup in jquery ?

In this tutorial I’ll show you guys how to make custom popup with the help of jQuery.
You don’t need bootstrap or any other third party plugin to create your own custom and well organize popup. The Source code and video link are below.

Share if you find this useful.


Click to watch video

Source Code

Advertisements

How to make fully responsive todo list using jQuery ?

Hello amazing people! Today I’m gonna share my todo list code here. Well this todo list is so basic there is no database connectivity its only the design but yeah you can add the items by clicking on the add button, edit them by clicking on the particular title and delete them by clicking on the trash icon which is in the right of all the titles.

Follow the link to see the output http://codepen.io/mukul6996/full/LNKoqx

Copy and paste the following code in one page and save it with the html extension.
And your output will look like this:-

mytodo

 

 

Click here to get Code

 

 

Instructions to use

To add items:- Click on the add button “+” on the top-right corner.

To edit items:- Click on the label/title and then start typing. Click any where on the screen to save the item you typed.

To delete  items:- Click on the delete button (looks like a trash icon) on the right corner of your particular item.

Share it if this is helpful 🙂

On the web:- http://codepen.io/mukul6996/full/LNKoqx

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 count WORDS in JavaScript ? OR How to make word counter in JavaScript ?

Description:- Few days before I made and upload character counter which is right here ( https://webtechball.wordpress.com/2015/02/25/how-to-make-fully-responsive-character-counter-through-javascript/ ) and today  Through this example you can easily make your own word counter not the character counter. In character counter user can easily know how many character he have written, but through word counter one can easily find out how many words he have written.

<!DOCTYPE HTML>
<head>
<title>Word counter</title>
<style>
#aaa{border:hidden;}
</style>
</head>
<body>
<textarea name="comment" onkeyup="wordcount(this.value)" rows="5" cols="50"></textarea> <br/>
</body>
</html>

<script>
document.write("<input type=text id=aaa readonly/>");
function wordcount(type) 
{
var words = type.split(/\s/);
var bbb = words.length;
var ccc = document.getElementById('aaa');
ccc.value = bbb;
}
</script>

How to make our own custom fully responsive WYSIWYG (What you see Is What You Get) Rich Text Editor with image uploading through pure JavaScript?

Description:- Now a days developer use the  WYSIWYG (What you see Is What You Get) Rich Text Editor on their websites instead of old and boring textarea. Below is the code through which you can create you own custom rich text editor.
Plus at the end of the code there is also a video in which I tested my WYSIWYG rich text editor, play that video if you want to see how it works.

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet"/>
http://bootstrap.min.js
http://jquery-1.11.1.min.js
<title>Own Rich text editor</title>
<style>
input[type='button'] { cursor:pointer;}
</style>

</head>
<body onLoad="wtbframe();">
<center>
    
        
       
                             
<!--END of buttons--> <textarea name="myarea" id="myarea" cols="100" rows="15" style="display:none" class="form-control"></textarea>     </form> </div>
</div><!--END of row--> </div><!--END of container--> </center> </body> </html> <!--****************BELOW IS THE JAVASCRIPT CODES FOR ALL THE AFORESAID FUNCTIONS******************* --> function wtbframe() {     richtext.document.designMode= 'On'; // Through this our iframe will act like textarea } function wtbbold() {     richtext.document.execCommand('bold',false,null); } function wtbunderline() {     richtext.document.execCommand('underline',false,null); } function wtbitalic() {     richtext.document.execCommand('italic',false,null); } function wtbfontsize() {     var fontSize = prompt('Enter a size', '');     richtext.document.execCommand('FontSize',false,fontSize); } function wtbfontcolor() {     var fontColor = prompt('Enter the name of color or hexadecimal color code:', '');     richtext.document.execCommand('ForeColor',false,fontColor); } function wtbbgcolor() {     var bgcolor = prompt('Enter the name of color or hexadecimal color code for changing background color:', '');     document.getElementById('richtext').style.backgroundColor=bgcolor; } function wtbhorizontalLine() {     richtext.document.execCommand('inserthorizontalrule',false,null); } function wtbunorderlist() {     richtext.document.execCommand('InsertUnorderedList',false,"newUL"); } function wtborderlist() {     richtext.document.execCommand('InsertOrderedList',false,"newOL"); } function wtblinking() {     var links = prompt('Enter the URL for link:', 'http://');     richtext.document.execCommand("CreateLink",false,links); } function wtbunlinking() {     richtext.document.execCommand("Unlink",false,null); } function wtbimg() {     var img = prompt('Enter image Location');     if(img != null)     {         richtext.document.execCommand('insertimage',false,img);     } }

Note:- Since it is totally bootstrap so don’t forget to link the three main bootstrap files.

Watch video to see how it works

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.