تبلیغات
Fact World - نمایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت

آموزش برنامه نویسی و مهارتهای وب

article 

نمایش پیام در بالا یا پائین صفحات وبلاگ و سایت با جاوا اسکریپت

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


یکشنبه 13 مهر 1393

نظرات ()


یکشنبه 26 شهریور 1396 08:40 ب.ظ
Asking questions are really nice thing if
you are not understanding something totally,
except this piece of writing provides pleasant understanding even.
دوشنبه 16 مرداد 1396 05:49 ق.ظ
hello!,I love your writing so so much! proportion we keep up a correspondence more
about your article on AOL? I require an expert in this area to unravel my problem.
May be that is you! Looking forward to look you.
شنبه 14 مرداد 1396 02:07 ب.ظ
Howdy! This is kind of off topic but I need some help from an established blog.
Is it tough to set up your own blog? I'm not very techincal but I can figure
things out pretty fast. I'm thinking about setting up my own but I'm not sure where to start.

Do you have any tips or suggestions? Many thanks

نظر خود را ثبت کنید:

 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر



آگهی
آموزش طراحی سایت
webgoo.ir

آموزش برنامه نویسی و مهارتهای وب
امکانات جانبی


IP شما: ( )