DocsAllOver Toast Notification to Detect Internet Connection in CSS & JS Snippets

Toast Notification to Detect Internet Connection in CSS & JS

Oct. 18, 2024

HTML, CSS, Js, Responsive, Toast Notification, Notification

Full Screen

<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <title>Toast Notification to Detect Internet Connection with JavaScript</title>
</head>

<body>
    <div class="wrapper">
        <div class="toast">
            <div class="content">
                <div class="icon"><i class="uil uil-wifi"></i></div>
                <div class="details">
                    <span>You're online now</span>
                    <p>Hurray! Internet is connected.</p>
                </div>
            </div>
            <div class="close-icon"><i class="uil uil-times"></i></div>
        </div>
    </div>
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js'></script>
</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://unicons.iconscout.com/release/v3.0.6/css/line.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    overflow: hidden;
    background: #f2f2f2;
}

.wrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    animation: show_toast 1s ease forwards;
}

@keyframes show_toast {
    0% {
        transform: translateX(-100%);
    }

    40% {
        transform: translateX(10%);
    }

    80%,
    100% {
        transform: translateX(20px);
    }
}

.wrapper.hide {
    animation: hide_toast 1s ease forwards;
}

@keyframes hide_toast {
    0% {
        transform: translateX(20px);
    }

    40% {
        transform: translateX(10%);
    }

    80%,
    100% {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-100%);
    }
}

.wrapper .toast {
    background: #fff;
    padding: 20px 15px 20px 20px;
    border-radius: 10px;
    border-left: 5px solid #2ecc71;
    box-shadow: 1px 7px 14px -5px rgba(0, 0, 0, 0.15);
    width: 430px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .toast.offline {
    border-color: #ccc;
}

.toast .content {
    display: flex;
    align-items: center;
}

.content .icon {
    font-size: 25px;
    color: #fff;
    height: 50px;
    width: 50px;
	padding-top : 0.5rem;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    background: #2ecc71;
}

.toast.offline .content .icon {
    background: #ccc;
}

.content .details {
    margin-left: 15px;
}

.details span {
    font-size: 20px;
    font-weight: 500;
}

.details p {
    color: #878787;
}

.toast .close-icon {
    color: #878787;
    font-size: 23px;
    cursor: pointer;
    height: 40px;
    width: 40px;
	padding-top : 0.5rem;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    transition: all 0.3s ease;
}

.close-icon:hover {
    background: #efefef;
}

// Selecting all required elements
const wrapper = document.querySelector(".wrapper"),
    toast = wrapper.querySelector(".toast"),
    title = toast.querySelector("span"),
    subTitle = toast.querySelector("p"),
    wifiIcon = toast.querySelector(".icon"),
    closeIcon = toast.querySelector(".close-icon");

window.onload = () => {
    function ajax() {
        let xhr = new XMLHttpRequest(); //creating new XML object
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts",
            true); //sending get request on this URL
        xhr.onload = () => { //once ajax loaded
            //if ajax status is equal to 200 or less than 300 that mean user is getting data from that provided url
            //or his/her response status is 200 that means he/she is online
            if (xhr.status == 200 && xhr.status < 300) {
                toast.classList.remove("offline");
                title.innerText = "You're online now";
                subTitle.innerText = "Hurray! Internet is connected.";
                wifiIcon.innerHTML = '<i class="uil uil-wifi"></i>';
                closeIcon.onclick = () => { //hide toast notification on close icon click
                    wrapper.classList.add("hide");
                }
                setTimeout(() => { //hide the toast notification automatically after 5 seconds
                    wrapper.classList.add("hide");
                }, 5000);
            } else {
                offline
                    (); //calling offline function if ajax status is not equal to 200 or not less that 300
            }
        }
        xhr.onerror = () => {
            offline
                (); ////calling offline function if the passed url is not correct or returning 404 or other error
        }
        xhr.send(); //sending get request to the passed url
    }

    function offline() { //function for offline
        wrapper.classList.remove("hide");
        toast.classList.add("offline");
        title.innerText = "You're offline now";
        subTitle.innerText = "Opps! Internet is disconnected.";
        wifiIcon.innerHTML = '<i class="uil uil-wifi-slash"></i>';
    }

    setInterval(() => { //this setInterval function call ajax frequently after 100ms
        ajax();
    }, 100);
}

This snippet creates a visually appealing and informative toast notification that detects internet connectivity and displays a message accordingly. It's a useful tool for providing feedback to users about their network status.

Key Features:

Internet Connectivity Detection: The notification uses JavaScript to continuously monitor the user's internet connection status.
Customizable Styling: Easily modify the appearance of the toast notification using CSS to match your website's design and branding.
Dynamic Content: The notification's message can be customized to display different text based on the internet connection status (e.g., "You're online now" or "Internet connection lost").
Dismissable Notification: The notification can be dismissed by clicking on it or after a specified duration.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the toast notification, including the container, message text, and close button.
Apply CSS Styles: Use CSS to style the toast notification, including its background color, border, font size, and positioning.
Add JavaScript for Functionality: Implement JavaScript to detect internet connectivity using the navigator.onLine property. Update the notification message and display/hide the notification based on the connection status. You can also add event listeners for window focus and blur to handle changes in connectivity.

Latest Snippets

View All