{"id":1636,"date":"2010-09-14T00:31:24","date_gmt":"2010-09-13T19:01:24","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=1636"},"modified":"2016-12-19T15:04:56","modified_gmt":"2016-12-19T09:34:56","slug":"jquery-floating-message-box-which-disappears-in-few-seconds","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/jquery-floating-message-box-which-disappears-in-few-seconds\/","title":{"rendered":"jQuery: Floating message box which disappears in few seconds"},"content":{"rendered":"<p>Hi Friends,<\/p>\n<p>Recently in one of the project I was working on, had a long web page and updates used to happen only through ajax calls that means no page refresh. The status messages used to appear on the top of the page, the user had no way but to scroll up to see the status message. There we thought of using floating message that always appears on the top and floats as and when page is scrolled and also disappears itself after specified amount of time. I found one<a href=\"http:\/\/roshanbh.com.np\/2008\/07\/top-floating-message-box-using-jquery.html\"> blog<\/a> by Roshan that helped a lot, which I tweaked a little as given below.<\/p>\n<p>CSS code to be added :<\/p>\n<blockquote>\n<pre lang=\"css\">#message_box {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    z-index: 1000;\r\n    background: #ffc;\r\n    padding: 5px;\r\n    border: 1px solid #CCCCCC;\r\n    text-align: center;\r\n    font-weight: bold;\r\n    width: 99%;\r\n}<\/pre>\n<\/blockquote>\n<p>Html code containing message : :-<\/p>\n<pre lang=\"javascript\">\r\n<div id=\"message_box\">Your message goes here<\/div><\/pre>\n<p>Call setupMessageBox() when message is available.<\/p>\n<pre lang=\"javaScript\"><script type=\"text\/javascript\">\r\n  var updateTimer = 0;\r\n  function setupMessageBox(){\r\n    showMessage(); \/\/displays message on page load\r\n    jQuery(window).scroll(function() {\r\n       showMessage();\r\n    });    \r\n    clearTimeout(updateTimer);\r\n    activateTimer();\r\n  });\r\n\r\n  function activateTimer() {\r\n    updateTimer = setTimeout('jQuery(\"#message_box\").remove()', 5000);\r\n  }\r\n\r\n  function showMessage(){\r\n      jQuery('#message_box').animate({top:jQuery(window).scrollTop() + \"px\" }, {queue: false,duration:350});\r\n  }\r\n<\/script><\/pre>\n<p>Hope this helped!<\/p>\n<p>Cheers,<br \/>\n~~Amit Jain~~<br \/>\namit@intelligrape.com<br \/>\nhttp:\/\/www.tothenew.com<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi Friends, Recently in one of the project I was working on, had a long web page and updates used to happen only through ajax calls that means no page refresh. The status messages used to appear on the top of the page, the user had no way but to scroll up to see the [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":15},"categories":[1],"tags":[407,27,406],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1636"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=1636"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1636\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=1636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=1636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=1636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}