Skip to main content

How to create internet connection status checker for your site users

How to create internet connection checker (Toast notification)


Have you ever wondered how site can detect your internet connection status and inform you about it ?have you ?!
We see this everyday on social media platforms like Facebook and YouTube and I'll teach you how you how you can create yours easily and simple.
we would be using javascript, HTML and Bootstrap 4 Toast component.
So based on Internet connection status like online or offline then it will change its icon, text color and text according to status of internet connection. Here we have use Bootstrap 4 Toast component, so this component has some build in animation, so when internet connection status changes then it will display push toast notification at right side top of the web page, so user can see internet connection has lost or not.It should look something similar to this: Here is the code enjoy !:
<!DOCTYPE html>
<html>
  	<head>
    	<title>Toast Notification for Check Internet Connection    with Bootstrap 4 & javascript</title>
    	<metal name="viewport" content="r=device-width, initial-scale=1.0"><
      	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  		< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  		< script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  		< script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css">
  	</head>
  	<body>
  		<div class="container">
  			
  			
    		<h1 align="center">Internet Connection checker with Bootstrap 4 & javascript<h1>
    				
    	<div>
    	
  	<body>
<html>

<div class="toast" style="position: absolute; top: 25px; right: 25px;">
    <div class="toast-header">
        <i class="bi bi-wifi">
  </i>   
        <strong class="mr-auto">< span class="text-success">You're online now</span></strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
   </div>
    <div class="toast-body">
        Hurray! Internet is connected.
    </div>
</div>

<script>

var status = 'online';
var current_status = 'online';

function check_internet_connection()
{
    if(navigator.onLine)
    {
        status = 'online';
    }
    else
    {
        status = 'offline';
    }

    if(current_status != status)
    {
    if(status == 'online')
        {
            $('i.bi').addClass('bi-wifi');
            $('i.bi').removeClass('bi-wifi-off');
            $('.mr-auto').html("<span class='text-success'>You are online now</span>");
            $('.toast-body').text('Hurray! Internet is connected.');
        }
        else
        {
            $('i.bi').addClass('bi-wifi-off');
            $('i.bi').removeClass('bi-wifi');
            $('.mr-auto').html("<span class='text-danger'>You are offline now</span>");
            $('.toast-body').text('Opps! Internet is disconnected.')
        }

        current_status = status;

        $('.toast').toast({
            autohide:false
        });

        $('.toast').toast('show');
    }
}
  

check_internet_connection();

setInterval(function(){
    check_internet_connection();
}, 1000);

</script>
Labels:

Comments

Post a Comment

Popular posts from this blog

Ecommerce single item cart with php checkoit

email otp sms How to create an ecommerce single item cart with checkout integrations Guys today i am going to teach you guys how to build an ecommerce site with checkout integration but only with a single product, you can add more to it So we are building it using my favorite PHP ,Ajax and JQuery. I have already created a simple shopping cart code in PHP with the product gallery.let's get this over with What are we building? I am not meant to show you this but i would to make you exited about it.And look at the cool checkout page and it really works!!. Single product UI with buy now and Checkout controls This is the code of the landing page created for this example. It includes PHP snippets at the beginning. After that, it has the HTML for displaying only one product tile to users. This tile has the “ Buy now ” button. On clicking it will show an HTML form to collect the customer details, name and email address. By submitting the customer details, it calls the ...
Post a Comment
Read more

Email OTP

email otp sms Email OTP Login with an OTP code is a secure method for the user authentication process. In this method, a one-time password is generated dynamically and sent to the user who attempts login. OTP can be sent to the user’s email or his mobile phone. When the user enters the OTP code then the application will authenticate the user via this code. In this tutorial, we are going to see an example to authenticate user login via an OTP code using email. You can check our mobile sms otp too!  In this example, when the registered user enters email to login, an OTP code is sent to the email address. Using this OTP code the user will be validated. Once the user uses this code then it will be invalid, meaning it cannot be used again. Also, this token will be valid for a day, then it will be expired. Login form with OTP The following code shows login form to the user to enter his email address. On entering email, it shows an input to enter the OTP code sent to his email addres...
Post a Comment
Read more

How to block user IP address from your website in PHP

how to block your website user using their ip address blocking users from your site There are many reasons you may need to block an IP address from visiting your website. For example, to prevent particular users doing malicious things with your website - trying to spam your web forms, or hack your shopping cart, etc. Using PHP, you can easily find your site visitors' website addresses and based on these addresses to redirect them to specific places on your site. If you use such IP ban protection on your website, you will also need to not only list individual addresses to be blocked but also IP masks and IP ranges. In this tutorial I would show you how you can do that.But,it would be manual .i'd talk about manual and automatic way to do it. Let's start! First, we will create an array to list all the IP addresses that we want to block. Besides single IP addresses, we will also use IP ranges such as 216.58.197.101-216.58.197.200 and IP masks 100.88.*.*. Here is the arr...
Post a Comment
Read more