parsgreen.com
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
related مطالب بیشتر:
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
» ایجاد باکس جمع شونده با جاوا اسکریپت و دریم ویور
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
commentنظرات (۱۱ یادداشت برای این مطلب ارسال شده است)
نویسنده: arezou
زمان: ۱۲:۴۵:۲۸ - تاریخ: ۱۳۹۱/۰۶/۱۴
چرا این برنامه وقتی ضربدر رو میزنی و پیام حذف میشه با رفرش صفحه دوباره ظاهر نمیشود؟
پاسخ: 
این موضوع به دلیل به خاطر داشتن تنظیمات کاربر در کوکی است، اگر می خواهید آن را غیر فعال کنید، باید تابع زیر را در کد پیدا کرده:
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
و آن را به صورت زیر تغییر دهید:
function closebar(){
if (persistclose)
//document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
کافی است علامت // را مطابق مثال اضافه کنید.
نویسنده: ابراهیم
زمان: ۱۲:۴۹:۵۶ - تاریخ: ۱۳۹۱/۱۰/۲۲
سلام، واقعا عالی بود
آیا میشه کاری کرد که کد iframe هم مثل پاپ آپ روزانه یک بار برای هر IP اجرا بشه؟
پاسخ: 
سلام
جواب سوالتان را نمی توان در چند سطر خلاصه کرد اما به طور کلی انجام این نوع کارها با آشنایی با نحوه ایجاد و مدیریت کوکی ها در php و جاوا اسکریپت شدنی است.
نویسنده: ابراهیم
زمان: ۰۵:۲۴:۴۵ - تاریخ: ۱۳۹۱/۱۰/۲۳
اگر می تونید این کد رو برای من بسازید لطفا قیمت و شماره حسابتون رو بدید . ممنون میشم زودتر این اتفاق بیوفته. چون خیلی بهش نیاز دارم
پاسخ: 
لطفا برای سفارش برنامه نویسی از قسمت تماس با ما اقدام و حتی الامکان کار را با جزئیات مطرح کنید تا پاسخ دقیق تری دریافت نمائید، روند سفارشتان را هم از طریق ایمیل پیگیری نمائید.
نویسنده: s
زمان: ۱۹:۰۹:۴۹ - تاریخ: ۱۳۹۱/۱۲/۲۱
خیلی عالی بود.
لطفا اگر امکانش هست این مثال را با css و بدون javascript ارائه دهید، باز هم تشکر از آموزشهای شما :-)
نویسنده: ابوالفضل
زمان: ۰۴:۰۶:۲۱ - تاریخ: ۱۳۹۲/۰۴/۲۵
سلام من در سایت خودم با کد زیر بعد از مدت زمانی یه پیام رو نشون میدم
<script language ="javascript" >window.setTimeout( "Success11();" ,500);</script>
حالا می خوام اگر برای کاربر یه دفعه اون پیام نمایش داده شد دیگه با هر بار ورود به سایت اون پیام براش نمایش داده نشود لطفا راهنمایی بفرمایید
پاسخ: 
سلام
برای این کار باید ابتدا در تابع Success11 وجود یک کوکی را در مرورگر تست کنید، اگر کوکی وجود نداشت، لذا کاربر برای اولین بار صفحه را مشاهده می کند، ضمن نمایش پیام، کوکی را تنظیم می کنیم، در دفعات بعدی کوکی وجود دارد و لذا قسمت اصلی تابع Success11 نباید اجرا شود.
نمونه کد تنظیم کوکی:
function SetCookie(name, value, days){
if(days){
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
نمونه کد تست وجود کوکی:
function GetCookie(name){
if(document.cookie.length > 0){
start = document.cookie.indexOf(name + "=");
if(start != -1){
start = start + name.length + 1;
end = document.cookie.indexOf(";", start);
if(end == -1){
end = document.cookie.length;
}
return unescape(document.cookie.substring(start, end));
}
}
return false;
}
نحوه استفاده:
<script type="text/javascript">
//بررسی وجود کوکی
if(GetCookie('visited') == 'yes'){
alert(GetCookie('visited'));
}
else{
alert('کوکی وجود ندارد');
}
//تنظیم کوکی
SetCookie('visited', 'yes', false);
</script>
نویسنده: aboolfazl
زمان: ۱۸:۱۴:۱۴ - تاریخ: ۱۳۹۲/۰۴/۲۵
سلام
بی نهایت ازتون سپاسگذارم.
نویسنده: نفس
زمان: ۲۰:۰۸:۲۰ - تاریخ: ۱۳۹۲/۰۷/۲۶
سلام. نمیدونم سوالم مربوط به اینجا میشه یا نه ولی من میخوام تو سایت این امکان رو بزارم که مثلا سخن بزرگان که خودم انتخاب می کنم بصورت لوپ بالای صفحه رد بشه. و با هر بار رفرش کردن صفحه این سخن عوض بشه. میشه کمکم کنید؟
پاسخ: 
سلام
می توانید از نمونه کد زیر استفاده کنید:
<script type="text/javascript">
function SetRandomStr(id){
var array = [
'متن 1',
'متن 2',
'متن 3',
'متن 4'
];
document.getElementById(id).innerHTML = array[Math.floor(Math.random() * array.length)];
}
window.onload = function(){
setTimeout("SetRandomStr('loop');", 100);
}
</script>
<marquee id="loop" direction="right"></marquee>
برای تنظیمات بیشتر به آموزش تگ marquee مراجعه نمائید.
نویسنده: سعید ابراهیم پور
زمان: ۱۴:۵۶:۳۴ - تاریخ: ۱۳۹۳/۰۶/۱۰
ضمن عرض سلام
می خواستم بدونم چه طور میشه به بخش خاصی از صفحه رفت البته با جاوا اسکریپت
من یه سایتی دارم درست می کنم که پس از ارسال نظر کاربر پیغام "با موفقیت ثبت شد" نمایش داده می شود که بر پایه html ساخته شده اما این پیام در قسمت پایین صفحه هستش و وقتی اطلاعات ثبت میشه صفحه از نو لود میشه و بالای صفحه نشون داده میشه. می خوام وقتی ثبت شد دقیقاً همون قسمت از صفحه نشون داده بشه که پیغام وجود داره یه چیزی شبیه قسمت نظرات سایت شما که میره سر همون قسمت و ok نشون داده میشه
پاسخ: 
سلام
برای این کار ابتدا باید یک بلاک با id منحصر به فرد داشته باشید، به فرض:
<div id="comment"></div>
سپس در هنگام تنظیم قسمت action برای تگ form، به انتهای آدرس id را به صورت نمونه زیر اضافه کنید:
http://yoursite.com/form.php#comment
نویسنده: فاطمه
زمان: ۲۰:۵۳:۴۶ - تاریخ: ۱۳۹۳/۰۸/۰۶
سلام
ممنون از کد خوبتون
فقط یه سوال میشه کاری کرد که موقعی که پیغام قراره حذف شه با یه جلوه خاصی خارج شه؟
پاسخ: 
سلام
متاسفانه امکان توسعه بیشتر این کد میسر نیست، می توانید عبارت "ساخت افکت رنگی با جاوا اسکریپت" را در وب جستجو و آموزش های مربوط به ایجاد جلوه های ویژه را با این کد ترکیب کنید.
نویسنده: حمید
زمان: ۱۲:۱۶:۰۱ - تاریخ: ۱۳۹۳/۱۱/۱۱
سلام! من یه سوال کلی درباره ی جاوا اسکریپت دارم!‌
چون زیاد علاقه به استفاده از کدهای آماده ندارم میخوام بدونم طراحان قالب از کدهای آماده استفاده میکنن یا نه؟
مثلا شما خودتون این کد رو نوشتین یا این یک کد آماده است؟
آقا کلا بگید من باید جاوا اسکریپت یاد بگیرم یا اینکه یاد بگیرم از کدهای اماده استفاده کنم؟
پاسخ: 
سلام
بستگی به هدف شما دارد!، یک طراح حرفه ای هم کدنویسی بلد است و هم از کدهای آماده (اغلب با اعمال تغییرات سفارشی) استفاده می کند! لذا این دو خللی به یکدیگر وارد نمی کنند، می توانید در حین اینکه کدنویسی آموزش می بینید، در کارهای تجاری از کدهای آماده نیز استفاده کنید، طراح حرفه ای بدون استفاده از کدهای آماده، متصور است، اما حالت برعکس آن عبارت حرفه ای را یدک نمی کشد!
نویسنده: حمید
زمان: ۱۵:۲۱:۲۷ - تاریخ: ۱۳۹۳/۱۱/۱۲
ممنون! حتما همین روند رو پیش میگیرم! میتونید یه سایت خوب برای آموزش کامل جاوا اسکریپت معرفی کنید؟
البته سایت خودتون خوبه اما کامل نیست! خودتون هم باید بدونید!
سایت w3 به نظرم آموزش جاواش زیاد خوب نیست! اگه سایت دیگه ای که کامل باشه میشناسید بگید! فارسی یا انگلیسیش فرقی نداره!
پاسخ: 
تقریبا هیچ سایتی همه مباحث را توضیح نداده است! لذا باید سرفصل های کلی را از چند منبع مطالعه و سپس در موارد کاربردی، بسته به مورد روی جزئیات جستجو و مطالعه کنید.




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 3
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...