jQuery notification Plug-in

9lessons.info - Ravi Tamada

The Basic Setup

• Include the jQuery and notification libraries into your document

  <script type="text/javascript" src="js/jquery_v_1.4.js"></script>
  <script type="text/javascript" src="js/jquery_notification_v.1.js"></script>
                      

• Include the notification CSS into your document

  <link href="css/jquery_notification.css" type="text/css" rel="stylesheet"/>
                      

• Call this showNotification() function in by passing parameters

  showNotification();
                      

Usage:

• Changing Type of notification

  This plug in supports four types of major notifications (Success, Error, Warning and Information). To change the notification type pass parameter type="value" to showNotification() function.
  • Showing Success notification (pass parameter type = "success")

                                    showNotification({
                                        message: "This is a sample Success notification",
                                        type: "success"
                                    });
                                

    Demo:
  • Showing Error notification (pass parameter type = "error")

                                    showNotification({
                                        message: "This is a sample Error notification!",
                                        type: "error"
                                    });
                                

    Demo:
  • Showing Warning notification (pass parameter type = "warning")

                                    showNotification({
                                        message: "This is a sample Warning notification",
                                        type: "warning"
                                    });
                                

    Demo:
  • Showing Information notification (pass parameter type = "information")

                                    showNotification({
                                            type : "information",
                                            message: "This is a sample Warning notification"
                                    });
                                

    Demo:

• Auto Close Notification after some seconds

  To make notification close automatically after some seconds pass parameter autoClose = true and duration parameter.

                          showNotification(){
                              message: "This is Auto Close notification. Message will close after 2 seconds",
                              autoClose: true,
                              duration: 2
                          }
                      

  Demo:

• Showing Notification after some seconds

  You can delay showing message some seconds once the document is ready. Pass parameter startAfter to function with specific seconds

                          showNotification(){
                              message: "This is Auto Close notification. Message will close after 2 seconds",
                              autoClose: true,
                              duration: 2
                          }
                      

  Demo:

Using notification plugin with Ajax Calls

Below is an example of using this plug in with Ajax calls

                $.ajax({
                    type: "POST",
                    data: post_parmas,
                    url: "sample.php",
                    error: function (msg) {
                        // Error occurred in sending request
                        showNotification({
                            message: "Oops! an error occurred.",
                            type: "error" // type of notification is error
                            autoClose: true, // auto close to true
                            duration: 5 // display duration
                        });
                    },
                    success: function (msg) {
                        showNotification({
                            message: "Show Ajax result message here!",
                            type: "error" // type of notification is error/success/warning/information,
                            autoClose: true, // auto close to true
                            duration: 5 // message display duration
                        });
                    }
                });
            

Using with PHP

Below is an example of using plugin with PHP code. The following code will display a message by reading PHP Get parameters.
Always place this code at the end of your page.

                <?php
                if (isset($_GET["type"])) {
                    $message = $_GET["message"];
                    $type = $_GET["type"];
                    ?>
                     <script type="text/javascript">
                        showNotification({
                            message: "<?php echo $message; ?>",
                            type: "<?php echo $type; ?>",
                            autoClose: true,
                            duration: 5                                        
                        });
                    </script>
                    <?php
                }
                ?>
            

Demo: