نمایش سایز تصویر هنگام تغییر سایز پنجره با استفاده از JavaScript

به نام خدا

با سلام خدمت دوستان عزیز سون‌لرنی. زمانی که دارید یک صفحه رو به صورت ریسپانسیو(واکنش‌گرا) طراحی میکنید، در بیشتر مواقع پنجره ی مرورگر رو کوچیک بزرگ میکنید تا ببینید طرحتون در اندازه‌های مختلف چطوری میشه. در این هنگام حتما نیاز دارید تا اندازه ی تصویر رو در همون حالت بدونید.

برای اینکه سایز تصویر رو هنگام ریسایز ببینید ابزار‌های زیادی وجود داره و یه راه خیلی ساده هم وجود داره ولی یکم اذیت کننده هست؛ اون راه اینه که قسمت بازرسی عنصر مرورگر گوگل کرومتون رو باز بذارید تا وقتی تغییر اندازه میدید سایز تصویر رو در گوشه ی بالای پنجره مشاهده کنید. وقتی این کار رو میکنید، قسمت بازرسی عنصر، قسمتی از صفحه رو میگیره که این خوب نیست؛ و اگه سیستمتون ضعیف باشه ممکنه وقتی ریسایز میکنید مرورگر یکم هنگی بشه!

زیادی سرتونو درد نمیارم و میریم سراغ کدها.

ابتدا باید بدونیم سایز پنجره رو از کجا بدست بیاریم. کافیه که شیء window رو لاگ کنید.(کنسول مرورگرتون رو باز کنید و [tag]window[/tag] رو بنویسید و Enter بزنید.) اگه اینکارو انجام بدید و یه نگاه اجمالی به متد‌ها و خاصیت‌های شیء window بندازید، میبینید که میتونید عرض پنجره رو توسط خاصیت‌های [tag]window.innerWidth[/tag] و [tag]window.outerWidth[/tag] و همچنین ارتفاع رو توسط [tag]window.innerHeight[/tag] و [tag]window.outerHeight[/tag] بدست بیارید. برای اینکه سایز تصویر رو به کاربر نشون بدیم به یک عنصر نیازداریم تا عرض و ارتفاع رو در اون بنویسیم. به صورت زیر این عنصر رو ایجاد میکنیم و به صورت inline بهش استایل میدیم و اون رو درون تگ body قرار میدیم. javascript:

var showSize = document.createElement('div'); // create Element
showSize.setAttribute('style', 'display: none;width: 130px;line-height: 25px; background-color: rgba(255,255,255,.9); text-align: center; position:fixed; top: 0; right: 0; color: #454545'); //set Style
document.body.appendChild(showSize); // appent to <body>
window.addEventListener('resize', function(){// while resize window
	var width = window.innerWidth,
		height = window.innerHeight;
	showSize.textContent = width+'px x '+ height +'px'; //write window's height and width to element
	showSize.style.display = 'block'; //show element
	setTimeout(function(){
		showSize.style.display = 'none';//hide element after 2 seconds
	}, 2000); 
});

همونطور که در کدهای بالا دیدید، وقتی پنجره ریسایز میشه اندازه ی عرض و ارتفاعش رو درون دو متغیر ذخیره میکنیم و سپس اون مقادیر رو درون المنتی که ایجاد کردیم مینویسیم و بعد المنت رو ظاهر میکنیم. سپس توسط متد[tag] setTimeout[/tag] تعیین میکنیم که پس از 2 ثانیه المنت پنهان بشه.

اگر این کدهارو اجرا کنید میفهمید که یه مشکلی وجود داره، و اون اینه که وقتی مرورگر رو ریسایز میکنید چند بار رویداد resize اتفاق میفته ولی 2 ثانیه بعد از اولین ریسایز، المنت پنهان میشه! میشه این مشکل رو به صورت زیر حل کرد:

یک متغییر بالای تابع رویداد ریسایز تعریف میکنیم( به این نوع متغییر‌ها عمومی یا global میگن) و در درون تابع کنترل کننده ی رویداد ریسایز، متد [tag]setTimeout[/tag] رو درون متغیر تعریف میکنیم تا بتونیم اون رو توسط متد [tag]clearTimeout[/tag] از بین ببریم(= از کار بندازیم). به کدهای زیر توجه کنید.

var showSize = document.createElement('div');
showSize.setAttribute('style', 'display: none;width: 130px;line-height: 25px; background-color: rgba(240,240,240,.8); text-align: center; position:fixed; top: 0; right: 0; color: #454545');
document.body.appendChild(showSize);
var timeout;//a global variable (value === undefined)
window.addEventListener('resize', function(e){//controller for `resize` event
	var width = document.innerWidth,
		height = window.innerHeight;
	showSize.textContent = width+'px x '+ height +'px';
	showSize.style.display = 'block';
	if(timeout !== undefined){clearTimeout(timeout);}//clear Timeout if is define
	timeout = setTimeout(function(){
		showSize.style.display = 'none';
	}, 2000);
});

در خط 14 شرطی رو قرار دادیم که اگر متغییر timeout برابر undefined نبود(یعنی قبلا یک بار متد [tag]setTimeout[/tag] در اون ذخیره شده بود)، متد setTimeout رو توسط clearTimeout از کار بندازیم. اگه کدهای بالا رو اجرا کنید میبینید که به خوبی کار میکنه. فقط چون ما این ابزار رو برای کمک در طراحی ریسپانسیو درست کردیم، باید به نکته ای توجه کنیم؛ مقدار هایی که به مدیا کوئری‌ها میدیم، برحسب عرض پنجره حساب نمیشه بلکه بر حسب عرض سند(document یا تگ ریشه) حساب میشه. اگه دقت کنید میبینید که عرض اسکرول بار صفحه معمولا 18 پیکسل هست، بنابراین باید تغییری توی خط  8 ایجاد کنیم. و همچنین برای اینکه کدهای بالا با سایر اسکریپت‌ها دچار تداخل نشن(چون تمام متغیر‌های بیرون از تابع ریسایز به صورت عمومی هستند)، تمام کدهارو درون یک تابع قرار میدیم و اون رو اجرا میکنیم.

