برخی از مشتریان ما:
آموزش ساخت (نوار پيغام) در بالاي وب​سايت

احتمالاً در حين وبگردي، متوجه شده​ايد که در بالاي برخي صفحات در برخي سايت​ها، يک نوار زرد رنگ از طرف طراحان سايت نمايش داده مي​شود و در آن پيغامي نمايش داده مي​شود.

به طور مثال به اين نوار دقت کنيد:

 

http://aftabgardan-cc.com

 

به اين نوار، Infobar گفته مي​شود. در مثال بالا، با کليک روي infobar به بخش ثبت نام هدايت مي​شويد...

اگر شما هم قصد داريد براي صفحه​اي از وب​سايت خود اين نوار را نمايش دهيد، راه حل ساده​اي دارد!

کافي​ست نرم​افزار InfoBar Generator را از اينجا دانلود کنيد و طبق دستور زير چنين نواري ايجاد کنيد:

 

http://aftabgardan-cc.com

 

مطابق شکل بالا عمل کنيد و در نهايت خواهيد ديد که بر روي فايل index.htm که در مسير مشخص شده قرار دارد، کدهايي اضافه شده است.
ضمن اينکه يک پوشه حاوي چند فايل، در کنار فايل index.htm ايجاد شده است که حاوي کدهاي Javascript و CSS مربوطه است. اين پوشه و فايل 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
 
 

 

  3369316 - 0411