jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › refresh notification window within timer
Tagged: jqxNotification, Notification, time, timer
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
jQWidgets rock! That said I would like to display a countdown (secs) value within a notification window. I borrowed the demo of jqxNotification and modified it as below. The window closes after 5 seconds but never shows the value of timeLeft.
<!DOCTYPE html> <html> <head> <title id="Description">This demo shows the default functionality of jqxNotification. Multiple instances of the same notification can be opened at the same time.</title> <meta name="keywords" content="jQuery notification, jQWidgets, jqxNotification, notification, unobtrusive notification" /> <meta name="description" content="This demo shows the default functionality of jqxNotification. Multiple instances of the same notification can be opened at the same time." /> <link rel="stylesheet" href="./jqxwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="./javascript/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="./jqxwidgets/jqxcore.js"></script> <script type="text/javascript" src="./jqxwidgets/jqxnotification.js"></script> <script type="text/javascript" src="./jqxwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="./javascript/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#messageNotification").jqxNotification({ width: 250, position: "top-right", opacity: 0.9, autoOpen: false, animationOpenDelay: 800, autoClose: true, autoCloseDelay: 3000, template: "info" }); $("#timeNotification").jqxNotification({ width: 250, position: "top-right", opacity: 0.9, autoOpen: false, animationOpenDelay: 800, autoClose: false, template: "time" }); $("#openMessageNotification, #openTimeNotification").jqxButton({ width: 230, height: 30 }); $("#openMessageNotification").click(function () { $("#messageNotification").jqxNotification("open"); }); $("#openTimeNotification").click(function () { $("#timeNotification").jqxNotification("open"); timeLeft = 5; var counter=setInterval(function() { $("#currentTime").text(timeLeft); $("#timeNotification").jqxNotification("refresh"); timeLeft--; if (timeLeft <= 0) { clearInterval(counter); //countdown ended, do something here $("#timeNotification").jqxNotification("closeLast"); } }, 1000); //1000 will run it every 1 second }); }); </script> </head> <body> <!--Notifications--> <div id="messageNotification"> <div> Welcome to our website. </div> </div> <div id="timeNotification"> <div><span id="currentTime" style="font-weight: bold;"></span></div> </div> <!--Layout--> <button id="openMessageNotification"> Open a message notification</button> <br /> <button id="openTimeNotification" style="margin-top: 10px;"> Open a countdown timer</button> </body> </html>
Is this possible?
Hello rrodini,
Please check out the demo Timer Notification, which shows the functionality you are looking for.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.