لما يتمتع به التصميم المتجاوب من مميزات وأهميته في وقتنا الحالي ، وذلك للعديد من الأسباب الأساسية التي تتطلب جعل الموقع متجاوب مع الهاتف المحمول والأجهزة اللوحية.
وقد شرحت في مقالة سابقة
كيف تصمم موقع متجاوب وماهي الطريقة التي تستخدمها كبرى الشركات
، ولكن كان تحقيق ذلك عبر الخاصية @media query في CSS وهذه هي الطريقة الاعتيادية لتصميم موقع متجاوب .
ولكن في بعض الأحيان نحتاج الى عمل ذلك بواسطة الجافا سكربت سواءً في تغيير اعدادات بعض الإضافات في الجي كويري او في كود كتبناه في الجافا سكربت.
ولكن في بعض الأحيان نحتاج الى عمل ذلك بواسطة الجافا سكربت سواءً في تغيير اعدادات بعض الإضافات في الجي كويري او في كود كتبناه في الجافا سكربت.
ونحتاج تغيير هذه الإعدادات عند مقاسات محددة للشاشة وفي هذه الحالة يتوجب استخدام الجافا سكربت من غير بديل اخر.
ايضاً نحتاجها في حالة اردنا تغيير تنسيق عنصر معين في الصفحة عند بعد (عرض او ارتفاع) معين لهذا العنصر وليس للشاشة ككل ، وهذا ما لا نستطيع تنفيذه بواسطة @media query في CSS ، لذلك سنلجأ لاستخدام الجافا سكربت بكل تأكيد.
على سبيل المثال اذا كان لدينا سلايد شو لعرض المنتجات وكانت الإعدادات الافتراضية عرض ثلاثة منتجات (صور) في السلايد الواحد وهذا الإعداد طبيعي على أجهزة الكمبيوتر.
في حين ستكون هناك مشاكل في العرض بهذه الإعدادات على الهاتف المحمول والأجهزة اللوحية الصغيرة .
لحل هذه المشكلة سنستخدم الجافا سكربت بحيث نغير القيمة المدخلة الى اعدادات السلايد شو وذلك عن طريق فحص حجم الشاشة بواسطة الجافا سكربت ثم اسناد القيمة المطلوبة للمتغير بناءً على ذلك وهذه الأكواد المستخدمة في ذلك :
1 – هذا الكود يستخدم لإيجاد عرض الشاشة :
اقرأ أيضا: افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا
لحل هذه المشكلة سنستخدم الجافا سكربت بحيث نغير القيمة المدخلة الى اعدادات السلايد شو وذلك عن طريق فحص حجم الشاشة بواسطة الجافا سكربت ثم اسناد القيمة المطلوبة للمتغير بناءً على ذلك وهذه الأكواد المستخدمة في ذلك :
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>
اقرأ أيضا: افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا
أيضا بإمكانكم استخدام دوال الجي كويري التالية للتحقق من الأبعاد :
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
الى هنا انتهى شرح كيفية تصميم موقع متجاوب بمساعدة الجافا سكربت وأتمنى اني افدتكم ، وإذا كان لديك سؤال حول الموضوع ضعه في تعليق.