Səhifəni aşağı-yuxarı (şaquli istiqamətdə) doğru hərəkət etdirmək üçün hər hansı əlavə bir kod yazmağa ehtiyac olmadığını bilirik. Səhifəmizdəki məlumatlar nə qədər çox olarsa səhifəmiz sağ tərəfdəki scroll çubuğu ilə aşağı-yuxarı doğru hərəkət etdirilir.
Əslində səhifənin sağa-sola (üfüqi istiqamətdə) hərəkəti üçün də əlavə hər hansı koda ehtiyac yoxdur. Bu tamamilə səhifənin genişliyi ilə əlaqədardır. Genişlik istifadə etdiyimiz kompyuterin çözünürlüyü (resulation – motirodakı pixel sayı) ilə əlaqəlidir. Adətən səhifələrin genişliyini sağdan və soldan boşluqlarla kodlaşdırırıq ki istifadəçi əziyyət çəkməsin. Müasir frameworklərdə isə artıq bunu avtomatik tətbiq etmək mümükündür. Yəni səhifələrin hər istifadəçinin minotoruna uyğun şəkildə göstərilməsi artıq mümkündür.
Ancaq bəzi xüsusi səhifələr var ki onlarda standart qaydalara əməl etmək əvəzinə bəzi qeyri adi dizaynlara üstünlük verilir. Bu yazımda paylaşacağım kodlar da belə istifadə üçün nəzərdə tutulub. Belə ki, səhifəmizdəki mətnlərin aşağı doğru deyil avtomatik olaraq sağa doğru davam etməsini və mouse`un diyircəyi ilə səhifəni sağa sola doğru hərəkət etdirməyi göstərməyə çalışacam.
Əvvəla yeni bir səhifə hazırlamalıyıq. Bunun üçün səhifəmizdə aşağıdaki kodlar yer almalıdır:
|
|
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Səhifəni üfüqi hərəkət etdirmək - Scroll Page Horizontally</title> </head> <body></body> </html> |
Boş səhifəmizi hazırladıqdan sonra səhifəmizə istifadə edəcəyimiz javascript kitabxanalarını əlavə etməliyik. Bunun üçün biz jquery kitabxanasını və səhifəni üfüqi istiqamətdə hərəkət etdirmək üçün jquery.mousewheel kitabxanasını əlavə edəcəyik. Bu kitabxanaları səhifəmizdə head etiketləri içərisinə daxil etməliyik. Kodlar aşağıdaki şəkildə olacaq:
|
|
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script> |
Jquery kitabxanalarını əlavə etdikdən sonra səhifəmizə məlumatlarımızı əlavə edək. Məlumatları əlavə edərkən xüsusi formadan istifadə edəcəyik. Belə ki, məlumatlarımız page-wrap id`li div içərisində post sinifi onun içərisində də h2 etiketi ilə başlıq və p etiketi ilə mətn şəklində daxil edilməlidir. Bunun səbəbi isə bir sonraki addımlarda açıqlanacaq. Məlumatımız aşağıdaki formada body etiketləri arasına əlavə edilməlidir:
|
|
<div id="page-wrap"> <div class="post"> <h2>Lorem Ipsum nədir?</h2> <p>Lorem İpsum – dizayn nəşrlərində istifadə olunan düzgün olmayan mətndir. Dəqiq quruluşa malik olmayan bu mətn latincada hələ XVI əsrdə öz qəlib formasını almışdır. Həmin zamanlarda naməlum bir çapçı Lorem Ipsum`dan istifadə edərək müxtəlif ölçü və formalarda şriftlər kolleksiyası yaratdı və öz nümunələrini çap elədi. Loprem Ipsum əsaslı dəyişikliklərə məruz qalmadan beş əsr yaşadı, hətta bu gün elektron və çap resurslarında öz yerini tutdu. 1960-cı illərdə Letraset vərəqlərinin Lorem Ipsum nümunələri ilə çap olunması onu bizim dövrümüzdə məşhurlaşdırdı. Son zamanlarda da “Aldus PageMarker” proqramının elektron versiyasında Lorem Ipsum qəliblərinə rast gəlmək olar.</p> </div> </div> |
Məlumatlarımızı bu formada bir neçə dəfə əlavə etməliyik ki, səhifədə məlumat çox görünsün ki, sağa sola doğru hərəkət əmələ gəlsin.
Bu şəkildə məlumatlarımızı əlavə etdikdən sonra post sinifi içərisindəki məlumatlara bir genişlik vermək lazımdır. Bu genişliyi verməkdə məqsəd isə səhifənin sağa doğru genişlənməsini istəməyimizdir. Ancaq səhifməzi sağa doğru genişləndiyi zaman səhifəmizin alt hissəsində scroll çubuğu əmələ gələcək. Bu da xoş bir görüntü olmayacaq. Ona görə də body bölməsində css kodlarından istifadə edərək scroll çubuğunu görünməz etməliyik. Bunu da overflow-x kodu ilə edə bilərik. Nəticədə kodlarımız aşağıdaki şəkildə olacaq:
|
|
<style type='text/css'> body { overflow-x: hidden; } .post { width: 500px; } </style> |
Bu stil kodlarını səhifəmizdə head etiketi arasına daxil etməliyik.
İndi isə yuxarıda əlavə etdiyimiz məlumatları avtomatik olaraq javascript kodları ilə cədvəl şəklində göstərməliyik. Yəni post-wrap id`li div`imiz cədvəl, post sinifi`miz isə cədvəldəki sütunlar olmalıdır. Hansı ki yuxarıda css kodları ilə genişliyini 500px dəyərində qeyd etmişdik. Nəticədə cədvəlin sütunları sağa doğru genişlənəcək və məlumatlar səhifənin altına yox sağına doğru genişlənəcək. Bunun üçün aşağıdaki kodları səhifəmizə əlavə etdiyimiz jquery kitabxanalarından sonra əlavə etməliyik:
|
|
<script type='text/javascript'> $(window).load(function(){ $(function () { $("#page-wrap").wrapInner("<table cellspacing='30'><tr>"); $(".post").wrap("<td></td>"); $("body").mousewheel(function (event, delta) { this.scrollLeft -= (delta * 30); event.preventDefault(); }); }); }); </tr></table></script> |
NƏTİCƏ:
Nəticəni ayrı səhifədə buradan yoxlaya bilərsiniz.
Tətbiqi buradan endirim incələyə bilərsiniz.
Qaynaq: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
