Blink HTML Div Tag Using JQuery

Introduction

In this article i am going to explain how you can blink div tag with using jQuery. Recently i got new requirement from my client they wants to highlight spacial message/notice/updates/news/offers to end user, and client said they need provision something like in admin panel they wants two different buttons first is to blink message/notice/updates/news/offers added by client for end user from admin side and second button is for to stop blinking message/notice/updates/news/offers.

Blink HTML Div Tag Using JQuery

There is still some advance functionality with this they wants but hear i will just show you how you can blink any html tag like div tag, form tag, anchor tag and etc as well as blink text using query.

Requirement

1) Blink HTML Div Tag.

2) Highlight message/notice/updates/news/offers on HTML Div Tag.

3) Write a Script to Blink HTML Tag.

4) Create HTML Button For Start and Stop Blinking.

5) Write a JavaScript For created button to Start and Stop Blinking HTML Tag.

Implementation

Here we will blink HTML Div tag and to archive this requirement we will use JQuery Toggle() Method, This method is used to hide and show element within web page. JQuery Toggle() Method will check the elements that is selected for visibility and if element is then visible then hide this element and if element is hidden then that will set visible that element and this create a toggle effects.

So here first you need to link jquery-1.7.2.min.js in your web page after <head> tag.

<script src="http://code.jquery.com/jquery-1.7.2.min.js" language="javascript"></script>

Then You need to write script to toggle div tag as well as start and stop blink div tag.

<script language="javascript">
        $(document).ready(function () {
            var blink = null;
            $("#btntoggle").on("click", function () {
                if (blink == null)
                    blink = setInterval(blinkMessage, 500);
            });
            $("#btnstoptoggle").on("click", function () {
                if (blink != null) {
                    clearInterval(blink);
                    blink = null;
                    $(".divmsg").removeClass("divred");
                }
            });
        });
 
        function blinkMessage() {
            $(".divmsg").toggleClass("divred");
        }
    </script>

HTML Markup

<!DOCTYPE html>
<html>
<head>
    <title>JQuery Blinking Example</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js" language="javascript"></script>
    <meta charset="utf-8" />
    <style type="text/css">
        .divmsg {
            background: #ff0097;
            color: #fff;
            display: inline-block;
            margin: 20px 10px 20px 10px;
            padding: 20px;
            border-radius: 5px;
            width: 30%;
            font-family: Verdana;
            font-weight: bold;
        }
 
        .divred {
            background: #223c88 !important;
        }
 
 
        .btn {
            border: 2px solid black;
            background-color: white;
            color: black;
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            margin: 0 0 0 10px;
        }
 
    /* Green */
        .success {
            border-color: #ff0097;
            color: #223c88;
        }
 
            .success:hover {
                background-color: #ff0097;
                color: white;
            }
 
    /* Blue */
        .info {
            border-color: #223c88;
            color: #ff0097;
        }
 
            .info:hover {
                background: #223c88;
                color: white;
            }
 
    </style>
</head>
<body>
    <div class="divmsg">
        Hi...! Codingvila, This is Nikunj Satasiya
    </div><br />
    <input type="button" id="btntoggle" class="btn success" value="Start Blinking" />
    <input type="button" id="btnstoptoggle" class="btn info" value="Stop Blinking" />
 
    <script language="javascript">
        $(document).ready(function () {
            var blink = null;
            $("#btntoggle").on("click", function () {
                if (blink == null)
                    blink = setInterval(blinkMessage, 500);
            });
            $("#btnstoptoggle").on("click", function () {
                if (blink != null) {
                    clearInterval(blink);
                    blink = null;
                    $(".divmsg").removeClass("divred");
                }
            });
        });
 
        function blinkMessage() {
            $(".divmsg").toggleClass("divred");
        }
    </script>
</body>
</html>

Output/Demo

Hi...! Codingvila, This is Nikunj Satasiya

Summary

This article explains how you can blink html div tag using jquery toggleClass and also start and stop blinking using javascript setInterval and clearInterval function.

I Hope this article helps you.

Codingvila

Codingvila provides articles and blogs on web and software development for beginners as well as free Academic projects for final year students in Asp.Net, MVC, C#, Vb.Net, SQL Server, Angular Js, Android, PHP, Java, Python, Desktop Software Application and etc.

Add Comments

More Settings

Thank you for your valuable time, to read this article, If you like this article, please share this article and post your valuable comments.

Once, you post your comment, we will review your posted comment and publish it. It may take a time around 24 business working hours.

Sometimes I not able to give detailed level explanation for your questions or comments, if you want detailed explanation, your can mansion your contact email id along with your question or you can do select given checkbox "Notify me" the time of write comment. So we can drop mail to you.

If you have any questions regarding this article/blog you can contact us on info.codingvila@gmail.com

Tutup Konverter! Emoticon