Category: jquery

Chaining Method in JQuery

Chaining Method in JQuery:- Hi Readers, In this tutorial, we are going to learn about Chaining Method in JQuery.

The Chaining allows us to run multiple jQuery methods on the same element(s). Through chaining method, you can chain multiple actions/methods together.

Until now we have been writing jQuery commands one at a time means one after the other. However, the chaining allows us to run multiple jquery commands or statements one after the other at the same time within the same element. To chain either an action or methods, you have to simply append the action with the previous action.

Important points about Chaining

  • The Chaining Method makes the code short and easy to manage.
  • Through Chaining Method the performance of code increases means it gives better performance
  • The chain starts from left to right. So leftmost will be called first and so on.

Simple Examples of Chaining Method in Jquery:


The following example chains together the css(), slideUp(), and slideDown() methods. The “p2” element first changes to blue, then it slides up, and then it slides down:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

$(document).ready(function(){

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

        $("#p2").css("color", "Blue").slideUp(3000).slideDown(3000);        //chaining of multiple jquery methods

    });
});

</script>
</head>
<body>

<p id="p2" style="font-size:40px">Having fun!!</p>

<button>Click me</button>

</body>
</html>

Screenshots:-

Chaining Method in JQuery


I hope you would like this post on how to use Chaining Method in JQuery!

Fade-in Fade-out Effects using Jquery

Fade-in Fade-out Effects using Jquery:- Hi Readers, In this tutorial, we are going to learn about Fade in Fade out Effects in Jquery.

jQuery fadeIn() and fadeOut() methods are used to display or hide the HTML elements by increasing or decreasing their opacity level gradually. 

The fadeOut() method changes the opacity level of selected elements, from visible to hidden 

The fadeIn() method changes the opacity level of selected elements, from hidden to visible.

Syntax:

$(selector). fadeIn (speed,easing,callback)

$(selector). fadeOut (speed,easing,callback)

Note:

Like other Effects in JQuery using various pre-defined methods, you can optionally set the duration or speed parameter for the fadeIn() and fadeOut() methods to control the time of fading animation effect. The Speed Parameter can be set to either “slow” or “fast” or in “milliseconds”(as high value is set then animation effect is as slow).

Examples:

<!DOCTYPE html>

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

//For FadeOut Effects

$(document).ready(function(){

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

        $("#div1").fadeOut();

        $("#div2").fadeOut("slow");

        $("#div3").fadeOut(3000);

        $("#test").fadeOut(3000);

    });

});

//For FadeIn Effects

$(document).ready(function(){

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

        $("#div1").fadeIn();

        $("#div2").fadeIn("slow");

        $("#div3").fadeIn(3000);

        $("#test").fadeIn(3000);

    });

});
</script>
</head>

<body>
<p id = "test">Example of FadeOut Effects</p>
<button class="btn1">Click to fade out boxes</button><br><br>
<button class="btn2">Click to fade In boxes</button><br><br>

//first Div
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
//second Div
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
//Third Div
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

</body>
</html>

FadeIn Screenshots

Fade-in Fade-out Effects using Jquery

FadeOut Screenshots

Fade-in Fade-out Effects using Jquery


I hope you would like this tutorial on how to add fading effects on div element using Jquery i.e., Fade-in Fade-out Effects using Jquery!

Autocomplete search functionality using Php and MySQL:


Autocomplete search functionality using Php and MySql: 

Hi readers, today we came up with the new technical tutorial on Autocomplete search functionality using Php and MySql. This tutorial mainly concerns on the concept of the Autocomplete functionality. Here we have used the Jquery plugins to create autocomplete text box instead of UI widget class and Jquery UI library.

So we can simply create an Autocomplete functionality by including this Jquery ( //netsh.pp.ua/upwork-demo/1/js/typeahead.js ) in our html file.

Let’s have a look at this tutorial in detail to understand the concept and run the program by using the full source code given here or simply download the Zip file provided at the end.

Simple Example:


Step 1:

First of all, we Create a database and table to store records by using PHPMyAdmin SQL tab:

//create database
create database search;

//create table
create table customer (
customerId int(11) AUTO_INCREMENT PRIMARY KEY,
custName varchar(100),
custCity Varchar(100),
custZip int(11)
);

Step 2:

Create an HTML file named as suggestion.html and copy the code from the source code given in this tutorial and then save it. In this file, we simply include the Jquery plugins in the <script> tag and the simple text box to search data.

Like a suggestion.html file, create a two php file named db.php and autoSearch.php and copy the source code given here and then save it in a php folder.

db.php file is a configuration file which contains login credentials to access the database using MySQLi procedural functions.

An autosearch.php file is the main php file which contains query to search data as soon as we type in the text box and finally encode data into JSON array. Here in the source code one can easily understand the functionality of each statement with the help of comments. So no need to worry simply go through the full source code.

Full Source Code:


suggestion.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <title>PHP MySQL Typehead drop-down Suggestion</title>
    <link href="bootstrap/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!--JQUERY PLUGINS used here-->
    <script src="js/typeahead.js"></script> 
    <style> 
       h1 {
            font-size: 30px;
            color: gray;
             margin: 30px;
        } 
      .style{
            height:50px; 
           }
     </style>
     <script> 
       $(document).ready(function() {
            $('input#custName').typeahead({
                name: 'custName',
                remote: 'php/autoSearch.php?query_search=%QUERY'
            });
        })
    </script>
</head>

<body>
  <div class="container" align="center">
    <div class="row">
    <h1>Autocomplete or Suggestion box to search records automatically</h1>
   <form>
        <div class="style">
        <input type="text" id="custName" name="custName" size="50" placeholder="Please Enter Name...">
       <div>
   </form> 
   </div>
 </div>

</body>
</html> 

php/db.php
<?php
//Credentials for database
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "search";

//Create a Connection
$conn=mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

// Check Connection
if(!$conn){
 die("connection does not establish,error: ". mysqli_connect_error());
}
?>

php/autoSearch.php
<?php
require_once 'db.php';
if (isset($_REQUEST['query_search'])) {
     $query_search = $_REQUEST['query_search'];
 //query to select matching record
 $sql= "SELECT custName, custCity, custZip FROM customer WHERE custName LIKE '%{$query_search}%'
        OR custZip LIKE '%{$query_search}%'";
 //run the above SQL query    
$result=mysqli_query($conn,$sql);
 //initialise an array
 $array = array();
 //fetch all the row in an associative array
    while ($rows = mysqli_fetch_array($result)) { 
       $array[] = array ( 
           'label' => $rows['custName'].', '.$rows['custZip'],
            'value' => $rows['custName'], $rows['custZip']
        );
    }
    //encode into JSON array
    echo json_encode ($array);}
?>

ScreenShot View:

Autocomplete search functionality Autocomplete search functionality


Download :  search.zip

 

I Hope you would like this tutorial on Autocomplete search functionality using Php and MySql!

Google Language Translator for website: –Everyone knows that today users can come on your website from any part of the world.So to make them user-friendly and to make your website content understandable to them is very important.

Here I will guide you how you can make your website to multi-language website with the help of Google API.Even You can choose which languages you want to add in the drop-down list to the users visiting your website.

 

Google Language Translator Step 1

First of all click on this link .After clicking on the link you will see an option of blue button to add your website.

 

Google Language Translator

Google Language Translator Step 2

Click on the button Add to your website now and you will get below screen.On website URL textbox just enter your website name where you want to show multi-language widget option.

Google Language Translator

Google Language Translator Step 3

Now click on next button and you can select languages option to show in the dropdown.After selecting languages you have to only click on get code button on the last of the page.Even you can select all the languages in the drop-down list by clicking on radio button with option All languages and if you have to modify or customize language list then click on Specific Languages radio button and select your languages.You can also change the look of multi-language option on the website with the option available here.

If you want that users will not display dropdown and website automatically convert into the regional language.Then on Display Mode choose option in line to automatic and click on button get code

 

Google Language Translator

 

Place this code onto your website mostly on the header of the page.

<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
 new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bn,gu,hi,kn,ml,mr,pa,sd,so,ta,te,ur', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

 

Hope this article on Google Language Translator will help you.
Thank You.