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