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

Mobile SMS OTP

mobile otp sms How to build SMS otp for verification in php Today ,i am going to teach you something you cannot find easily on the web,which is sms otp . you can also learn email otp .You see that screenshot above? that's exactly what we are building,cool isn't it ? OTP is an effective way of validating users. This type of validation is widely followed by the banking applications, e-commerce software, and many more verticals. In this tutorial, we are going to see how to implement OTP SMS mobile number verification using PHP,isn't that fun?! There are various APIs available in the market for sending SMS via an application. In this code, I have used the Textlocal API for sending OTP SMS. Textlocal is one of the popular SMS services. It provides the SMS service for many programming languages. Download the API PHP class to integrate it into our application platform. For verifying a mobile number by sending OTP SMS with the use of Textlocal API, we need to create a Textlo
Post a Comment
Read more

how to create Session cookies in php

What are Session cookies Session cookies , also known as ' temporary cookies ', help websites recognise users and the information provided when they navigate through a website. Session cookies only retain information about a user's activities for as long as they are on the website. Once the web browser is closed, the cookies are deleted. These are commonly used on shopping websites or e-commerce websites.We have already talked about cookies, Learn all about cookies . Cookies are the reason Trednix.com remembers your username between visits and the reason you don’t necessarily need to log in to your Hotmail account every time you open your browser. Cookie data typically contains a short set of information regarding when you last accessed a site, an ID number, and, potentially, information about your visit. Let’s now look at the basic syntax used to create a cookie. <?php setcookie(cookie_name, cookie_value, [expiry_time], [cookie_path], [domain], [secure], [httponl
Post a Comment
Read more