DeX Posted October 24, 2012 Share Posted October 24, 2012 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? Quote Link to comment https://forums.phpfreaks.com/topic/269874-what-is-the-best-way-to-show-a-short-term-notification-box/ Share on other sites More sharing options...
Zane Posted October 24, 2012 Share Posted October 24, 2012 google jquery notification or jquery alerts, jQuery will be what you use, unless of course you just happen to find someone that wrote the entire thing in pure Javascript. Quote Link to comment https://forums.phpfreaks.com/topic/269874-what-is-the-best-way-to-show-a-short-term-notification-box/#findComment-1387567 Share on other sites More sharing options...
Zane Posted October 25, 2012 Share Posted October 25, 2012 http://www.freshdesignweb.com/35-useful-jquery-javascript-popup-window-dialog-box.html Quote Link to comment https://forums.phpfreaks.com/topic/269874-what-is-the-best-way-to-show-a-short-term-notification-box/#findComment-1387596 Share on other sites More sharing options...
codefossa Posted October 25, 2012 Share Posted October 25, 2012 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; } Quote Link to comment https://forums.phpfreaks.com/topic/269874-what-is-the-best-way-to-show-a-short-term-notification-box/#findComment-1387629 Share on other sites More sharing options...
codefossa Posted October 25, 2012 Share Posted October 25, 2012 (edited) 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 October 25, 2012 by Kira Quote Link to comment https://forums.phpfreaks.com/topic/269874-what-is-the-best-way-to-show-a-short-term-notification-box/#findComment-1387638 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.