How to get the checked value of the radio button in javascript

Hi, In This tutorial you will learn about "How to get the checked value of the radio button in javascript". If working on the javascript to get the values of the radio buttons it some times gets the not checked value or same value can be retrieved. Because when you write the radio buttons code any radio button is checked default

<input type="radio" id="lang" name="language" value="PHP" checked> PHP  

In javascript, we will retrieve this value as

var  language = document.getElementById('lang').value;
alert(language);

it will work perfectly when only one radio button. In another case, if you have the multiple radio buttons you need to check the every radio button is checked or not before getting the value from the radio button.

i.e, For Example, I showed the above example only one language but here I am taking the multiple languages.

 <input type="radio" id="lang1" name="language" value="PHP" checked> PHP  
 <input type="radio" id="lang2" name="language" value="Jquery"> Jquery  
 <input type="radio" id="lang3" name="language" value="MySql"> MySql  
 <input type="radio" id="lang4" name="language" value="Html"> Html  
 <input type="radio" id="lang5" name="language" value="CSS"> CSS  
 <input type="radio" id="lang6" name="language" value="JavaScript"> JavaScript  

In the above example name must be the same to all the radio buttons so that only one language can be selected. it is the default nature of the radio button. But you need to change the id of the name like the above code it is necessary to check the each and every radio button is checked or not before getting the checked value.

var language = "";  
 if (document.getElementById('lang1').checked) {  
  language = document.getElementById('lang1').value;  
 }else if (document.getElementById('lang2').checked) {  
  language = document.getElementById('lang2').value;  
 }else if (document.getElementById('lang3').checked) {  
  language = document.getElementById('lang3').value;  
 }else if (document.getElementById('lang4').checked) {  
  language = document.getElementById('lang4').value;  
 }else if (document.getElementById('lang5').checked) {  
  language = document.getElementById('lang5').value;  
 }else if (document.getElementById('lang6').checked) {  
  language = document.getElementById('lang6').value;  
 }  
 alert(language);  

* 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

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

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

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 download and apply a web font in CSS

Hi, In this tutorial, I am going to teach you how to download and apply a web font in CSS.

Generally, web fonts allow the designers to use the font without installation on the user's computer. We have to use our own fonts by using the @font-face rule

This @font-face rule is supported by the all major browsers, Chrome, Internet Explorer, Mozilla, Safari, Opera
There are 4 different web font formats available
1. TrueType Fonts (TTF)
2. OpenType Fonts (OTF)
3. The Web Open Font Format (WOFF)
4. Embedded OpenType Fonts (EOT)
Here TTF, OTF, WOFF are supported to the all major browsers. Remaining web font formats are not supportable for all browsers.

How to Download a web font
If you want to download a web font use the font squirrel website font squirrel. Here search your desired web font ex: Open Sans

Now will find the no.of fonts related to Open Sans like Open Sans Light, Open Sans Light Italic, Open Sans Regular, Open Sans Italic, and so on.Now click on DOWNLOAD TTF button.It will download the all Open Sans fonts.

Now Extract the zip file and upload the fonts to the generator in the font squirrel. Then it will convert the TTF fonts to WOFF. WOFF is the regular usage font format on the web. Now extract the downloaded file and see the example code.

How to Apply a web font
Now copy the all .woff, .woff2 files and stylesheet.css file to your project.
Now link the stylesheet.css to your index page in header and apply the font to the body.

<html>  
   <head>  
    <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />  
    <style type="text/css">  
      body{  
      font-family: 'open_sansregular';  
      }  
    </style>  
    <title>Open Sans Regular</title>  
   </head>  
   <body>  
    <h1>WelCome</h1>  
   </body>  
 </html>

Watch Demo

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

How to embed youtube video on your website with custom controls

Youtube is the most popular video sharing website.Here you can create a channel for free and upload your videos and promote it easily. Officially youtube API gives the iframe code to the website,this code can be placed where you want to display it.

Youtube iframe API has several controls are there, those are autoplay,loop,controls.

In general youtube video information.

Every youtube video has a unique id this can be used to play the video on your website.
youtube video id will be displayed like this https://www.youtube.com/watch?v=xI0MsG9XTTk

How to play the youtube video in HTML

Upload the video to your youtube channel.
take the iframe code and place it in the HTML.

Example using iframe

 <iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk" frameborder="0" allowfullscreen></iframe> 

How to autoplay the youtube videos

You have to play the video automatically. when the user visits the page without clicking the play button, You have to pass the simple parameter to the youtube URL i.e autoplay.

autoplay = 0 This is a default value,here video doesn't play automatically when a player loads
autoplay = 1 The video will play automatically when a player loads.

 <iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk?autoplay=1" frameborder="0" allowfullscreen></iframe> 

How to play the youtube video continuously.

You have to play the video continuously pass a simple parameter to the youtube URL i.e loop.

loop = 0 this is a default value , the video will play once.
loop = 1 the video will play continuously.

<iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk?loop=1" frameborder="0" allowfullscreen></iframe>

How to disable the youtube controls on video

If you want to disable the youtube controls on the video player,pass the simple parameter to the youtube URL i.e controls.

controls = 1 this is the dfault vaule, player display the controls
controls = 0 player doesn't display the controls

<iframe width="560" height="315" src="https://www.youtube.com/embed/xI0MsG9XTTk?controls=0" frameborder="0" allowfullscreen></iframe>

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

How to make a windows GUI application with Html

Hi, In this tutorial i will explain you how to create the basc GUI application in windows using html.

Genarally we are saving the html code as .html or .htm but when you creating the windows GUI (Graphical user interface) application it should be save as .hta extension.

Now just follow these steps to create the GUI application using html
Step #1 : Open the text editor like Notepad or whatever your favorite text editor.
Copy the below code

<html>  
   <head>  
    <HTA:APPLICATION  
      APPLICATIONNAME="My App"  
      SYSMENU="yes">  
    <title>My App</title>  
    <style type="text/css">  
      body {background-color:lightsteelblue;}  
      p {font:bold 18px arial;}  
    </style>  
    <script language="javascript" type="text/javascript">  
      window.resizeTo(640,480);  
    </script>  
   </head>  
   <body>  
    <p>Welcome to My First Application<br /><br />Hello World </p>  
   </body>  
 </html>  

Step #2: Paste into your favourite text editor and save your file with extension .hta
For example : MyApp.hta

Step #3: Now, Open your application by double clicking.

* 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

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

1. You can create the JavaScript function and call this function from the anchor href tag
2. 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

How to integrate the Jquery Datetimepicker in HTML

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