(function(){
	var showSize = document.createElement('div');
	showSize.setAttribute('style', 'display: none;width: 130px;line-height: 25px; height: 25px; background-color: rgba(240,240,240,.8); text-align: center; position:fixed; top: 0; right: 0; color: #454545');
	document.body.appendChild(showSize);
	var timeout;
	window.addEventListener('resize', function(e){
		var width = document.documentElement.offsetWidth,
			height = window.innerHeight;
		showSize.textContent = width+'px x '+ height +'px';
		showSize.style.display = 'block';
		if(timeout !== undefined){clearTimeout(timeout);}
		timeout = setTimeout(function(){
			showSize.style.display = 'none';
		}, 2000);
	});
})();

همونطور که در خط هشتم میبینید، مقدار متغیر width رو از عرض پنجره به عرض تگ ریشه تغییر دادیم.

موفق باشید.

 
ارسال دیدگاه
ما همه سوالات و دیدگاه ها رو می خونیم و پاسخ میدیم
۸ دیدگاه
peyman taghavi ۱۵ شهریور ۱۳۹۴، ۱۲:۲۲
سلام خدمت اساتید محترم
من تازه شروع به طراحی ریسپانسیو کردم و الان ی مشکل پیدا کردم اونم اینه که کد ها در سیستم خودم راحت اجرا میشن و کاملا درسته اما زمانی که روی هاست قرار میدم کدهای فایل ریسپانسیوم اجرا نمیشن ممنون میشم راهنماییم کنید.
وحید صالحی ۲۳ شهریور ۱۳۹۴، ۰۰:۲۴
احتمالا آدرس دهی فایل هاتون مشکل داره
ahmad ۲۱ تیر ۱۳۹۴، ۰۹:۴۱
سلام
سایتتون واقعا عالی بیشتر موشکلاتمو از اینجا حل کردم فقط یه مشکلی هس که هرچقد سرچ میکنم چیزی پیدا نمیکنم اونم اینه که من یه سایتیو دارم میسازم با نوت پوک خودم درس همه چی سرجاشه ولی با نوت بوک یا کامپیوتر دیگه میام اشیا بهم ریختن اگه میشه راهنماییم کنید بدجور لنگم جوابو به ایمیلم بفرستید ممنون میشم :?:
وحید صالحی ۱۵ مرداد ۱۳۹۴، ۱۴:۰۱
احتمالا در کدنویسی فایل استالتون مشکل وجود داره
فرهاد ۱۴ شهریور ۱۳۹۳، ۱۸:۱۰
الان شما مثلا این سایت رو ببینید imencontrol . com
وقتی صفحه رو zoom-in یا zoom-out میکنین تصاویر کناری صفحه ثابت سرجاشون موندن
میخوام منم یه همچین صفحه ای طراحی کنم منتهی نمیدونم چطوری کد بزنم که تصاویر سمت راست و چپ که اضافه میکنم ثابت بمون در هدر یا هر قسمت دیگه
تا قبل این عرض رو 970 میگرفتم و یه رنگ یا پترن برای بکگراند میزاشتم حالا میخوام یه قالب 1300 پپیکسلی رو طراحی کنم که روی مانیتور های متفاوت مثل این سایت بالایی نشون بده
ببخشید اگه بد توضیح میدم
علی امینی ۱۴ شهریور ۱۳۹۳، ۲۱:۱۵
اگه منظورتون اون تصویر بزرگ بالایی هست کدش اینطوری میشه: مقدار position تصاویر رو برابر absolute قرار میدی و مقدار top و left تصاویر رو هم برابر 0 قرار میدی.
اگه سوالتونو در انجمن بپرسید به نتایج خوبی میرسید.
موفق باشید
فرهاد ۱۴ شهریور ۱۳۹۳، ۱۵:۲۶
تشکر

اگر بخوایم یه قالبی رو طراحی کنیم که محتوای اصلیش در 970 پیکسل قرار داره ولی در سمت راست و چپ کمی تصویر وجود داره که عرض کلی سایت رو 1300 پیکسل میکنه چطوری باید با جاوا این تصاویر رو در کنار قالب قرار بدیم که با بزرگتر شدن مانیتور تصاویر سمت چپ و راست در پوزیشن اولیه خودقرار بگیرین و جابجا نشوند
من با CSS تصاویر رو در سمت چپ و راست با پوزیشن گذاشتم اما با بزرگتر شدن مانتیور تصاویر کناری جابجا می شوند
با میشه طوری این تصاویر رو کنار قالب قرار داد که با تغییر سایز مانیتور جابجا نشن؟
علی امینی ۱۴ شهریور ۱۳۹۳، ۱۷:۱۰
اگه یه تصویری کدی میزاشتی بهتر بود.
این کارو میشه با CSS انجام داد.
بعد از تگ body یه عنصر ایججاد کن و position شو برابر fixed و عرض و ارتفاعش رو برابر 100% قرار بده. سپس تصاویر رو داخل این عنصر قرار بده و position اینهارو برابر absolute قرار بده. حالا پوزیشن تصاویر رو با خاصیت های top, left, bottom, right مشخص کن.