Copy to clipboard example in JavaScript/jQuery | How To Copy to Clipboard

copy-clipboardCopy to clipboard can be used to make easy for a user to copy a particular text. User will not need to select the text first and then copy it. This can be achieved with just a button click.

I'm going to explain copy to clipboard by using JavaScript/jQuery. It also execute copy command to copy the content.

Here is the code for copy to clipboard in JavaScript/jQuery. Like i have created a index HTML file.



index.html

When you click on copy button we get the text and pass it to copyToClipboard() function. There I created a temporary input text field and assign that message to the input text field. Then I select the input text by select() function and execute the copy command by execCommand() function. After executing the copy command I removed the temporary text field. Whenever the message is copied you will see the copied! message also. ...  Read More

Share This:


Draw Lines on Google Map using JavaScript API

draw-path-on-google-map (2)If you wanted to represent geographical locations on Google map, You might need to draw the lines on Google map. Here in this article I'll explain how to draw the path among the locations by using Google map JavaScript API.

I'll create an array of locations in PHP and I'll also define the API key in PHP. Later I'll iterate every address and draw the path among all the locations.

You can change the center of the map by changing the latitude and longitude here:

You also can change the zoom level of the map here:

Here is the source code for drawing the path on Google map:



index.php

  ...  Read More

Share This:


How to draw the route in a map with points on Google Maps

Draw path on google mapMany of the location Apps we need to draw a path from origin to destination. We need to draw path between some locations.

I'll be drawing the path by two modes. Either you are walking or you are driving. I'll be showing optimize way points for the travel path.

Here I'm using Google Map JavaScript API for drawing the route between the points on Google Map. You can draw the path among multiple points so it is not restricted to create path between two points or three points.



I have created a PHP file where I have defined the Google map API key and the way points where you can draw the route path. I have created an array of way points you also can fetch these way points from your database if needed. ...  Read More

Share This:


How to pretty JSON fromat using JavaScript/jQuery?

Pretty JSON example

Pretty JSON example

So many time we required ti print the JSON in pretty format because it is easy to read and understood. As we know JSON (JavaScript object notation)  is a lightweight data-interchange format. It is easy for humans to read and write.
In this article you will learn how to print JSON in pretty format at browser.



Here is the CSS code create a new css file named as stylesheet.css.
stylesheet.css

I have used CSS for highlighting the key, value and strings.
Here is the JavaScript and HTML code to print the JSON in pretty format.



index.html

Here in JavaScript I have cerated a function to make the JSON in pretty format. Here we have a products JSON and we are printing products JSON in pretty format. ...  Read More

Share This:


Difference between 'currying' and 'closure' in JavaScript?

So many time we got confused in currying and closure JavaScript functions just because both uses functions inside function.

So This is the answer of your question.

First I will explain What is closure in JavaScript ?

Creating a closure is nothing more than accessing a variable outside of a function's scope. Please note that a function inside a function isn't a closure. Closures are always use when need to access the variables outside the function scope.



Here is an example of currying function:

Answer will be 21. So here inside google function we are able to access the variable x which is outside the scope of the function google(). ...  Read More

Share This:


Currying functions in JavaScript | JavaScript currying function example

Currying is converting a single function of  arguments into  functions with a single argument each. So you can say Currying is a way to reduce functions of more than one argument to functions of one argument.

Here in Currying function we also uses the property of closures because we access the variables outside the scope of a function.

Here is and example of doing two number addition in JavaScript with simple function :

No if you write this with currying function in JavaScript :

Here is another which can give you more clarity on Currying function in JavaScript.

  ...  Read More

Share This:


Javascript closure function

Creating a closure is nothing more than accessing a variable outside of a function's scope. Please note that a function inside a function isn't a closure. Closures are always use when need to access the variables outside the function scope.

Closures mechanism is used to enable the data privacy.

Why is closures important?

  • Closures provide a way to associate data with a method that operates on that data.
  • They enable private variables in a global world.
  • Many patterns, including the fairly popular module pattern, rely on closures to work correctly.
  •  ...  Read More

    Share This:


    Some Javascript and PHP tricky question & answers

    8 + true == 9

    In JavaScript, when the plus operator is placed between a number and a boolean, the boolean is converted to a number.

    Like false == 0 and true == 1. So 8 + true is converted to 8 + 1 and thus we get the answer of 9.

    true + false = 1

    These above 2 operations will give same result in PHP and other languages as well.

    '8' + 8 = 88

    true + '7' = true7

    1 + 1 + '1' = 21

    -'60' + 60 = 0

    What if we attempt to negate a string and then add a number? As you should know by now, without the negation, our answer would be '6060'. However, the negation changes things. ...  Read More

    Share This:


    Change UTC date time to local date time in javascript/jquery

    <?php
    // php code to get current UTC date time
    date_default_timezone_set('UTC');
    $utcDateTime = date('Y-m-d h:m:s');
    ?>

    <script src="http://momentjs.com/downloads/moment.js"></script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    var utcDateTime = '<?php echo $utcDateTime; ?>';

    var dateTime = moment.utc(utcDateTime).toDate(); var localDateTime = moment(dateTime).format('YYYY-MM-DD HH:mm:ss');

    $('#utc_date_time').html(utcDateTime);
    $('#local_date_time').html(localDateTime);
    });
    </script>
    UTC : <div id="utc_date_time"></div></br>
    Local: <div id="local_date_time"></div> ...  Read More

    Share This:


    Tweets count api in javascript/jquery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>

    function getTweetsCount(username, callback) { $.getJSON("https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D'http%3A%2F%2Ftwitter.com%2F" + username + "'%20and%20xpath%3D'%2F%2Finput%5B%40id%3D%22init-data%22%5D'&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", function (data) { callback(data.query.results.input.value.match(/statuses_count":(\d+)/)[1]); }); }


    getTweetsCount('coding_4_devs', function (count) { $('#tweet-count').html("<h2>Tweet Count: "+count+"</h2>") });

    </script>

    <div id="tweet-count"> <h2>Loading...</h2> </div>

    Share This: