امروز در دومین قسمت از سری آموزش های دوران طراحی وب به سمت متد های جدید 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]
خب به این ترتیب به پایان قسمت دوم از دوران طراحی وب رسیدیم .
امیدوارم از این آموزش لذت کافی رو ببرید .
اگر سوالی بود لطفا در بخش دیدگاه ها مطرح فرمایید
موفق پیروز و سربلند باشید
18 Comments
تشکر از تمپ ها با آموزش های خوبش ، ادامه بده محمد جان ! روحانی متشکریم !
خواهش 😉
این کد هارو کجا میذاریم؟! چطوری میذاریم ؟! من که نفهمیدم :دی یکم راحت تر بگی خیلی آموزش جالب و مفیدی هست
در کل اکثر api های جدید html5 از طریق زبان جاوااسکریپت در دسترس هستند و این api نیز اینگونه هست و باید در زبان جاوااسکریپ و میان تگ script استفاده شوند
موفق باشید
سلام والا چي بگم !دست درد نكنه ولي ي جوري توضيح دادي زياد جالب نيست! اگه اين مطلب ترجمه كردي از جايي ، ببخشيد ي زره بيشتر وقت بزار خودت ياد بگير و بعد به زبان خودت بنويس 100%بهتر فك كنم !
سلام . عزیزم بنده از جایی کپی نکردم و آموزش رو هم دقیقا خودم دادم شاید از لحاظ ویراستاری و انتقال مفهوم در زمینه ادبیات ضعیف باشه اما اگر کسی اینکاره باشه یا بهتره بگم برنامه نویس باشه به راحتی کد رو متوجه میشه و می تونه ازش استفاده کنه . در ضمن این آموزش فقط معرفی دستورات جدید HTML5 بود نه آموزش جاوااسکریپت !
موفق باشید
مطلب خوبی بود
فقط در قسمت پایانی مطلب فکر کنم در کدهای بخش خروج از فول اسکرین اشتباهی شده باشه لطفا بررسی کنید.
خواهش می کنم . بله اشکال تایپی بود رفع گردید . ممنون از دقت نظرتون
روحانی متشکریم !
لطفا توضیح دقیقا فیت کردن صفحه اچ تی ام ال رو با رزولوشین های مختلف توضیح بدین
حتما
بیشتر به درد تگ video میخوره اگه اشتباه نکنم!
منم یه مدتی طراحی وب رو دارم یاد میگیرم مثل کاربرای دیگه زیاد متوجه منظورتون نمیشم.
خب ریشه در آشنا نبودن کاربران با کد نویسی داره.
فکر کنم قرار دادن فایل های تمرینی به کاربرا بیشتر کمک کنه.
سلام و عرض ادب
مطالب خوبی بود برای تازه کارها خوبه اما اینو باید بدونی که کپی مطالب دیگران کار اصلا درستی نیست و شما اگه مطلبیو کپی می کنی باید منبعش رو هم بگی و گرنه احتمالا دزد اطلاعات لقب میگیری و این شایسته شما نیست .
در ضمن این کدها اصلا خوب نیستند و توی همه مرور گر ها جواب نمیدن برای تازه کارهایی مثل شما باید عرض کنم که استفاده از jquery بهترین گزینست .متشکرم
سلام
واقعا ممنون
دو روز دنبال این کد میگردم هر سایتی میرفتم آدم دیوانه میکرد
ولی واقعا این آموزشتون خورد ممنون واقعا
آقا یه سوال؟؟؟؟؟
زیاد به این مطلب ربط نداره فقط چون html5 اینجا مطرح میکنم….اگه بلدی ممنون میشم کمکم کنی….
چه جوری میشه کاربر عناصر و در صفحه جابجا کنه با drag & drop نه با گزینه هایی ک خودمون تعریف میکنیم برای move.مثل سایت http://www.msn.com
قسمت ادیت و میبینید؟؟؟
با کد های جاوا اسکریپت این کار قابل انجام میباشد وب سایت w3 قسمت howto رو مشاهده کنید
درود
چگونه می توان حالت خودکار بهش داد و فقط در موبایل این تمام صفحه شدن اتفاق افتد؟
سلام خسته نباشید
یک سوال داشتم من میخواستم وبلاگ هم رو تمام صفحه کنم آیا امکانش هست؟
لوکس بلاگه