How to create simple vertical timeline using HTML and CSS

In this post, we will learn how to build a simple vertical timeline using HTML and CSS from scratch. First, we will create the basic structure with minimal markup and the power of CSS pseudo-elements. We implemented this example without using Javascript and jQuery etc. Please follow the steps to create a basic vertical timeline

Following are the steps to creating HTML and CSS code.

Step 1 : ( Create HTML )

<div class="timeline-wrapper"> 

<ul class="StepProgress">

        <li class="StepProgress-item is-done">

            <div class="bold time">10:00 Am</div> 

            <div class="bold">Step 1</div>

        </li>

        <li class="StepProgress-item is-done">

            <div class="bold time">11:00 Am</div> 

            <div class="bold">Step 2</div>

            <div>Post a contest</div>

        </li>

        <li class="StepProgress-item current">

            <div class="bold time">12:00 Pm</div> 

            <div class="bold">Step 3</div>

        </li>

        <li class="StepProgress-item">

            <div class="bold time">01:00 Pm</div> 

            <div class="bold">Step 4</div>

        </li>

        <li class="StepProgress-item">

            <div class="bold time">02:00 Pm</div> 

            <div class="bold">Step 5</div>

        </li>

    </ul>

</div>

Step 2 : ( Apply CSS Styles to HTML )

<style> 

.bold{font-weight:bold;}

.time{position:absolute; left:-110px;}

.timeline-wrapper {

padding-left:80px;

min-width: 400px;

font-family: 'Helvetica';

font-size: 14px;

/*border: 1px solid #CCC;*/

}

.StepProgress {

position: relative;

padding-left: 45px;

list-style: none;

}

.StepProgress::before {

display: inline-block;

content: '';

position: absolute;

top: 0;

left: 15px;

width: 10px;

height: 100%;

border-left: 2px solid #CCC;

}

.StepProgress-item {

position: relative;

counter-increment: list;

}

.StepProgress-item:not(:last-child) {

padding-bottom: 20px;

}

.StepProgress-item::before {

display: inline-block;

content: '';

position: absolute;

left: -30px;

height: 100%;

width: 10px;

}

.StepProgress-item::after {

content: '';

display: inline-block;

position: absolute;

top: 0;

left: -37px;

width: 12px;

height: 12px;

border: 2px solid #CCC;

border-radius: 50%;

background-color: #FFF;

}

.StepProgress-item.is-done::before {

border-left: 2px solid green;

}

.StepProgress-item.is-done::after {

/*content: "?";*/

font-size: 10px;

color: #FFF;

text-align: center;

border: 2px solid green;

background-color: green;

}

/*.StepProgress-item.current::before { 

border-left: 2px solid green;

}

.StepProgress-item.current::after {

content: counter(list);

padding-top: 1px;

width: 19px;

height: 18px;

top: -4px;

left: -40px;

font-size: 14px;

text-align: center;

color: green;

border: 2px solid green;

background-color: white;

}*/

.StepProgress strong {

display: block;

}

</style>

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

How to Create Text Animation Using CSS

In this post I will explain how to create text animation using css. To achieving this we need to use css @keyframes property for animating the text.  so we need to add -webkit, -moz, -ms, -o in front of keyframes property to avoiding browser related issues. 

For Example see bolow:
@-webkit-keyframes NAME-YOUR-ANIMATION {} @-moz-keyframes NAME-YOUR-ANIMATION {} @-o-keyframes NAME-YOUR-ANIMATION {} @keyframes NAME-YOUR-ANIMATION {}

#box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ }

Following are the steps to creating HTML and CSS  text animations. 

Step 1 : ( Create HTML )

    <p>I'm a</p>

    <b>
      <span>
        web developer<br /> 
        css cowboy<br />
        self-facilitating media node<br />
        box inside a box<br />
        part of the problem
        </span>
    </b>

