TechiesBadi - Programming Blog: JQuery

JQuery

Showing posts with label JQuery. Show all posts

How to disable the browser back button navigation using javascript

Eshwar ch Jul 15, 2017 Add Comment

Hi, Today you will learn about "How to disable the browser back button navigation using javascript", In general, we don't use this type of requirement in the project.But is very useful in so many situations.

For example, we are doing in the online cart i.e an e-commerce platform so here after the placing the order and once the user checks out the order in his cart and payment completed it will redirect and shown the order success page after that user doesn't go back to the previous pages. So here we want to block the browser back button navigation.

So here in this situation we will use this code. if you searched on the internet you will find the code i.e

<script type="text/javascript">  
     window.history.forward();  
     function noBack()  
     {  
       window.history.forward();  
     }  
 </script>  
 <body onLoad="noBack();" onpageshow="if (event.persisted) noBack();" onUnload="">

This code is not working properly. so I have found the solution to this problem. Just add the below script code on the file where the user doesn't go back from that file.

<script type="text/javascript">  
 (function (global) {   
   if(typeof (global) === "undefined") {  
     throw new Error("window is undefined");  
   }  
   var _hash = "!";  
   var noBackPlease = function () {  
     global.location.href += "#";  
     // making sure we have the fruit available for juice (^__^)  
     global.setTimeout(function () {  
       global.location.href += "!";  
     }, 50);  
   };  
   global.onhashchange = function () {  
     if (global.location.hash !== _hash) {  
       global.location.hash = _hash;  
     }  
   };  
   global.onload = function () {        
     noBackPlease();  
     // disables backspace on page except on input fields and textarea..  
     document.body.onkeydown = function (e) {  
       var elm = e.target.nodeName.toLowerCase();  
       if (e.which === 8 && (elm !== 'input' && elm !== 'textarea')) {  
         e.preventDefault();  
       }  
       // stopping event bubbling up the DOM tree..  
       e.stopPropagation();  
     };       
   }  
 })(window);  
 </script>

Here you can check the demo.
Demo

* If you like this post please don't forget to subscribe TechiesBadi - programming blog for more useful stuff

How to add the Save to Google Drive Button to your web page

Unknown Dec 3, 2016 Add Comment

Hi, In this tutorial, I am going to show you how to add the save to google drive button in your web pages.
This is a simple procedure it enables your website to allow your users to save files to their Google Drive . by configuring the save button.

It is the simplest way to display the save to drive button on your page. You need to load some javascript resource from the HTTPS protocol

 <script src="https://apis.google.com/js/platform.js" async defer></script>  
 <div class="g-savetodrive"  
   data-src="//demos.techiesbadi.in/save-to-drive/save to drive script.txt"  
   data-filename="save to drive script.txt"  
   data-sitename="TechiesBadi">  
 </div>

Script Explanation
data-src -- Here you can set the real path of the file name do you want to save the users Google Drive.
data-filename -- Here you can give your file name.
data-sitename -- Here you can set your website name.

Here you can download the Full Source code and check the demo.

Download Demo

Author : Manohar, web developer at innovate techno solutions.

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to display Loading Image with changing some text while Page Loads using Jquery and CSS

Eshwar ch Nov 5, 2016 Add Comment

In this tutorial, I am going to show you how can you set an animated loading image with some text changing while page loads using Jquery and CSS. It is a great idea to show a cool animated image with changing some text until your website is loading.

This idea can implement it on the user registrations. Generally, we do after the user registration in the project user should redirect to the dashboard. This is a normal way we have to do some more professional way between the registration and redirecting to the dashboard in the mean time we would show some cool animated image with changing text.

While you are using this cool idea to show the cool animated images with changing text to the user, So that user can feel much better than the previous approach.

How to convert the HTML content into an image using jquery
Step 1: Load Jquery file to you page.

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

Step 2: Create the loader class and loading id in css

<style type="text/css">  
   #loading {  
   font-size:18px;  
   text-align: center;  
   font-family: 'Open Sans', sans-serif;  
   color: RGBA(0, 0, 0, 0.9);  
   }  
   .loader{  
   margin-top: 11em;  
   }  
 </style>

Step 3: Place the loading image in the loader class.

 <div class="loader">  
   <div id="loading"></div>  
   <center><img src="images/loader6.gif"></center>  
 </div>

