آموزش برنامه نویسی وب و مهارتهای مرتبط
دوشنبه ۲۶ شهریور ۱۴۰۳
Monday, September 16, 2024 GMT +3:30
Monday, September 16, 2024 GMT +3:30
نمایش کادر پیام شناور در سایت و وبلاگ با جاوا اسکریپت
به طور معمول طراحان و برنامه نویسان وب برای خلق رابط کاربری (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" or "frombottom"
var verticalpos = "fromtop";direction:rtl;el.sP = function(x,y){this.style.right = x + "px"; this.style.top = y + "px";};<img src="close.gif" border="0" height="12" width="12" alt="close" title="close">var persistclose = 1;var startX = 4;
var startY = 80;دسته بندی: آموزش کاربردی » JavaScript
برچسب ها: JavaScript - وبلاگ نویسی
مطالب بیشتر:ساخت منوی آکاردئونی با جاوا اسکریپت و CSS
استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP
کنترل و تغییر اندازه فونت صفحه با جاوا اسکریپت
چگونه لوگوی حمایتی برای نمایش در سایت یا وبلاگ بسازیم؟
اعتبارسنجی فرم های وب با جاوا اسکریپت (JavaScript)
دیدگاه
۱۲ دیدگاه برای این مطلب ارسال شده است. دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.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 اجرا بشه؟
آیا میشه کاری کرد که کد iframe هم مثل پاپ آپ روزانه یک بار برای هر IP اجرا بشه؟
جواب سوالتان را نمی توان در چند سطر خلاصه کرد اما به طور کلی انجام این نوع کارها با آشنایی با نحوه ایجاد و مدیریت کوکی ها در PHP و جاوا اسکریپت شدنی است.
۰۵:۲۴ ۱۳۹۱/۱۰/۲۳
اگر می تونید این کد رو برای من بسازید لطفا قیمت و شماره حسابتون رو بدید . ممنون میشم زودتر این اتفاق بیوفته. چون خیلی بهش نیاز دارم
لطفا برای سفارش برنامه نویسی از قسمت تماس با ما اقدام و حتی الامکان کار را با جزئیات مطرح کنید تا پاسخ دقیق تری دریافت نمائید، روند سفارشتان را هم از طریق ایمیل پیگیری نمائید.
s
۱۹:۰۹ ۱۳۹۱/۱۲/۲۱
خیلی عالی بود.
لطفا اگر امکانش هست این مثال را با css و بدون javascript ارائه دهید، باز هم تشکر از آموزشهای شما :-)
لطفا اگر امکانش هست این مثال را با 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>سعید ابراهیم پور
۱۴:۵۶ ۱۳۹۳/۰۶/۱۰
ضمن عرض سلام
می خواستم بدونم چه طور میشه به بخش خاصی از صفحه رفت البته با جاوا اسکریپت
من یه سایتی دارم درست می کنم که پس از ارسال نظر کاربر پیغام "با موفقیت ثبت شد" نمایش داده می شود که بر پایه html ساخته شده اما این پیام در قسمت پایین صفحه هستش و وقتی اطلاعات ثبت میشه صفحه از نو لود میشه و بالای صفحه نشون داده میشه. می خوام وقتی ثبت شد دقیقاً همون قسمت از صفحه نشون داده بشه که پیغام وجود داره یه چیزی شبیه قسمت نظرات سایت شما که میره سر همون قسمت و ok نشون داده میشه
می خواستم بدونم چه طور میشه به بخش خاصی از صفحه رفت البته با جاوا اسکریپت
من یه سایتی دارم درست می کنم که پس از ارسال نظر کاربر پیغام "با موفقیت ثبت شد" نمایش داده می شود که بر پایه html ساخته شده اما این پیام در قسمت پایین صفحه هستش و وقتی اطلاعات ثبت میشه صفحه از نو لود میشه و بالای صفحه نشون داده میشه. می خوام وقتی ثبت شد دقیقاً همون قسمت از صفحه نشون داده بشه که پیغام وجود داره یه چیزی شبیه قسمت نظرات سایت شما که میره سر همون قسمت و ok نشون داده میشه
برای این کار ابتدا باید یک بلاک با id منحصر به فرد داشته باشید، به فرض:
<div id="comment"></div>http://yoursite.com/form.php#commentفاطمه
۲۰:۵۳ ۱۳۹۳/۰۸/۰۶
سلام
ممنون از کد خوبتون
فقط یه سوال میشه کاری کرد که موقعی که پیغام قراره حذف شه با یه جلوه خاصی خارج شه؟
ممنون از کد خوبتون
فقط یه سوال میشه کاری کرد که موقعی که پیغام قراره حذف شه با یه جلوه خاصی خارج شه؟
متاسفانه امکان توسعه بیشتر این کد میسر نیست، می توانید عبارت "ساخت افکت رنگی با جاوا اسکریپت" را در وب جستجو و آموزش های مربوط به ایجاد جلوه های ویژه را با این کد ترکیب کنید.
حمید
۱۲:۱۶ ۱۳۹۳/۱۱/۱۱
سلام! من یه سوال کلی درباره ی جاوا اسکریپت دارم!
چون زیاد علاقه به استفاده از کدهای آماده ندارم میخوام بدونم طراحان قالب از کدهای آماده استفاده میکنن یا نه؟
مثلا شما خودتون این کد رو نوشتین یا این یک کد آماده است؟
آقا کلا بگید من باید جاوا اسکریپت یاد بگیرم یا اینکه یاد بگیرم از کدهای اماده استفاده کنم؟
چون زیاد علاقه به استفاده از کدهای آماده ندارم میخوام بدونم طراحان قالب از کدهای آماده استفاده میکنن یا نه؟
مثلا شما خودتون این کد رو نوشتین یا این یک کد آماده است؟
آقا کلا بگید من باید جاوا اسکریپت یاد بگیرم یا اینکه یاد بگیرم از کدهای اماده استفاده کنم؟
بستگی به هدف شما دارد!، یک طراح حرفه ای هم کدنویسی بلد است و هم از کدهای آماده (اغلب با اعمال تغییرات سفارشی) استفاده می کند! لذا این دو خللی به یکدیگر وارد نمی کنند، می توانید در حین اینکه کدنویسی آموزش می بینید، در کارهای تجاری از کدهای آماده نیز استفاده کنید، طراح حرفه ای بدون استفاده از کدهای آماده، متصور است، اما حالت برعکس آن عبارت حرفه ای را یدک نمی کشد!
حمید
۱۵:۲۱ ۱۳۹۳/۱۱/۱۲
ممنون! حتما همین روند رو پیش میگیرم! میتونید یه سایت خوب برای آموزش کامل جاوا اسکریپت معرفی کنید؟
البته سایت خودتون خوبه اما کامل نیست! خودتون هم باید بدونید!
سایت w3 به نظرم آموزش جاواش زیاد خوب نیست! اگه سایت دیگه ای که کامل باشه میشناسید بگید! فارسی یا انگلیسیش فرقی نداره!
البته سایت خودتون خوبه اما کامل نیست! خودتون هم باید بدونید!
سایت w3 به نظرم آموزش جاواش زیاد خوب نیست! اگه سایت دیگه ای که کامل باشه میشناسید بگید! فارسی یا انگلیسیش فرقی نداره!
تقریبا هیچ سایتی همه مباحث را توضیح نداده است! لذا باید سرفصل های کلی را از چند منبع مطالعه و سپس در موارد کاربردی، بسته به مورد روی جزئیات جستجو و مطالعه کنید.
امین
۱۳:۲۴ ۱۳۹۹/۰۵/۲۵
لطفا close.gif را لینک کاملش رو بدید
آدرس URL فایل:
https://webgoo.ir/example/javascript/close.gifآخرین دیدگاه ها
برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.مجتبی
سلام وقت بخیر میخوام یک روز به تاریخ دریافتی اضافه شه ممنون میشم راهنمایی کنید۱۴۰۳/۰۶/۲۰
پرتو
سلام خوبید؟ خسته نباشیذ ببخشید مزاحم شدم می خواستم بگم من به شما ایمیل زدم ولی هنوز شما جواب ندادین می تونم بپرسم چرا سوال...۱۴۰۳/۰۶/۱۵
سیدعباسی
با سلام ببخشید یه سوال دیگه هم دارم من با این تابع فقط یه دونه کانال رو می تونم خروجی بگیرم میخوام توی...۱۴۰۳/۰۵/۰۶
سیدعباسی
با تشکر از شما مشکلم اینکه چطوری عکس پست آخر رو بدست بیارم و بعد با الگوی که اونو نوشتید استخراجش کنم سورس...۱۴۰۳/۰۵/۰۵
سیدعباسی
با سلام من مشکل قبلیم رو که گفتم ارور میده رو حل کردم مشکل بعدیم اینکه با استفاده از این کد با تشکر...۱۴۰۳/۰۵/۰۳
سیدعباسی
با سلام این کد رو چند روز پیش برام فرستادید و کارم رو راه انداخت با این میشه عکس ها رو استخراج کرد...۱۴۰۳/۰۵/۰۱
پرتو
سلام جناب خوبید؟ چیزی شده جواب نمیدین؟ آخه من ایمیل دادمممم ممنون میشم چک کنید لطفا۱۴۰۳/۰۴/۳۱
در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.