TechiesBadi - Programming Blog: 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