Checking textarea empty value using JQuery.

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

<script>

$('#action').click(function() {

    if (!$.trim($("#txtarea").val())) {

       alert("please input something");  //to check textarea is empty or not

}

});

</script>

Above JQuery code will check that textarea is empty or not it will also check white space.

Complete example is given below-

<!DOCTYPE html>

<html>

<body>

<center>

<textarea cols="50" rows="8" id="txtarea" required></textarea>

<br>

<button id="action">Click to check</button>

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

<script>

$('#action').click(function() {

   if (!$.trim($("#txtarea").val())) {

       alert("please input something");  //to check textarea is empty or contains only white-space

}

});

</script>

</center>

</body>

</html>

Adding textarea text to any div using Jquery.

 In JQuery, it is very simple to add textarea text to any div on button click. See below how it is possible:

 $("#div").html( $("#txtarea").val() ); //to add text of text area to div

This will add the textarea text to div element.

The complete example is given below-

<!DOCTYPE html>

<html>

<body>

<center>

<textarea cols="50" rows="8" id="txtarea" required></textarea>

<br>

<button id="action">Add text to div</button>

<div id="div"></div>

<!-- Scripts before </body> -->

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

<script>

$('#action').click(function() {

  $("#div").html( $("#txtarea").val() ); //to add text of text area to div

});

</script>

</center>

</body>

</html>

Change image source on click on image using JQuery.

 It is also very simple using .attr() method to change any image source on click.

// Change src attribute of image

       $(this).attr("src", "2.jpeg");

This will change first image with 2.jpeg.

Complete example-

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script>

$(document).ready(function(){

    $("img").click(function(){

        // Change src attribute of image

        $(this).attr("src", "2.jpeg");

    });    

});

</script>

</head>

<body>

      <img src="1.jpg" alt="image"></img>

        <p><strong>Instruction:</strong> Click on the image to change its source.</p>

</body>

</html>

Dynamically create hypertext and hyperlink using JQuery.

 Creating hypertext and hyperlink is a very easy task in JQuery. Using .append() function, we can create hypertext and using .attr(), we can create hyperlink. See how.

 $("a").append(" <b>Link created, click here</b>."); //append/create link to hyper text

The above function will append/create a hypertext to anchor the link.

 $("a").attr("href", "https://arvindignou.blogspot.com"); //create hyperlink

The above .attr() funntion will create link/hyperlink of anchor tag.

Complete example:-

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

  $("#btn1").click(function(){

      $("a").append(" <b>Link created, click here</b>."); //append/create link to hyper text

   $("a").attr("href", "https://arvindignou.blogspot.com"); //create hyperlink

  });

});

</script>

</head>

<body>

<a href=""></a>   <!- dynamically hypertext and hyperlink will be created here-!>

</br>

<button id="btn1">Create Hyperlink and Hypertext</button>

</body>

</html>

Adding one/many Div text to another Div using JQuery.

If you want to any div text to another or many div's text to another div, then it is very simple using JQuery.

Just use the below JQuery code to append text to div.

   $("#targetdivid").append($("#sourcedivid").html());

Complete example:-

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function(){

  $("#btn1").click(function(){                     // on button click

       $("#demo").append($("#one").html());    //append one div text to demo

   $("#demo").append($("#two").html());       //append second div text to demo

     $("#demo").append($("#three").html());    //append third div text to demo

         

  });

});

</script>

</head>

<body>

<center>

<div id="one" style="border:1px solid; width:50%">This is first div tag </div>

<div id="two" style="border:1px solid; width:50%">This is second div tag </div>

<div id="three" style="border:1px solid; width:50%">This is third div tag </div>

<div id="demo" style="border:1px solid; width:20%"></div></br>

<button id="btn1">Add all div text to demo div</button>

</center>

</body>

</html>

Popup HTML window/page on centre of screen.

 To create a popup page/window on the screen. Please follow the following script-

The below code will work only on hyperlink

<a href="popup.php"target="popup"  onclick="window.open('database.php','popup','width=300,height=200'); return false;">Click for pop-up page/window</a>

And for open popup window on center of screen on click on any hyperlink, then-

<script>

function CenteredPopup(url, title, w, h) { var left = (screen.width/2)-(w/2);

var top = (screen.height/2)-(h/2);

return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);

}

</script>

<a onclick="CenteredPopup('popuppage.html', 'popup title',350,350);" href="javascript:void(0);">CLICK for centered pop up</a>

If you are using a button to popup any page, then-

If you want to open this window on the non-center of the screen then-

<script>

        function PopupnoncentWin(pageURL, pageTitle,

                    popupWinWidth, popupWinHeight) {

            var left = (screen.width ) ;

            var top = (screen.height ) ;

            var myWindow = window.open(pageURL, pageTitle, 

                    'resizable=yes, width=' + popupWinWidth

                    + ', height=' + popupWinHeight + ', top='

                    + top + ', left=' + left);

        }

    </script>

<button onclick = "PopupnoncentWin('popuppage.html',

            'Pop-Up title', 200, 200);">

        Popup example

    </button>

If you want to open this window on the center of the screen then-

<script>

        function PopupcenWin(pageURL, pageTitle,

                    popupWinWidth, popupWinHeight) {

            var left = (screen.width - popupWinWidth) / 2;

            var top = (screen.height - popupWinHeight) / 4;

           var myWindow = window.open(pageURL, pageTitle, 

                    'resizable=yes, width=' + popupWinWidth

                    + ', height=' + popupWinHeight + ', top='

                    + top + ', left=' + left);

        }

    </script>

          <button onclick = "PopupcenWin('popcenterpage.html',

            'Popup page title', 200, 250);">

        pop up centered example

    </button>

Convert any PDF file text/text image into word document. Free OCR/PDF to word converter.

 If you have any PDF file containing text or scanned text images, you can convert it into a word document, absolutely free. No matter how big a file it is. Generally, online tools and software require money to convert it or convert it in limited pages.

Now see how it is possible.

You require a Gmail account for this, which is not a big deal now a day,  almost all people have a Gmail account currently.

So, upload your PDF file into your Google Drive, then open it in Google doc and then download it as a .docx file. You can see that the PDF file has been converted into a word document.

Steps-

1. In Google drive --->New ----> File Upload

2. Search file in a drive, Right Click on this file ---> Open with ----> Google Docs

3. Now, the file will open in the new tab of Chrome in Google doc,  

File ----> Download as ----> Microsoft word

Now your PDF file will be downloaded in word document format.