Step 2 : ( Apply CSS Styles to HTML )

        body {
          padding: 2em 5em;
          font: normal 40px/50px Arial, sans-serif;
          color: #999;
        }
        p {
          height: 50px;
          float: left;
          margin-right: 0.3em;
        }
        b {
          float: left;
          overflow: hidden;
          position: relative;
          height: 50px;
        }
        span {
          display: inline-block;
          color: #FF6633;
          position: relative;
          white-space: nowrap;
          top: 0;
          left: 0;
          -webkit-animation: move 5s;
          -webkit-animation-iteration-count: infinite;
          -webkit-animation-delay: 1s;
        }
        
        @keyframes move {
            0%  { top: 0px; }
           20% { top: -50px; }
           40% { top: -100px; }
           60% { top: -150px; }
           80% { top: -200px; }

        }

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

Form Processing Steps Design Using HTML & CSS

In this post I will explain how to create form processing steps design using HTML and CSS. You can directly copy and paste the below code in your working code. And in this post I am not using any Javascript or Jquery related validations. Just giving an idea about design perspective. In next post I will provide validations too.  To implementing this design please follow the below steps.

Step 1 : ( Create HTML List )

<ul>

    <li class="flag">

      Item Details

    </li>

    <li class="flag">

      Shipping Address

    </li>

    <li class="flag">

      Payment

    </li>

    <li class="flag">

      Conformation

    </li>

</ul>

Step 2 : ( Apply CSS Styles to HTML List )

* {
  box-sizing: border-box;
}
ul{margin-top:100px;}

li{
  float:left;
}
.flag {
  width: 200px;
  height: 50px;
  margin: 0 auto;
  padding-top: 18px;
  position: relative; 
  background: #f36633;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  list-style:none;
}
.flag:before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid white;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}
.flag:after {
  content: ' ';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-top: 25px solid white;
  border-left: 25px solid transparent;
  border-bottom: 25px solid white;

}

I hope you like this article very much & Please don't forget to share.

Thank you.

Continue Reading →

Adding and Display data using AngularJS

Hi Folks,

In this article i am explaining a sample application for adding and displaying data using AngularJS and Bootstrap.

Below is the code, you can directly copy and paste and run in your application.

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function ($scope) {
    $scope.student = {
        firstName: "",
        lastName: "",
        email: ""
    };

    $scope.reset = function () {
        $scope.student.firstName = "";
        $scope.student.lastName = "";
        $scope.student.email = "";
    };
    $scope.reset();
    $scope.users = [];
    $scope.addUser = function () {
        console.log($scope.student);
        $scope.users.push({
            firstName: $scope.student.firstName,
            lastName: $scope.student.lastName,
            email: $scope.student.email
        });
        $scope.reset();
    };
});
</script>
</head>
<body>
<h2>AngularJS Sample Application</h2>

<div ng-app="mainApp" ng-controller="studentController">
    <form name="studentForm" novalidate>
        <table border="0" class="table">
       
            <tr>
                <td>Enter first name:</td>
                <td>
                    <input name="student.firstname" type="text" ng-model="student.firstName" required> <span style="color:red" ng-show="studentForm.student.firstname.$dirty && studentForm.student.firstname.$invalid">
      <span ng-show="studentForm.student.firstname.$error.required">First Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Enter last name:</td>
                <td>
                    <input name="lastname" type="text" ng-model="student.lastName" required> <span style="color:red" ng-show="studentForm.student.lastname.$dirty && studentForm.lastname.$invalid">
      <span ng-show="studentForm.student.lastname.$error.required">Last Name is required.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>Email:</td>
                <td>
                    <input name="email" type="email" ng-model="student.email" length="100" required>
<span style="color:red" ng-show="studentForm.student.email.$dirty && studentForm.student.email.$invalid">
      <span ng-show="studentForm.student.email.$error.required">Email is required.</span>
 <span ng-show="studentForm.student.email.$error.email">Invalid email address.</span>
</span>
                </td>
            </tr>
            <tr>
                <td>
                    
                </td>
                <td>
                <button class="btn btn-primary" ng-click="reset()">Reset</button>
                    <button class="btn btn-success" ng-disabled="studentForm.$invalid" ng-click="addUser()">Submit</button>
                </td>
            </tr>
        </table>
        <p>Total User: {{ users.length }}</p>
        <table class="table table-striped">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="usr in users track by $index">
                <td>{{ usr.firstName }}</td>
                <td>{{ usr.lastName }}</td>
                <td>{{ usr.email }}</td>
            </tr>
            </tbody>
        </table>

</body>
</html>

  I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

