Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
نمایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت
در این مطلب قصد داریم نحوه قرار دادن پیامی شناور در بالا (top bar) یا پائین (bottom bar) صفحات وب (وبلاگ یا سایت) را آموزش دهیم، البته راههای زیادی برای انجام این کار وجود دارد، مثلا استفاده از کتابخانه های جی کئوری یا پلاگین های جاوا اسکریپتی، ولی اکثرا یا حجم زیادی دارند یا اینکه با برخی مرورگرها سازگار نیستند؛ به همین دلیل سعی کرده ایم کدی را قرار دهیم که در عین سبکی و حجم پائین، قابلیت سازگاری و انعطاف پذیری خوبی نیز داشته باشد.

کد جاوا اسکریپت و css نمایش پیام
کد زیر با وجود حجم بسیار پائین، قابلیتهای خوبی دارد، از جمله قابلیت استفاده برای زبان فارسی و انگلیسی (راست به چپ و چپ به راست)، قابلیت سفارشی سازی با استایل css، هوشمندی (با یادآوری کاربر با استفاده از کوکی)، نمایش در پائین یا بالای صفحه و سازگاری با مرورگرهای استاندارد.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | ایجاد پیام شناور در بالا و پائین صفحات وب</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    height:1000px;
}
#topbar{
position:absolute;
border:1px solid #333;
padding:2px;
background-color:#F90;
width:auto;
visibility:hidden;
z-index:100;
direction:rtl;
}
</style>
<script type="text/javascript">
//<![CDATA[
var persistclose=1 //set to 0 or 1.
// 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 4 //set x offset of bar in pixels
var startY = 4 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
    barheight=document.getElementById("topbar").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    var d = document;
function ml(id){
    var el=d.getElementById(id);
    if (!persistclose || persistclose && get_cookie("remainclosed")=="")
    el.style.visibility="visible"
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
    el.x = startX;
    if (verticalpos=="fromtop")
    el.y = startY;
    else{
    el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    el.y -= startY;
    }
    return el;
    }
window.stayTopLeft=function(){
    if (verticalpos=="fromtop"){
    var pY = ns ? pageYOffset : iecompattest().scrollTop;
    ftlObj.y += (pY + startY - ftlObj.y)/8;
    }
    else{
        var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
    ftlObj.y += (pY - startY - ftlObj.y)/8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("topbar");
    stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>
</head>
<body>
<div id="topbar">
<a href="" onclick="closebar(); return false">
<img src="close.gif" border="0" height="12" width="12" alt="close" title="close" /></a>
نکته: نمایش نکته شما ... نمایش نکته شما ... نمایش نکته شما ... نمایش نکته شما
</div>
</body>
</html>


1394/05/30 9:48:42 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما