كيفية تصميم موقع متجاوب بمساعدة الجافا سكربت

لما يتمتع به التصميم المتجاوب من مميزات وأهميته في وقتنا الحالي ، وذلك للعديد من الأسباب الأساسية التي تتطلب جعل الموقع متجاوب مع الهاتف المحمول والأجهزة اللوحية ، وقد شرحت في مقالة سابقة كيف تصمم موقع متجاوب وماهي الطريقة التي تستخدمها كبرى الشركات ، ولكن كان تحقيق ذلك عبر الخاصية @media query في CSS وهذه هي الطريقة الاعتيادية لتصميم موقع متجاوب .

ولكن في بعض الأحيان نحتاج الى عمل ذلك بواسطة الجافا سكربت سواءً في تغيير اعدادات بعض الإضافات في الجي كويري او في كود كتبناه في الجافا سكربت ، ونحتاج تغيير هذه الإعدادات عند مقاسات محددة للشاشة وفي هذه الحالة يتوجب استخدام الجافا سكربت من غير بديل اخر.

ايضاً نحتاجها في حالة اردنا تغيير تنسيق عنصر معين في الصفحة عند بعد (عرض او ارتفاع) معين لهذا العنصر وليس للشاشة ككل ، وهذا ما لا نستطيع تنفيذه بواسطة @media query في CSS ، لذلك سنلجأ لاستخدام الجافا سكربت بكل تأكيد.

على سبيل المثال اذا كان لدينا سلايد شو لعرض المنتجات وكانت الإعدادات الافتراضية عرض ثلاثة منتجات (صور) في السلايد الواحد وهذا الإعداد طبيعي على أجهزة الكمبيوتر ، في حين ستكون هناك مشاكل في العرض بهذه الإعدادات على الهاتف المحمول والأجهزة اللوحية الصغيرة .

لحل هذه المشكلة سنستخدم الجافا سكربت بحيث نغير القيمة المدخلة الى اعدادات السلايد شو وذلك عن طريق فحص حجم الشاشة بواسطة الجافا سكربت ثم اسناد القيمة المطلوبة للمتغير بناءً على ذلك وهذه الأكواد المستخدمة في ذلك :
1 – هذا الكود يستخدم لإيجاد عرض الشاشة :
screen.width
2 – قياس عرض نافذة المتصفح من الداخل التي يظهر بها الموقع فقط وهذا هو المطلوب للتحقق:
window.innerWidth
هذا مثال على السلايد شو في الجافا سكربت :
<script>
var sliderToShow = 3;
if(window.innerWidth <= 840 && window.innerWidth > 480)
  {
    sliderToShow = 2;
  }
  else if(window.innerWidth <= 480)
  {
    sliderToShow = 1;
  }
</script> 
بالنسبة للتحكم بعرض العنصر وارتفاعه بناءً على البعد الحالي لهذا العنصر سيتم التحقق من ابعاد العنصر وإعادة تنسيقة بواسطة JS-DOM و JS-BOM ، وهذه اهم الأكواد المستخدمة في ذلك ، لقياس عرض وارتفاع العنصر:
element1.clientWidth
element1.clientHeight
وهذا مثال كامل على ذلك :
<script>
var element1 = document.getElementById("element1");
  if(element1.clientWidth <= 800 && element1.clientWidth > 480)
  {
    element1.style.background = "#f00";
  }
  else if(element1.clientWidth <= 480)
  {
    element1.style.display="none";
  }
</script>
ايضا بإمكانكم استخدام دوال الجي كويري التالية للتحقق من الأبعاد :
    width()
    height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()

الى هنا انتهى الشرح وأتمنى اني افدتكم ، وإذا كان لديك سؤال حول الموضوع ضعه في تعليق.
مواضيع ذات صلة

0 اترك تعليقاً...