| آموزش ساخت (نوار پيغام) در بالاي وبسايت |
|
احتمالاً در حين وبگردي، متوجه شدهايد که در بالاي برخي صفحات در برخي سايتها، يک نوار زرد رنگ از طرف طراحان سايت نمايش داده ميشود و در آن پيغامي نمايش داده ميشود. به طور مثال به اين نوار دقت کنيد:
![]()
به اين نوار، Infobar گفته ميشود. در مثال بالا، با کليک روي infobar به بخش ثبت نام هدايت ميشويد... اگر شما هم قصد داريد براي صفحهاي از وبسايت خود اين نوار را نمايش دهيد، راه حل سادهاي دارد! کافيست نرمافزار InfoBar Generator را از اينجا دانلود کنيد و طبق دستور زير چنين نواري ايجاد کنيد:
![]()
مطابق شکل بالا عمل کنيد و در نهايت خواهيد ديد که بر روي فايل index.htm که در مسير مشخص شده قرار دارد، کدهايي اضافه شده است. توجه: اين نوار، يک نوار ثابت در بالاي صفحه است. اگر ميخواهيد نواري که ساخته ميشود، همراه با اسکرول کردن صفحه، جابهجا شود، مثل اين صفحه: http://www.javascriptkit.com/script/script2/infobar.shtml بايد قطعه کد زير را بين دو تگbody در کدهاي خود قرار دهيد: <style type="text/css"> #informationbar{ position: fixed; left: 0; width: 100%; text-indent: 5px; padding: 5px 0; background-color: lightyellow; border-bottom: 1px solid black; font: bold 12px Verdana; } * html #informationbar{ /*IE6 hack*/ position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); } </style> <script type="text/javascript"> /*********************************************** * Animated Information Bar- by JavaScript Kit (www.javascriptkit.com) * This notice must stay intact for usage * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more ***********************************************/ function informationbar(){ this.displayfreq="always" this.content='<a href="javascript:informationbar.close()"><img src="close.gif" style="width: 14px; height: 14px; float: right; border: 0; margin-right: 5px" /></a>' } informationbar.prototype.setContent=function(data){ this.content=this.content+data document.write('<div id="informationbar" style="top: -500px">'+this.content+'</div>') } informationbar.prototype.animatetoview=function(){ var barinstance=this if (parseInt(this.barref.style.top)<0){ this.barref.style.top=parseInt(this.barref.style.top)+5+"px" setTimeout(function(){barinstance.animatetoview()}, 50) } else{ if (document.all && !window.XMLHttpRequest) this.barref.style.setExpression("top", 'document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+"px" : body.scrollTop+"px"') else this.barref.style.top=0 } } informationbar.close=function(){ document.getElementById("informationbar").style.display="none" if (this.displayfreq=="session") document.cookie="infobarshown=1;path=/" } informationbar.prototype.setfrequency=function(type){ this.displayfreq=type } informationbar.prototype.initialize=function(){ if (this.displayfreq=="session" && document.cookie.indexOf("infobarshown")==-1 || this.displayfreq=="always"){ this.barref=document.getElementById("informationbar") this.barheight=parseInt(this.barref.offsetHeight) this.barref.style.top=this.barheight*(-1)+"px" this.animatetoview() } } window.onunload=function(){ this.barref=null } </script> <script type="text/javascript"> <!--Invocation code--> var infobar=new informationbar() infobar.setContent('Welcome to JavaScript Kit! It appears you are not registered yet on our site. Why wait? <a href="#">Register here</a>') //infobar.setfrequency('session') //Uncomment this line to set information bar to only display once per browser session! infobar.initialize() </script> موفق باشيد؛ حميد رضا نيرومند منبع: www.aftabgardan-cc.com |













