In this article, I am going to explain how you can blink a div tag using jQuery. Recently I got a new requirement from my client they want to highlight special messages/notices/updates/news/offers to end users, and the client said they need to provide something like in the admin panel they want two different buttons first to blink message/notice/updates/news/offers added by the client for the end-user from the admin side and the second button is for to stop blinking message/notice/updates/news/offers.
 |
| Blink HTML Div Tag Using JQuery |
There is still some advanced functionality with this they want but here 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 a query.
Requirement
1) Blink HTML Div Tag.
2) Highlight messages/notices/updates/news/offers on HTML Div Tag.
3) Write a Script to Blink HTML Tag.
4) Create an 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 the HTML Div tag and to archive this requirement we will use JQuery Toggle() Method, This method is used to hide and show elements within a web page. JQuery Toggle() Method will check the elements that are selected for visibility and if the element is then visible then hide this element and if the element is hidden then that will set that element visible and this creates a toggle effect.
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 a script to toggle the div tag and start and stop the 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 the javascript setInterval and clearInterval functions.
