System Notification Bar

Floating notification bar for websites

1. Add a Style

<!--floating window style CSS Begin--<style type= "Text/css" > #msg_win{Border:1px solid #A67901;background:#EAEAEA;width:240px;position:Absolute; Right:0;font-size:12px;font-family:Arial;margin:0px;Display:None;Overflow:Hidden;Z-index: About;}#msg_win. Icos{position:Absolute;Top:2px;*top:0px; Right:2px;Z-index:9;}. Icos a{float: Left;Color:#833B02;margin:1px;text-align:Center;Font-weight:Bold;width:14px;Height:22px;Line-height:22px;padding:1px;text-decoration:None;font-family:Webdings;}. Icos a:hover{Color:#fff;}#msg_title{background:#BBDEF6;Border-bottom:1px solid #A67901;Border-top:1px solid #FFF;Border-left:1px solid #FFF;Color:#000;Height:25px;Line-height:25px;text-indent:5px;}#msg_content{margin:5px;Margin-right:0;width:230px;Height:126px;Overflow:Hidden;}</style> <!--floating window style CSS End --

2. Add JS and put it at the end of the page

varMessage={set:function() {//minimizing and resuming state switching        varset= This. Minbtn.status = = 1? [0,1, ' block ', This.Char[0], ' Minimize ']:[1,0, ' none ', This.Char[1], ' unfold '];  This. minbtn.status=set[0];  This. win.style.borderbottomwidth=set[1];  This. Content.style.display =set[2];  This. minbtn.innerhtml =set[3]         This. Minbtn.title = Set[4];  This. Win.style.top = This. GetY (). Top; }, Close:function() {//Close         This. Win.style.display = ' None '; Window.onscroll=NULL; }, SetOpacity:function(x) {//Set Transparency        varv = x >= 100? ': ' Alpha (opacity= ' + x + ') ';  This. win.style.visibility = x<=0? ' Hidden ': ' Visible ';//IE has a bug that absolute or relative positioning content does not change with the parent's transparency         This. Win.style.filter =v;  This. win.style.opacity = x/100; }, Show:function() {//FadeClearinterval ( This. Timer2); varme = This, FX = This. FX (0, 0.1), T = 0;  This. Timer2 = SetInterval (function() {T=FX (); Me.setopacity (t[0]); if(t[1] = = 0) {clearinterval (Me.timer2)}},10); }, FX:function(A, B, c) {//Buffer Calculation        varCmath = math[(A-B) > 0? "Floor": "ceil"],c = C | | 0.1; return function() {return[A + = Cmath ((b-a) * c), A-b]}}, GetY:function() {//Calculate moving coordinates        varD = document,b = Document.body, E =document.documentelement; vars =Math.max (B.scrolltop, e.scrolltop); varh =/backcompat/i.test (Document.compatmode)?B.clientheight:e.clientheight; varH2 = This. Win.offsetheight; return{foot:s + H + H2 + ' px ', top:s + h-h2-2+ ' px '}}, MoveTo:function(y) {//Moving AnimationsClearinterval ( This. Timer); varme = This, a = parseint ( This. win.style.top) | | 0; varFX = This. FX (A, parseint (y)); vart = 0 ;  This. Timer = SetInterval (function() {T=FX (); Me.win.style.top= t[0]+ ' px '; if(t[1] = = 0) {clearinterval (Me.timer);            Me.bind (); }        },10); }, bind:function(){//bind window scroll bar with size Change event        varMe= This, St,rt; Window.onscroll=function() {cleartimeout (ST);            Cleartimeout (ME.TIMER2); Me.setopacity (0); St= SetTimeout (function() {me.win.style.top=me.gety (). Top;            Me.Show (); },600);        }; Window.onresize=function() {cleartimeout (RT); RT= SetTimeout (function() {me.win.style.top = Me.gety (). top},100); }}, init:function() {//Create HTML        function$ (ID) {returndocument.getElementById (ID)};  This. win=$ (' Msg_win '); varSET={MINBTN: ' Msg_min ', closebtn: ' Msg_close ', title: ' Msg_title ', content: ' Msg_content '};  for(varIdinchSet) { This[Id] =$ (set[id])}; varme = This;  This. Minbtn.onclick =function() {me.set (); This. blur ()};  This. Closebtn.onclick =function() {me.close ()};  This.Char=navigator.useragent.tolowercase (). IndexOf (' Firefox ') +1? [' _ ', ':: ', ' x ']:[' 0 ', ' 2 ', ' R '];//FF does not support Webdings fonts         This. minbtn.innerhtml= This.Char[0];  This. closebtn.innerhtml= This.Char[2]; SetTimeout (function() {//Initialize first positionMe.win.style.display = ' block '; Me.win.style.top=me.gety (). Foot;        Me.moveto (Me.gety (). top); },0); return  This; }}; Message.init ();</script><!--Floating Window js end-->

3. Add the div to the body last

<!--Floating window HTML code begin -    <HR>    <DivID= "Msg_win"style= "display:block;top:490px;visibility:visible;opacity:1;">        <Divclass= "Icos">            <aID= "Msg_min"title= "Minimized"href= "Javascript:void 0">_</a><aID= "Msg_close"title= "Off"href= "Javascript:void 0">x</a>        </Div>        <DivID= "Msg_title">System Notifications -</Div>        <DivID= "Msg_content"style= "Overflow:auto;height:150px;width:100%;white-space:nowrap">            <!--<s:property value= "Devrun" escape= "false"/> -            <ahref= "Www.baidu.com">Qingming Festival Holiday Notice</a>        </Div>    </Div>    <!--Floating window HTML code end -

System Notification Bar