Step 4: Configuring the changing text in jquery.

<script type="text/javascript">  
   function onReady(callback) {  
   setTimeout( function(){  
   // Do something after 1 second  
   document.getElementById('loading').innerHTML = "Authenticating";  
   } , 1000 );  
   setTimeout( function(){  
   // Do something after 4 seconds  
   document.getElementById('loading').innerHTML = "Initializing Username";  
   } , 5000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Username Created";  
   } , 7000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Creating your dashborad";  
   } , 9000 );  
   setTimeout( function(){  
   // Do something after 2 seconds  
   document.getElementById('loading').innerHTML = "Almost Completed";  
   } , 11000 );  
   var intervalID = window.setInterval(checkReady, 15000);  
   function checkReady() {  
   if (document.getElementsByTagName('body')[0] !== undefined) {  
   window.clearInterval(intervalID);  
   callback.call(this);  
   }  
   }  
   }  
   function show(id, value) {  
   document.getElementById(id).style.display = value ? 'block' : 'none';  
   }  
   onReady(function () {  
   show('page', true);  
   show('loading', false);  
   });  
 </script>

Step 5: Setting the redirect URL.

 <script type="text/javascript">  
   setTimeout(function () {  
   window.location.href = "http://techiesbadi.in"; //will redirect to your page  
   }, 15000);  
 </script>

Here you can download the Full Source code and check the demo.

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to convert the HTML content into an image using jquery

Eshwar ch Sep 8, 2016 Add Comment

Hi, In this tutorial, I am going to explain, How to convert the HTML content into an image using jquery.

If anybody wants to save / convert the HTML content as an image this code can be helpful.There is a jquery plugin i.e html2canvas, By using this plugin we can easily convert the HTML content of any part i.e a particular div content also to image.

This is like a snapshot of the HTML content, This functionality can be more useful when we have to generate the unique images dynamically.

First we need to include the jquery.min.js,html2canvas.js files to your project

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

This is my content here I am going to convert some image and text to image by using the html2canvas library

 <div class="col-md-offset-4 col-md-4 col--md-offset-4 top">  
   <div id="generateImg" style="border:1px solid;text-align:center;">  
    <img src="logo.png">  
    <h3>How to convert the html content into a image using jquery</h3>  
    <input type="text" value="" placeholder="Enter custom text here!!.." style="background-color: transparent;border: 0px solid;" class="form-control" width="300"/>  
    <br/>  
   </div>  
   <button id="gimg" type="button" class="btn btn-primary top pull-right">Generate Image</button>  
   <div id="img" style="display:none;">  
    <img src="" id="newimg" class="top"/>  
   </div>  
 </div>

In the above code when we click on the generate image button then it will convert the entire first div content to image and it will display as an image in the second div.

Image generation code by using the html2canvas

  <script>  
   $(function(){  
   $("#gimg").click(function(){  
   html2canvas($("#generateImg"), {  
     onrendered: function(canvas) {  
     var imgsrc = canvas.toDataURL("image/png");  
     console.log(imgsrc);  
     $("#newimg").attr('src',imgsrc);  
     $("#img").show();  
   }  
   });  
   });  
   });  
 </script>

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to replace all occurrences of a string in JavaScript

Eshwar ch Aug 3, 2016 Add Comment

Generally, we use the replace() function to replace the particular word phrase. This does not work for replacing all occurrences of a string. i.e replace() is replaces only first matching word phrase only.

For example "How to replace all occurrences of a string in JavaScript".
Here I want to replace the space with "-" 'in all occurrences. Now I use the replace().

var title = "How to replace all occurrences of a string in JavaScript";
var result = title.replace(" ", "-");
console.log(result);
//How-to replace all occurrences of a string in JavaScript

Now my result is How-to replace all occurrences of a string in JavaScript
Here replace() is just replaces the word phrase only once. You have to replace all occurrences of a string. Use the custom function findAndReplace().

function findAndReplace(string, target, replacement) {
 var i = 0, length = string.length;
 for (i; i < length; i++) {
   string = string.replace(target, replacement);
 }
 return string;
}
var title = "How to replace all occurrences of a string in JavaScript";
var result = findAndReplace(title, " ", "-");
console.log(result);
//How-to-replace-all-occurrences-of-a-string-in-JavaScript

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to show a confirm message before delete using javascript

Eshwar ch Jul 1, 2016 Add Comment

Generally When you perform the CRUD operations on any application . To warn a user when user trying to remove / delete anything from the displayed data from the database.

I.e " Are you sure you want to delete this item ? ".

When user click on the remove link it will pop up the confirm message . Here user press on the ok key then that item will be removed otherwise nothing will happen.

This can be done in two different ways

You can create the JavaScript function and call this function from the anchor href tag
You can directly call the confirm function from the on click event.

First Way
JavaScript Function

 <script>  
 function confirmDelete(delUrl) {  
  if (confirm("Are you sure you want to delete this item")) {  
      document.location = delUrl;  
  }  
 }  
 </script>

Function calling

 <a href="javascript:confirmDelete('delete.php?id=1')">Delete</a>

Second way

<a href="delete.php?id=1" onclick="return confirm('Are you sure you want to delete this item ?')">Delete</a>

Output
Delete

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

Character count remaining on textarea in bootstrap

Eshwar ch Jun 30, 2016 Add Comment

Hi ! Today i am going to explain how to limit the character count in the text area and showing the remaining characters using JQuery and Bootstrap.

This functionality is need when a user allows to enter the bio data, commenting on a particular post and entering a description about the product or any thing in this way we need to allow the specific number of character only.
HTML code

 <div class="form-group">  
  <label for="comment">Comment:</label>  
  <textarea class="form-control" id="comment" rows="5" maxlength="150"></textarea>  
 </div>

JavaScript code

<script type="text/javascript">  
   $(document).ready(function() {  
   var text_max = 150;  
   $('#textarea_count').html(text_max + ' characters remaining');  
   $('#comment').keyup(function() {  
     var text_length = $('#comment').val().length;  
     var text_remaining = text_max - text_length;  
     $('#textarea_count').html(text_remaining + ' characters remaining');  
        });  
      });  
</script>

If you want to increase or decrease the characters.
Follow these steps to modify.
Step #1 : In textarea field change the maxlength 150 to your own
Step #2 : In javascript change the text_max variable value 150 to your own

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to integrate the Jquery Datetimepicker in HTML

Eshwar ch Jun 24, 2016 Add Comment

Generally we integrate the datepicker in jquery. it gets only the date but if you want to place the time along with the date use the datetimepicker instead of datepicker.

In jquery has only the datepicker . you need the datetimepicker then you must load the timepicker addon.
You need to load these CSS files

  
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css

And you need to load these JS files

http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js

How to integrate the jquery datepicker

After that place the one input text field and give the id as datetimepicker like this

<input type ="text" id="datetimepicker" name="datetime">

Then bind the date and time picker addon to the id datetimepicker

<script>   
      $(document).ready(function () {   
       $(function() {  
      $("#datetimepicker").datetimepicker({   
       dateFormat: 'yy-mm-dd',   
       timeFormat: 'hh:mm:ss',  
      }).datetimepicker("setDate", new Date());  
      });  
          });   
    </script>

Out put is

How to block the particular weekdays in the jquery datepicker
Datetimepicker code

  
<!doctype html>   
 <html lang="en">  
   <head>  
    <meta charset="UTF-8">  
    <title>Datetimepicker</title>  
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" />  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.css" />  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>   
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.js"></script>  
    <style>  
      body {  
      font: 12px sans-serif;  
      }  
    </style>  
   </head>  
   <body>  
    <input type ="text" id="datetimepicker" name="datetime">  
    <script>   
      $(document).ready(function () {   
       $(function() {  
      $("#datetimepicker").datetimepicker({   
       dateFormat: 'yy-mm-dd',   
       timeFormat: 'hh:mm:ss',  
      }).datetimepicker("setDate", new Date());  
      });  
          });   
    </script>   
   </body>  
 </html>

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to disable the right click, copy text and view source in a website

Eshwar ch Jun 15, 2016 Add Comment

If you want to secure your website with JavaScript no right click ,no copy text , block the view source in the browser (CTRL + U).

You are worked hardly to place the content in the your site. But some one easily stolen the content just copying from your website or from the view source and some experts may use right click in your site and stolen the your documents links from your site also.

To Prevent these type of attacks from your website. Copy and paste the following code, and make sure it place in the above </HEAD> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>  
 <script type="text/JavaScript">  
  var message="NoRightClicking";  
  function defeatIE() {if (document.all) {(message);return false;}}  
  function defeatNS(e) {if   
  (document.layers||(document.getElementById&&!document.all)) {  
  if (e.which==2||e.which==3) {(message);return false;}}}  
  if (document.layers)   
  {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;}  
  else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;}  
  document.oncontextmenu=new Function("return false")  
 jQuery(document).ready(function($){  
  $(document).keydown(function(event) {   
  var pressedKey = String.fromCharCode(event.keyCode).toLowerCase();  
  if (event.ctrlKey && (pressedKey == "c" || pressedKey == "u")) {  
  return false;   
  }  
  });  
 });   
 </script>

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to disabled the right click on webpage by using jquery

Eshwar ch Jun 10, 2016 Add Comment

If you want to disabled the right click on entire website or particular div.First you need to load the Jquery file
Disable the right click on entire web page

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>   
  <script type="text/javascript">   
   $(function () {   
   $(document).bind('contextmenu', function (e) {   
    e.preventDefault();     
   });   
   });   
  </script>

Disable the right click on perticular division (div tag)

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <script type="text/javascript">  
   $(function () {  
    $('.Container').bind('contextmenu',function(e){  
    e.preventDefault();  
    alert('Right Click is not allowed on div');  
    });  
   });  
  </script>

Html code

 <div class="Container">  
   div content  
 </div>

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to auto load the page in div every 5 seconds

Eshwar ch May 31, 2016 Add Comment

Now a days we are seen many websites are fetch the data without page refresh.
If you want to load the page auto in div by using jquery. It is possible by using the setInterval() here you can mention the auto load page and time.
Then you are defined the page will load the certain amount of time as you set in the function.
This page content will be load in a div.


Please wait ..

Then set the auto load page and time interval in setInterval().

You need to load the jquery.min.js file.

Your auto load page contains either static data or dynamic data.

index.php

 <html>  
 <head>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>  
 <script>  
 setInterval(  
 function()  
 {  
 $('#content').load('load.php');  
 }, 3000);  
 </script>  
 <style>  
 #content{  
 background-color:#00A1E0;  
 font-size:24px;  
 font-weight:bold;  
 padding-top:10px;  
 color:#fff;  
 min-height: 200px;  
 }  
 #content,h1{  
      text-align: center;  
 }  
 </style>  
 <title>Auto Load Page in Div using Jquery</title>  
 </head>  
 <body>  
 <h1>Auto Load Page in Div</h1>  
 <div id="content"> Please wait .. </div>  
 </body>  
 <html>

load.php

 <?php  
 echo 'This content is loaded via ajax in every 5 seconds ..';  
 ?>

Download Watch Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to block the particular weekdays in the jquery datepicker

Eshwar ch Apr 26, 2016 Add Comment

Generally Datepicker allows to click the all weekdays do you want to block any weekdays
for example : a company has holidays on saturday and sunday.
We can appointment with the company except these holidays. In this case we want to block the saturdays and sundays in the datepicker
We already know about how to integrate the jquery datepicker.
Datepicker weekday values are

0 - Sunday
1 - Monday
2 - Tuesday
3 - Wednesday
4 - Thursday
5 - Friday
6 - Saturday

If you want to block any weekday in the datepicker just use the index numbers instead of using the weekdays.
Now will block the saturday and sundays then we use the index numbers 6 and 0 .

 $(document).ready(function () {  
        $('#txtDate').datepicker({ beforeShowDay:  
           function(dt)  
           {  
             return [dt.getDay() == 0 || dt.getDay() == 6 ? false : true];  
           }  
       });  
      });

Download Watch Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

How to integrate the jquery datepicker

Eshwar ch Apr 12, 2016 Add Comment

The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

To integrate the jquery datepicker we need the three files those are
1.jquery-ui.css
2.jquery.min.js
3.jquery-ui.min.js

You can download these files form here

Jquery ui files can be download here
Jquery-min.js file can be download here

Other wise you can simply use these CDNS

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Datepicker code

<!doctype html>  
 <html lang="en">  
  <head>  
  <meta charset="UTF-8">  
  <title>Datepicker</title>  
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>  
  </head>  
  <body>  
  <input type='text' id='txtDate' />  
  <script>  
      $(document).ready(function () {  
        $('#txtDate').datepicker();  
      });  
 </script>  
  </body>  
 </html>

Download Watch Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff