jQuery UI Widgets Forums Dialogs and Notifications Tooltip, Notification, Popover refresh notification window within 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
  • refresh notification window within timer #61557

    rrodini
    Participant

    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?

    refresh notification window within timer #61582

    Dimitar
    Participant

    Hello rrodini,

    Please check out the demo Timer Notification, which shows the functionality you are looking for.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.