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

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

How to create a search engine

How to create a search engine I am going to teach you how we can create a search engine using Google API . You can add more styles to it ,because I'd be creating a simple looking search engine. Google Custom Search API are wonderful tools to create some awesome search engine like tools. Also if you want to add a search option to your website and customize the look and feel of your search results, Google Custom Search API serve best to you. I have created a Real Time Search engine (I call it real time as it search as you type). I am really impressed by the speed/response of Google Search API. In order to use Google Search API, you have to first generate a Key for you. Go to following page and signup your self for the Key. Sign up for Google API Key https://code.google.com/apis/ajaxsearch/signup.html Next step is to include the Google Search API javascript. Don’t forget to mention your key in the below code. <script src="http://www.google.com/jsapi?key=YOURKEY...
Post a Comment
Read more

All you need to know about web cookies

Hello guys ,we all know as a web developers we need cookies ,i am not talking about the normal cookies , I'm talking of web cookies , it's a really good cookie for us 😋.All dynamic website uses cookies in one way or the other and we would be talking about all the types of cookies websites uses. What are cookies? Cookies are small text files placed on a user’s computer (or smartphone), which are commonly used to collect personal data. Most website operators place cookies on the browser or hard drive of their user's computer. Cookies can gather information about the use of a website or enable the website to recognise the user as an existing customer when they return to the website at a later date. This file is neither a virus nor spyware. The law protects website users and lets them opt-out from the use of cookies on their website browser. What are the benefits of cookies? Cookies are used to make the user's web experience faster, convenient and personalised. ...
Post a Comment
Read more