مؤخرا رايت عدد من المواقع التي تستخدم مؤشر لعرض موضع القراءة الحالي (كم قرأت ، وهذا يتوقف علي مدي التمرير”scroll” الذي قمت به للاسفل. عموما، تستخدم هذه المؤشرات في مقالات المدونات أو المقالات الطويلة وهي تساعد القُراء لمعرفة كم تبقي لهم لانهاء قراءة المقال.
وهذه هي بعض الأمثلة علي ذلك.
- مدونة ستامي استخدمت شريط تحميل أحمر
- موقع بن فرين يعرض عدد الكلمات المتبقية
- موقع المهندسين المعماريين يظهر عدد الدقائق المتبقة
ومن المثير للاهتمام أن كل التقنيات الثلاث تمثل نفس المعلومات ولكن بطرق مختلفة. أنا لا أعرف اذا كان يوجد اسم لهذه الميزة . لذلك قمت بتسميها في المقال مؤشر القراءة.
في هذا المقال، سنركز علي التقنية في المثال الأول التي تستخدم شريط تحميل أفقي كمؤشر. وسنستخدم عنصر التحميل “<progress>” في HTML5 .
اذا لم تقم مسبقا باستخدام عنصر <progress> فمن المفضل قراءة هذه المقالة
المشكلة
لإنشاء مؤشر موضع القراءة، فنحتاج إلي الإجابة علي سؤالين مهمين:
1. ما هو طول صفحة الويب؟ طول صفحة الويب هي نفس طول المستند، ويمكن أن يحسب عن طريق الجافاسكربت.
2. ما هو موضع ومكان القراءة الحالي للمستخدم؟
هذا لا يترك لنا أي خيار سوي معالجة هذه المشكلة باستخدام طريقة مختلفة تماما.
المبدأ
ويستند المبدأ الكامن خلف هذه التقنية علي حقيقة بسيطة وهي أن المستخدم يحتاج لعمل تمرير (Scroll) للوصول لنهاية صفحة الويب.وبمجرد أن يصل المستخدم لآخر الصفحة يمكننا استنتاج أنه قد انتهي من قراءة المقال.تقنيتنا تدور حول حدث التمرير(Scroll) وهو المفتاح لتحديد الموقف التقريبي للمستخدم أثناء القراءة.
بافتراض أن المستخدم يبدأ القراءة من أعلي وسيقوم بالتمرير مرة واحدة للوصول إلي نهاية الصفحة، وسنحاول الإجابة علي الأسئلة التالية:
كم يحتاج المستخدم إلي التمرير للوصول إلي نهاية صفحة الويب؟ جزء الصفحة الخفي من منفذ العرض هو تحديدا كمية التمرير التي يحتاها المستخدم للوصول إلي نهاية الصفحة. وهذا سوف يكون الحد الأقصي.
كم النسبة من الصفحة ، التي قام المستخدم بتمريرها بالفعل؟ هذا يمكن تحديده من خلال حساب إزاحة رأسية لأعلي المستند من أعلي النافذة والتي ستصبح القيمة لدينا.
مثال لمحاكاة سلوك التمرير للمستخدم.
في اطار المتصفح، المستند والنافذة كائنان مختلفان. الإطار هو مساحة العرض في المتصفح (المربع الأزرق السميك في المثال أعلاه) والمستند هو الصفحة نفسها التي تحمل داخل النافذة (المربع الرمادي الرفيع ).
العلامات
دعونا نبدأ مع العلامات الأساسية:
من المهم تحديد خاصية القيمة value.يبدأ المستخدم القراءة من أعلي، وبالتالي قيمة البدابة الافتراضية هي 0 واذا كانت غير محددة تكون القيمة 1 .
لتحديد السمة للقيمة القصوي، نحن بحاجة لطرح ارتفاع النافذة من ارتفاع المستند. ويمكن تنفيذ ها عن طريق الجافاسكربت، ولذلك سنهتم بها في مرحلة لاحقة.
وضع العلامات في HTML يعتمد بشكل كبير علي كيفية وضع بقية العناصر. يمكنك وضع عنصر التحميل فوق كل العناصر داخل علامة <body > .
<body> <progress value="0"></progress> <!-------------------------------- ضع بقية العناصر هنا ---------------------------------> </body>
تصميم المؤشر
حيث أننا نريد أن نضع المؤشر في أعلي صفحة الويب دائما. حتي عندما يقوم المستخدم بعمل تمرير(scroll)، سنقوم بوضع خاصية fixed للمؤشر.بالاضافة إلي أننا نريد خلفية المؤشر شفافة بحيث لا تخلق عائق بصري أثناء التنقل خلال الصفحة.
progress {
/* Positioning */
position: fixed;
left: 0;
top: 0;
/* Dimensions */
width: 100%;
height: 5px;
/* Reset the appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* لحذف البوردر الأساسي في متصفح Firefox,Chrome */
border: none;
/* Progress bar container for Firefox/IE10+ */
background-color: transparent;
/* Progress bar value for IE10+ */
color: red;
}
هذا سنستخدمه لتحديد اللون.
progress::-webkit-progress-bar {
background-color: transparent;
}
progress::-webkit-progress-value {
background-color: red;
}
progress::-moz-progress-bar {
background-color: red;
}
حساب عرض وارتفاع النافذة والمستند بالجافا سكربت هو غير مستقر ويختلف من المتصفحات.وبفضل الجافا سكربت فهي توفر آلية أفضل بكثير لحساب أبعاد النافذة والمستند.وبالتالي سنعتمد علي الجي كويري للتعامل مع جميع التفاعلات مع المستخدم.
من قبل، أن نبدأ لا تنسي أن تضيف مكتبة الجي كويري للمستند.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
نحتاج الجي كويري لتحديد الحد الأقصي (ِMax) وقيمة (value) عنصر شريط التقدم.
Max – القيمة القصوي هي جزء المستند الذي يقع خارج إطار العرض التي يمكن حسابها عن طريق طرح ارتفاع النافذة من ارتفاع المستند.
JQuery
var winHeight = $(window).height(),
docHeight = $(document).height();
max = docHeight - winHeight;
$(progress).attr('max', max);
Value – في البداية، القيمة ستكون صفر (مُعرفة مسبقا). وبمجرد بدأ التمرير ستزيد القيمة.
var value = $(window).scrollTop();
$(progress).attr('value', value);
بدلا من استخدام document في $(document).height() ، يمكننا استخدام عناصر أخري مثل section, article أو div التي تحمل متحوي المقال لحساب الطول.وهذا مفيد جدا في المدونات المليئة بالتعليقات.
الأن، في كل مرة يقوم المستخدم بالتمرير(scrolls)،نقوم باعادة الحساب من أعلي النافذة وثم نحدد القيمة. لاحظ أن القيمة القصوي تكون ثابتة ولا تتغير عندما يقوم المستخدم بالتمرير (scrolls).
$(document).on('scroll', function() {
value = $(window).scrollTop();
progressBar.attr('value', value);
});
الاتجاه الذي يقوم المستخدم بالتمرير ليس مهم، لأننا نحسب دائما الجزء العلوي من النافذة.
$(document).on('ready', function() {
var winHeight = $(window).height(),
docHeight = $(document).height(),
progressBar = $('progress'),
max, value;
/* Set the max scrollable area */
max = docHeight - winHeight;
progressBar.attr('max', max);
$(document).on('scroll', function(){
value = $(window).scrollTop();
progressBar.attr('value', value);
});
});
التوافق مع المتصفحات
Firefox 16+, Opera 11+, Chrome, Safari 6+. IE10+
المتغيرات
يوجد عدد غير قليل من المتغيرات المختلفة الممكنة التي تمكنا من تغيير شكل المؤشر. مخطط الألوان الدلالي هو تجربة مفيدة. حيث يتغير لون المؤشر علي أساس القرب من نهاية المقالة.
- نظام الألوان الفلات (الافتراضي)
- التدرج اللوني الوحيد
- التدرج اللوني المتعدد
- نظام الألوان الدلالي
See the Pen Reading Position Indicator by Pankaj Parashar (@pankajparashar) on CodePen.4025
عمر المساري
مقال رائع تسلم إيدك 🙂