قرار دادن پیامی شناور در بالا (top bar) یا پائین (bottom bar) صفحات وب (وبلاگ یا سایت)،
البته راههای زیادی برای انجام این کار وجود دارد، مثلا استفاده از کتابخانه های جی کئوری یا پلاگین های جاوا اسکریپتی،
ولی اکثرا یا حجم زیادی دارند یا اینکه با برخی مرورگرها سازگار نیستند؛
به همین دلیل سعی شده کدی که در عین سبکی و حجم پائین، قابلیت سازگاری و انعطاف پذیری خوبی نیز داشته باشه.
کد جاوا اسکریپت و css نمایش پیام
کد زیر با وجود حجم بسیار پائین، قابلیتهای خوبی دارد، از جمله قابلیت استفاده برای زبان فارسی و انگلیسی (راست به چپ و چپ به راست)،
قابلیت سفارشی سازی با استایل css، هوشمندی (با یادآوری کاربر با استفاده از کوکی)، نمایش در پائین یا بالای صفحه و سازگاری با مرورگرهای استاندارد.
HTML:
<!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>
<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>توضیح:
- برای تغییر تنظیمات ظاهری، آی دی topbar را در استایل css ویرایش کنید.
- برای تغییرات در نمایش از بالای یا پائین صفحه قسمت های مروبط به عبارت fromtop را در کد با frombottom جایگزین کنید.
- برای تغییر زبان و نمایش در سمت چپ صفحه، ابتدا مقادیر direction در آی دی topbar را با ltr جایگزین کنید،
سپس در کد، خطی را که عبارت this.style.right در آن وجود دارد پیدا کنید و با this.style.left جایگزین نمائید.
- برای نمایش دکمه بستن پنجره به صورت عکس، باید تصویر مورد نظر خودتان را آپلود کنید و لینک آن را جایگزین قسمت img src در بلاک div کنید.
- این کد کاملا سازگار با سنجش اعتبار سایت w3c است.