Back to top page scroll using Jquery, CSS, HTML5

Hi, Today i will explain about how to scroll page to top from bottom.

This "Back to top" link allows users to smoothly scroll back to the top of the page. It's a little detail which enhances navigation experience on website with long pages.

This resource is suitable for website with lots of page content. The link fades in on the right-hand side of the content area, after the browser window has been scrolled beyond a certain point, and remains fixed during scrolling.

If users keeps on scrolling, the button nicely reduces its opacity to be less distracting during navigation.

Below is the working code you can directly copy and paste ,

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>');
    $(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});
</script>
  <style>
 #toTop{
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
  </style>
</head>
<body>
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

</div>
</div>

</body>
</html>

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

Animated “x” icon for the Bootstrap navbar-toggle using CSS (Or) Hamburger icon animation using Bootstrap and CSS

There are lots of posts online about that trendy (and awesome) transition from the hamburger icon (when the menu is collapsed) to that “x” (when the mobile menu has been expanded). This should be pulled off by CSS3 animations, of course.
Below is the code , you can copy and paste ,run directly..

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  .navbar-toggle {
  border: none;
  background: transparent !important;
}
.navbar-toggle:hover {
  background: transparent !important;
}
.navbar-toggle .icon-bar {
  width: 22px;
  transition: all 0.2s;
}
.navbar-toggle .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
  opacity: 0;
}
.navbar-toggle .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
  transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
  opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
  transform: rotate(0);
}

  </style>
</head>
<body>

<div class="container">
  <!-- Static navbar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar top-bar"></span>
          <span class="icon-bar middle-bar"></span>
          <span class="icon-bar bottom-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
          <li><a href="../navbar-static-top/">Static top</a></li>
          <li><a href="../navbar-fixed-top/">Fixed top</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div><!--/.container-fluid -->
  </nav>

  <!-- Main component for a primary marketing message or call to action -->
  <div class="jumbotron">
    <h1>Navbar example</h1>
    <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
    <p>
      <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
    </p>
  </div>
</div> <!-- /container -->

</body>
</html>

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

Javascript shorten string without cutting words (Or) Javascript trim multiline string without cutting words

In this article i will give Javascript code for trim multiline string without cutting words.
Here i am giving an example,

say i had the string text = "this is a long string i cant display" i want to trim it down to 10 characters but if it does't end with a space finish the word i don't want the string variable to look like this "this is a long string i cant dis" i want it to finish the word until a space occurs.

So here is the solution. You can directly copy and paste the code and run your code.

Solution One:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   // SHORTEN STRING TO WHOLE WORDS
function shorten(s,l) {
  return (s.match(new RegExp(".{"+l+"}\\S*"))||[s])[0];
}
alert( shorten("The quick brown fox jumps over the lazy dog", 5) );
});
</script>
</head>
<body>
</body>
</html>

Solution Two:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
infotext="this is a longish string of test.\n bla bla bla bla text here";
infotext = infotext.match(/^.*$/m)[0].replace(/^([\s\S]{10}\S*).*/, "$1");
alert(infotext);
</script>
</head>
<body>
</body>
</html>

Hope this article is useful for you. If you like please share. If still you have any queries please comment below.
Thankyou

Continue Reading →

How to apply styles on a HTML input type "file" in Pure CSS

Bootstrap doesn’t have a designated component for a file upload button. In IE you will face cross browser issues,  To avoiding cross browser issues  i have found a solution. A simple and elegant solution using only HTML and CSS can be achieved with the following sample code,

Before write your html code you need to add required jQuery and bootstrap files in your <head> section.

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is your HTML Code,

For ( IE 9+ )
For  this you can use this Modern Approach. Let's start by keep a button inside a <label>, adding the appropriate button classes to style it as we need,

<label class="btn btn-default btn-choose-file">
      Choose file from your PC <input type="file" style="display: none;">
</label>

For ( IE 8 and its below)
For this you can use this legacy approach. If you need support for old IE (below 8), Instead of a <label>, Keep your button in a <span>:

<span class="btn btn-default btn-choose-file">
           Choose file from your PC <input type="file">
</span>

And then apply the following CSS. you can use this CSS code for both methods.

.btn-choose-file {
    position: relative;
    overflow: hidden;
}
.btn-choose-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 20px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: #DF474B
    color:#ffffff;
    cursor: inherit;
    display: block;
}

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

How to display thumbnail preview link on whatsapp

Hai Folks,

In this article i will explain how to display thumbnail preview link on whatsapp with simple steps. and i ll add example screens in soon. In previous article How to share content on whatsapp using jQuery ( Title, Link,  Thumbnail etc.. ) we can see how to share content like Title, Description, Any links etc using whatsapp.

For this there is a concept meta tags in html. By using this meta tags we can easily add title, thumb, description, site name etc. you need to add these meta tags in side of <head> </head> section. After you have changed your meta tags, you might need to wait a while for possible caches to update.

The following meta tags are used for solve the problem:

<meta property="og:site_name" content="Site-Name-Here">
<meta property="og:title" content="Site-Title-Here" />

<meta property="og:description" content="Site-Description-Here" />
<meta property="og:image" itemprop="image" content="Image_url here">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />

The meta tag property og:image is enough for getting thumbnail.

If you still facing problem after adding above tags you can add following two kind of code in your page.

First, Add meta tag og:image inside of <head> </head> section.

<meta property="og:image" content="url_image">

Second, Thumbnail schema from schema.org inside <body> section

<link itemprop="thumbnailUrl" href="Image_url here"> 

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject"> 
      <link itemprop="url" href="Image_url here"> 
</span>

I hope you like this article very much & Please don't forget to share.

Thankyou.

Continue Reading →

How to share content on whatsapp using jQuery ( Title, Link, Thumbnail etc.. )

Hai my dear blog readers,

In this tutorial I will help you to share web content on whatsapp using jQuery. Most of the Smartphone users using whatsapp, so using this script you can implement whatsapp share button with your article, which will be very helpful to share article with your friends, colleague etc.

We are using HTML5 attributes data-text for article text and data-link for article URL. Once we click on share button, using jQuery and encodeURIComponent function we created the full message and share on whatsapp.

Here is the code regarding this please copy and paste code as it is.

Here we need to add jQuery CDN from google. If you have this file in your local you can load from there with latest one. You can add this file  <head> </head> section (or) bottom of page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

HTML Code:

<a data-text="How to share content on whatsapp using jQuery.." data-link="http://tekinfotree.blogspot.in/" class="whatsapp whatsapp-btn btn-large">Share on Whatsapp</a>

CSS Style:
.whatsapp-btn {
            background-image: url('');
            border: 1px solid rgba(0, 0, 0, 0.1);
            display: inline-block !important;
            position: relative;
            font-family: Arial,sans-serif;
            letter-spacing: .4px;
            cursor: pointer;
            font-weight: 400;
            text-transform: none;
            color: #fff;
            border-radius: 2px;
            background-color: #5cbe4a;
            background-repeat: no-repeat;
            line-height: 1.2;
            text-decoration: none;
            text-align: left;
        }
        .btn-small {
            font-size: 12px;
            background-size: 16px;
            background-position: 5px 2px;
            padding: 3px 6px 3px 25px;
        }
        .btn-medium {
            font-size: 16px;
            background-size: 20px;
            background-position: 4px 2px;
            padding: 4px 6px 4px 30px;
        }
        .btn-large {
            font-size: 16px;
            background-size: 20px;
            background-position: 5px 5px;
            padding: 8px 6px 8px 30px;
            color: #fff;
        }
        a.whatsapp { color: #fff;}

jQuery Code:
$(document).ready(function() {
    $(document).on("click",'.whatsapp',function() {
        if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {   
            var text = $(this).attr("data-text");
            var url = $(this).attr("data-link");
            var message = encodeURIComponent(text)+" - "+encodeURIComponent(url);
            var whatsapp_url = "whatsapp://send?text="+message;
            window.location.href= whatsapp_url;
        } 
        else {
              alert("Oh Sorry! Please share this content in mobile device");
           } 
    });
});

The encodeURIComponent() function encodes a URI component. This function encodes special characters. In addition, it encodes the following characters: , / ? : @ & = + $ #

The IF statement is used to identify the mobile device because In desktop, whatsapp share will not work.


I hope you like this article very much & Please don't forget to share .

Thankyou

Continue Reading →