i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

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

javascript-flower

به طور معمول طراحان و برنامه نویسان وب برای خلق رابط کاربری (User Interface) سایت ها، وبلاگ ها و هرآنچه که به وب مربوط می شود از ایده ها و امکانات زیادی استفاده می کنند که متناسب با نیاز کاربران باشد، یکی از این نیازها می تواند نمایش کادر پیام به صورت شناور در گوشه های سایت یا وبلاگ باشد که به فرض قابلیت هایی مانند امکان بستن و امکان به یادآوری تنظیمات کاربر را داشته و به نوعی به اصطلاح هوشمند باشد، قاعدتا ایجاد این سطح از امکانات با صرف کدهای HTML و CSS امکانپذیر نیست و باید از قدرت زبان جاوا اسکریپت در تعامل با HTML و CSS استفاده کنیم که در این آموزش از همین ترکیب برای خلق کادر پیام شناور هوشمند استفاده کرده ایم.

کد HTML، CSS و JavaScript نمایش کادر پیام شناور


برای نمایش کادر پیام شناور از کدی آماده استفاده کرده ایم، کد آماده زیر با وجود حجم کم قابلیت های بسیار خوبی دارد، از جمله قابلیت استفاده برای زبان فارسی و انگلیسی (نمایش از راست به چپ و چپ به راست)، قابلیت سفارشی سازی با استایل CSS، هوشمندی و یادآوری بسته شدن کادر توسط کاربر با استفاده از کوکی و همچنین اسکرول خودکار به نقطه تعیین شده در صورت پیمایش صفحه توسط کاربر، امکان نمایش در پائین یا بالای صفحه و سازگاری با مرورگرهای استاندارد.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | نمایش کادر پیام شناور در صفحات وب</title>
<!-- Webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    height:1000px;
    direction:rtl;
}
#top-bar{
    position:absolute;
    width:auto;
    visibility:hidden;
    background-color:#F90;        
    border:1px solid #333;
    padding:2px;
    z-index:100;
    direction:rtl;
}
</style>
<script type="text/javascript">
//0 or 1
var persistclose = 1;
var startX = 4;
var startY = 80;
//"fromtop" or "frombottom"
var verticalpos = "fromtop";
function ieCompattest(){
    return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
function getCookie(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("top-bar").style.visibility = "hidden";
}
function staticBar(){
    barheight = document.getElementById("top-bar").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    var d = document;
    
    function ml(id){
        var el = d.getElementById(id);
        if (!persistclose || persistclose && getCookie("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("top-bar");
    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="top-bar">
<a href="" onclick="closeBar(); return false;"><img src="close.gif" border="0" height="12" width="12" alt="close" title="close"></a>
پیامی را که می خواهید در کادر نمایش داده شود در این قسمت درج کنید، برای تست عملکرد کادر صفحه را به پائین اسکرول کنید.
</div>
<hr>
با بسته شدن کادر، کوکی با نام remainclosed با مقدار 1 در مرورگر ایجاد می شود که مانع از نمایش مجدد کادر در بارگذاری های بعدی صفحه خواهد شد، این کوکی تا زمانی که کاربر پنجره مرورگر را نبندد پابرجا خواهد بود لذا برای حذف آن از دکمه ای که بدین منظور در نظر گرفته شده استفاده می کنیم.
<script type="text/javascript">
function showBar(){
    if(persistclose){
        document.cookie = 'remainclosed=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
        window.location.reload(false);
    }
}
</script>
<input type="button" value="نمایش مجدد کادر (حذف کوکی یادآور)" onclick="showBar();">
</body>
</html>
پیش نمایش

سفارشی سازی کد آماده نمایش کادر پیام شناور


امکان سفارشی سازی کد بالا با ایجاد تغییرات در استایل CSS و کدنویسی JavaScript آن در پارامترهای زیر میسر است:
- برای تغییر تنظیمات ظاهری، آی دی top-bar را در استایل CSS ویرایش می کنیم.
#top-bar{
    position:absolute;
    width:auto;
    visibility:hidden;
    background-color:#F90;        
    border:1px solid #333;
    padding:2px;
    z-index:100;
    direction:rtl;
}
- برای تغییر در نمایش کادر در بالا یا پائین صفحه، قسمت مروبط به عبارت fromtop را در متغیر verticalpos با frombottom جایگزین می نمائیم.
//"fromtop" or "frombottom"
var verticalpos = "fromtop";
- برای تغییر زبان و نمایش کادر در سمت چپ صفحه، ابتدا مقادیر direction را در آی دی top-bar با ltr جایگزین و سپس در کد، خطی را که عبارت this.style.right در آن وجود دارد پیدا کرده و با this.style.left جایگزین می کنیم.
direction:rtl;

el.sP = function(x,y){this.style.right = x + "px"; this.style.top = y + "px";};
- برای نمایش دکمه بستن پنجره به صورت تصویر، باید فایل مورد نظر خود را آپلود کرده و لینک آن را جایگزین قسمت img src در بلاک div کنیم.
<img src="close.gif" border="0" height="12" width="12" alt="close" title="close">
- در متغیر persistclose می توانیم عملکرد کادر را در هنگامی که کاربر بر روی دکمه بستن کلیک می کند مشخص کنیم، اگر مقدار 1 باشد با استفاده از کوکی تنظیمات حفظ خواهد شد و در رفرش های بعدی و مراجعه به صفحات دیگر، کادر نمایش داده نخواهد شد، اما اگر این مقدار 0 باشد، این عملکرد نادیده گرفته می شود.
var persistclose = 1;
- در متغیر startX و startY اندازه margin پیش فرض کادر از کناره های صفحه در محور X و Y به پیکسل مشخص می شود.
var startX = 4;
var startY = 80;
- تابع showBar در انتهای صفحه جزء کد اصلی نیست وصرفا جهت تست و حذف کوکی تعریف شده که باید در هنگام استفاده از کد به آن دقت داشته باشیم.
sectionدسته بندی: آموزش کاربردی » JavaScript
related مطالب بیشتر:
» کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
» ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
» ساخت پنل چند سربرگی (tabbed panel) با جاوا اسکریپت و CSS
» نمایش پیام صفحه در حال بارگذاری با جاوا اسکریپت
» چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

6 × 3
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

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

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)
سامانه استخدام ایران
Iran-karyab.com

اطلاع رسانی استخدام های معتبر دانلود رایگان نمونه سئوالات