• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

8 3610 ۶ شهریور ۹۳

به نام خدا

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

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

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

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

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

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

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

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

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

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    تشکر

    اگر بخوایم یه قالبی رو طراحی کنیم که محتوای اصلیش در 970 پیکسل قرار داره ولی در سمت راست و چپ کمی تصویر وجود داره که عرض کلی سایت رو 1300 پیکسل میکنه چطوری باید با جاوا این تصاویر رو در کنار قالب قرار بدیم که با بزرگتر شدن مانیتور تصاویر سمت چپ و راست در پوزیشن اولیه خودقرار بگیرین و جابجا نشوند
    من با CSS تصاویر رو در سمت چپ و راست با پوزیشن گذاشتم اما با بزرگتر شدن مانتیور تصاویر کناری جابجا می شوند
    با میشه طوری این تصاویر رو کنار قالب قرار داد که با تغییر سایز مانیتور جابجا نشن؟

    • ‏‏
      علی امینی(۱۴ شهریور ۱۳۹۳)

      اگه یه تصویری کدی میزاشتی بهتر بود.
      این کارو میشه با CSS انجام داد.
      بعد از تگ body یه عنصر ایججاد کن و position شو برابر fixed و عرض و ارتفاعش رو برابر 100% قرار بده. سپس تصاویر رو داخل این عنصر قرار بده و position اینهارو برابر absolute قرار بده. حالا پوزیشن تصاویر رو با خاصیت های top, left, bottom, right مشخص کن.

  • ‏‏

    الان شما مثلا این سایت رو ببینید imencontrol . com
    وقتی صفحه رو zoom-in یا zoom-out میکنین تصاویر کناری صفحه ثابت سرجاشون موندن
    میخوام منم یه همچین صفحه ای طراحی کنم منتهی نمیدونم چطوری کد بزنم که تصاویر سمت راست و چپ که اضافه میکنم ثابت بمون در هدر یا هر قسمت دیگه
    تا قبل این عرض رو 970 میگرفتم و یه رنگ یا پترن برای بکگراند میزاشتم حالا میخوام یه قالب 1300 پپیکسلی رو طراحی کنم که روی مانیتور های متفاوت مثل این سایت بالایی نشون بده
    ببخشید اگه بد توضیح میدم

    • ‏‏
      علی امینی(۱۴ شهریور ۱۳۹۳)

      اگه منظورتون اون تصویر بزرگ بالایی هست کدش اینطوری میشه: مقدار position تصاویر رو برابر absolute قرار میدی و مقدار top و left تصاویر رو هم برابر 0 قرار میدی.
      اگه سوالتونو در انجمن بپرسید به نتایج خوبی میرسید.
      موفق باشید

  • ‏‏

    سلام
    سایتتون واقعا عالی بیشتر موشکلاتمو از اینجا حل کردم فقط یه مشکلی هس که هرچقد سرچ میکنم چیزی پیدا نمیکنم اونم اینه که من یه سایتیو دارم میسازم با نوت پوک خودم درس همه چی سرجاشه ولی با نوت بوک یا کامپیوتر دیگه میام اشیا بهم ریختن اگه میشه راهنماییم کنید بدجور لنگم جوابو به ایمیلم بفرستید ممنون میشم ❓

  • ‏‏
    peyman taghavi(۱۵ شهریور ۱۳۹۴)

    سلام خدمت اساتید محترم
    من تازه شروع به طراحی ریسپانسیو کردم و الان ی مشکل پیدا کردم اونم اینه که کد ها در سیستم خودم راحت اجرا میشن و کاملا درسته اما زمانی که روی هاست قرار میدم کدهای فایل ریسپانسیوم اجرا نمیشن ممنون میشم راهنماییم کنید.

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram