Jump to content

What Is The Best Way To Show A Short Term Notification Box?


DeX

Recommended Posts

I have a web application created in PHP where super users can moderate user profiles. When they make a change and save it to the system, I'd like to show a small notification in the lower window to show the outline the change they made and that it was saved. The window should be styled with CSS and only display for a couple of seconds.

 

I don't expect anyone to write out all the code for me, does anyone know what this is called so I can research it? I keep getting tutorials on alert boxes but those aren't what I want. Would I just use a DIV and hide / show it?

Link to comment
Share on other sites

It sounds like you wanna do something like a messenger alert. I made an example.

http://xaotique.no-ip.org/tmp/9/

 

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
       <title>Xaotique</title>
       <meta http-equiv="content-type" content="text/html;charset=utf-8" />
       <link rel="stylesheet" href="stylesheet.css" type="text/css" />
       <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
       <script type="text/javascript" src="script.js"></script>
   </head>

   <body>
       <div id="message">
           Click anywhere to show a notification.
       </div>
   </body>
</html>

 

script.js

$(document).ready(function()
{
   function notify(message, wait, fade)
   {
       var notification = $(document.createElement("div"))
           .html(message)
           .css({ position: "fixed", left: 0, top: $(window).height(), padding: "10px", "background-color": "#CECECE" });

       $("body:first").append(notification);
       notification.animate({ "top": $(window).height() - notification.height() - 20 }, fade);

       notification.delay(wait).animate({ "top": $(window).height() }, fade);

       setTimeout(function()
       {
           notification.remove();
       }, (fade * 2) + wait);
   }

   $(document).click(function(e)
   {
       e.preventDefault();

       notify("You've clicked a notification link!<br />You can add multiple lines to this as well as <span style='color: #880030'>style. (:</span>", 3000, 500);

       return false;
   });
});

 

stylesheet.css

html,

body
{
   padding: 0px;
   border: 0px;
   margin: 0px 0px;
}

a
{
   text-decoration: none;
   color: #0000AC;
}

a:hover
{
   text-decoration: underline;
}

#message
{
   margin: 10px auto;
   text-align: center;
}

Link to comment
Share on other sites

On second thought, I would make each message part of a parent div. This way you could allow multiple notifications, use a fade out to keep it looking nice, and the bottom could slide back down or fade out, doesn't matter. It would keep it looking kind'a nice and allow multiple notifications that don't go over top of eachother.

 

I don't really feel like writing it, but you should be able to figure it out from the example above. It's not much to add.

Edited by Kira
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.