آموزش جاوا اسکریپت نمایش پیام در بالا یا پائین سایت قسمت پانزدهم

در این مطلب قصد داریم نحوه قرار دادن پیامی شناور در بالا (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>
<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 است.

همونطور که عرض شد این یکی از ساده و در عین حال بهترین روش های ممکن برای این کار است که کاملا بهینه می باشد

نمونه ای از آخرین کارهای ما

آموزش جاوا اسکریپت نمایش پیام در بالا یا پائین سایت قسمت پانزدهمReviewed by Goolexacom on Mar 26Rating: 4.5آموزش جاوا اسکریپتآموزش جاوا اسکریپت نمایش پیام در بالا یا پائین سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

اگر ربات نیستی جواب بده *

پشتیبانی سایت سئو سایت

خدمات سایت

سئو

خدمات سایت

پشتیبانی سایت سئو سایت خدمات سایت