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.
