امروز در دومین قسمت از سری آموزش های دوران طراحی وب به سمت متد های جدید HTML5 می رویم
در این قسمت قصد داریم از متدی جدید یا بهتر بگوییم API جدید در زبان HTML5 به نام متد Fullscreen استفاده کنیم و نحوه کار کردن با آن را شرح دهیم . هنگامی که زبان HTML5 رونمایی شد بسیاری از API های مفید و جدید نیز برای آن معرفی گردید که قبل تر این گونه امکانات به وسیله برنامه های جانبی از جمله فلش قابل اجرا بود . با استفاده از این متد می توانیم تمام صفحه سایت خودمان را فول اسکرین یا تمام صفحه کنیم , اما خوبی های این قابلیت جدید به اینجا ختم نمی شود زیرا به کمک این متد می توان کلیه اجزای صفحه از جمله ویدیو ها و تصاویر و… را در سایز بزرگتر یا تمام صفحه نمایش دهیم .
استفاده از این API بسیار ساده می باشد و نیازی به کدنویسی زیادی ندارد .
متد های این API :
دستور زیر یکی از اجزای صفحه را به حالت تمام صفحه می برد:
[javascript]
document.requestFullScreen()
[/javascript]
این دستور تگی با آی دی canvas1 را به حالت تمام صفحه می برد:
[javascript]
document.getElementById(“canvas1”).requestFullScreen()
[/javascript]
دستور زیر برای خارج شدن از حالت تمام صفحه است:
[javascript]
document.cancelFullScreen()
[/javascript]
این دستور در صورتیکه کاربر در حالت تمام صفحه باشد، دستور زیر مقدار true را به عنوان خروجی باز می گرداند:
[javascript]
document.fullScreen
[/javascript]
اگر بخواهیم بفهمیم کدام المنت در حالت تمام صفحه قرار دارد، می توانیم از این دستور استفاده کنیم:
[javascript]
document.fullScreenElement
[/javascript]
فقط باید به این نکته مهم نیز توجه داشت که نحوه استفاده از این متد در مرورگرهای مختلف از جمله کروم و فایرفاکس متفاوت است و باید متد خاص هر مرورگر را نیز فراخوانی کنیم و باز هم بزرگترین مشکل برنامه نویسان و طراحان وب یعنی ناسازگاری کد ها با مرورگر های مختلف این بار هم گریبانگیر آنان است , این متد با مرورگر های اینترنت اکسپلور و اپرا در ورژن های پایین رابطه خوبی ندارد
اما بییایید کمی خلاقیت به خرج دهیم و کد هایمان را بهینه سازی کنیم :
تابع زیر هر المان یا عنصری از صفحه را که به عنوان آرگومان ورودی دریافت می کند آن را تمام صفحه یا فول اسکرین می کند
[javascript]
var fullScreen = function (element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.webkitRequestFullScreen ) {
element.webkitRequestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
[/javascript]
نحوه استفاده از این تابع به صورت زیر می باشد :
فول اسکرین کردن کل صفحه :
[javascript]
var $document = document.documentElement;
fullScreen($document);
[/javascript]
فول اسکرین کردن یک المان خاص :
[javascript]
var canvas = document.getElementById(‘canvas’);
fullScreen(canvas);
[/javascript]
و اما میرسیم به قسمت خارج شدن از Fullscreen (بازهم خلاقیت!) :
[javascript]
var cancelFullscreen = function () {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.webkitCancelFullScreen ) {
document.webkitCancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
[/javascript]
و اما استفاده از آن :
[javascript]
cancelFullscreen()
[/javascript]
خب به این ترتیب به پایان قسمت دوم از دوران طراحی وب رسیدیم . امیدوارم از این آموزش لذت کافی رو ببرید . اگر سوالی بود لطفا در بخش دیدگاه ها مطرح فرمایید
موفق پیروز و سربلند باشید
-
1 قالب HTML5 تکبرگهای REALM
-
2 قالب HTML چندمنظوره Ortax
-
3 قالب HTML واکنشگرای Halcyon Days
-
4 قالب واکنشگرای چندمنظوره Astonish
-
5 قالب HTML5 واکنشگرای UNOLUTION
-
6 قالب پارالاکس تکبرگهای PRESENCE
-
7 قالب HTML5 واکنشپذیر Shifter
-
8 قالب HTML5 تکبرگهای Beat
-
9 قالب HTML5 واکنشپذیر Pocket
-
10 قالب HTML تخت تکبرگهای Booom!
تشکر از تمپ ها با آموزش های خوبش ، ادامه بده محمد جان ! روحانی متشکریم !
خواهش 😉
این کد هارو کجا میذاریم؟! چطوری میذاریم ؟! من که نفهمیدم :دی یکم راحت تر بگی خیلی آموزش جالب و مفیدی هست
در کل اکثر api های جدید html5 از طریق زبان جاوااسکریپت در دسترس هستند و این api نیز اینگونه هست و باید در زبان جاوااسکریپ و میان تگ script استفاده شوند
موفق باشید
سلام والا چی بگم !دست درد نکنه ولی ی جوری توضیح دادی زیاد جالب نیست! اگه این مطلب ترجمه کردی از جایی ، ببخشید ی زره بیشتر وقت بزار خودت یاد بگیر و بعد به زبان خودت بنویس ۱۰۰%بهتر فک کنم !
سلام . عزیزم بنده از جایی کپی نکردم و آموزش رو هم دقیقا خودم دادم شاید از لحاظ ویراستاری و انتقال مفهوم در زمینه ادبیات ضعیف باشه اما اگر کسی اینکاره باشه یا بهتره بگم برنامه نویس باشه به راحتی کد رو متوجه میشه و می تونه ازش استفاده کنه . در ضمن این آموزش فقط معرفی دستورات جدید HTML5 بود نه آموزش جاوااسکریپت !
موفق باشید
مطلب خوبی بود
فقط در قسمت پایانی مطلب فکر کنم در کدهای بخش خروج از فول اسکرین اشتباهی شده باشه لطفا بررسی کنید.
خواهش می کنم . بله اشکال تایپی بود رفع گردید . ممنون از دقت نظرتون
روحانی متشکریم !
لطفا توضیح دقیقا فیت کردن صفحه اچ تی ام ال رو با رزولوشین های مختلف توضیح بدین
حتما
بیشتر به درد تگ video میخوره اگه اشتباه نکنم!
منم یه مدتی طراحی وب رو دارم یاد میگیرم مثل کاربرای دیگه زیاد متوجه منظورتون نمیشم.
خب ریشه در آشنا نبودن کاربران با کد نویسی داره.
فکر کنم قرار دادن فایل های تمرینی به کاربرا بیشتر کمک کنه.
سلام و عرض ادب
مطالب خوبی بود برای تازه کارها خوبه اما اینو باید بدونی که کپی مطالب دیگران کار اصلا درستی نیست و شما اگه مطلبیو کپی می کنی باید منبعش رو هم بگی و گرنه احتمالا دزد اطلاعات لقب میگیری و این شایسته شما نیست .
در ضمن این کدها اصلا خوب نیستند و توی همه مرور گر ها جواب نمیدن برای تازه کارهایی مثل شما باید عرض کنم که استفاده از jquery بهترین گزینست .متشکرم
سلام
واقعا ممنون
دو روز دنبال این کد میگردم هر سایتی میرفتم آدم دیوانه میکرد
ولی واقعا این آموزشتون خورد ممنون واقعا