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:


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:


Add Remove input fields dynamically using jQuery and PHP

add-more-field

Add/Remove field example in JQuery and PHP

Sometime we need to add or remove fields dynamically in a form.
In this article I'm explaining that how can we add or remove the fields using jQuery.
We just need to click on Add more button and a new field will be added. You also can remove that field.
In this article I also have written the code for inserting the data into MySql.

Here I'm giving an example of tags.

Like If we have requirement of add more tags. And we want to add tags as much as we want. You can do that easily by using this code.
You also can insert all the tags into the MySql database using PHP...  Read More

Share This:


jQuery Program to get website title and screenshot or preview

 

Share This:


How to get all the values of input array element jquery

 

 

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:


Dynamically load data on div scroll using php, mysql, jquery and ajax

If you have lots of data and displaying the whole data in one time is very costly. There comes to approach one is lazy loading and another is pagination.

Here we are going to discuss the lazy loading in PHP, MySQL and Ajax. In lazy loading user can keep scrolling and keep getting the data until the whole data completes. Just like we quora and facebook do, User keep scrolling and post keep coming.

Mysql QueryClick here to download demo code

db.php

index.php

posts.php

 

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:


Twitter follower count api in javascript/jquery

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

function getTwitterFollowerCount(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(/followers_count":(\d+)/)[1]); }); }


getTwitterFollowerCount('coding_4_devs', function (count) { $('#follower-count').html("<h2>Twitter Followers Count: "+count+"</h2>") });

</script>

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

Share This:


Facebook page likes count api in javascript/jquery

You can get your Facebook page likes count in JavaScript/JQuery. You will require to pass your Facebook page id or Facebook page name and (App ID|App Secret).



You can get Facebook App ID and Facebook Secret Id from your developers account.

Visit https://developers.facebook.com and select your page in 'My Apps' and now you can get App ID and Secret ID.

 

Share This: