Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
Страницы: (4) [1] 2 3 ... Последняя » ( Перейти к первому непрочитанному сообщению )  
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> jquery-плагин для стилизации прокрутки, оцените работу и код
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


Всем привет.
Возникла задача организовать вывод контента без классической пагинации - подгружать при прокрутке ajax'ом + реализация и стилизация фейкового скролла.
Перепробовав несколько готовых плагинов, понял, что в большинстве отсутствует одна простая и в то же время необходимая мне фича - вызов коллбэка при достижении скроллом определенной точки. В тех же плагинах, где была реализована эта часть были другие минусы - либо они тянули кучу мертвого кода (например jQuery UI ~300КБ (!!) ради одного лишь dnd), либо безбожно глючили в определенных браузерах (например в Opera), но в основном и то и другое...
Короче поковырявшись пару дней я понял, что проще написать мне свой.
Итак, когда думаю цель плагина ясна - прошу оценить его работу, а также (если не очень лень smile.gif) сделать code review - возможно у вас возникнут полезные замечания по оптимизации либо исправлению потенциальных багов. Особая просьба протестить в старых браузерах вроде ie7, 8, старый FF и т.п., если есть такая возможность.
Впоследствии код будет выложен на github под лицензией MIT во имя общего блага и счастья smile.gif

Спасибо smile.gif

PS. Если есть вопросы по API - пишите smile.gif

UPDATE
исходники на github: https://github.com/Invis1ble/scrollbox

UPDATE от 28.03.2016
добавлена поддержка устройств с тачскрином
актуальное на текущий момент демо тут: https://invis1ble.github.io/scrollbox ( http://bit.ly/1oglsk2 )


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
johniek_comp  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



женат на Node.JS
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 2478
Пользователь №: 28490
На форуме: 5 лет, 6 месяцев, 29 дней
Карма: -19

Трезвый :
22 года, 7 дней


Invis1ble
и где ajax?


--------------------
user posted image
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


johniek_comp
аякса нет, он в демо не нужен smile.gif вместо аякс-запроса и получения данных с сервера идет простое добавление тестовых дивов по setTimeout() при событии reach.scrollbox


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Oyeme  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Reality is wrong. Dreams are for real
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1704
Пользователь №: 16955
На форуме: 7 лет, 10 месяцев, 27 дней
Карма: 96




Выложи на github позже протестирую deeply wink.gif
Сама реализация мне нравиться, cool.gif



--------------------
Programming: Private lessons via skype £45/h

Частные уроки в Лондоне / удаленно по skype.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


Oyeme
ок, ночью выложу, щас спать... со вчера кодил smile.gif


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
johniek_comp  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



женат на Node.JS
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 2478
Пользователь №: 28490
На форуме: 5 лет, 6 месяцев, 29 дней
Карма: -19

Трезвый :
22 года, 7 дней


Invis1ble
а если в диве всего то пару предложений будет?


--------------------
user posted image
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Dezigo  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Indiana Jones
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 1002
Пользователь №: 5429
На форуме: 8 лет, 6 месяцев, 29 дней
Карма: 46




Довольно приятный стиль Вашего кода.
Мне нравиться. smile.gif
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


Выложил на гитхаб
https://github.com/Invis1ble/scrollbox

johniek_comp
Цитата
а если в диве всего то пару предложений будет?

то все будет ок smile.gif если контент целиком помещается в контейнер - полоса прокрутки не появится. Я ведь не зря выложил на jsfiddle, а чтобы можно было поэксперементировать wink.gif
вот тут случай, когда контента мало:
http://jsfiddle.net/yq2Cn/1/
http://jsfiddle.net/yq2Cn/1/embedded/result/

Dezigo
Спасибо rolleyes.gif


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
johniek_comp  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



женат на Node.JS
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 2478
Пользователь №: 28490
На форуме: 5 лет, 6 месяцев, 29 дней
Карма: -19

Трезвый :
22 года, 7 дней


Invis1ble
но дивы не появляются, а я хочу их видеть...


--------------------
user posted image
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


johniek_comp
Цитата
но дивы не появляются, а я хочу их видеть...

так добавь из кода их, в чем проблема-то? biggrin.gif
или я не понял тебя...



Спустя 4 минуты, 24 секунды Invis1ble написал(а):
Еще раз: задача плагина заключается не в добавлении контента, а в предоставлении возможности стороннему коду ловить событие, когда юзер прокрутил до определенной точки. Сторонний код сам решает, как ему реагировать на это событие.


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
johniek_comp  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



женат на Node.JS
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 2478
Пользователь №: 28490
На форуме: 5 лет, 6 месяцев, 29 дней
Карма: -19

Трезвый :
22 года, 7 дней


Invis1ble
контент маленький, скролл не нужен, и должны загрузится дивы, так получается что я не увижу инфу никогда


--------------------
user posted image
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


johniek_comp
Представь ситуацию:
1. юзер заходит в личные сообщения
2. сообщений очень много, выводятся только последние 15, причем высота блока, в который выводятся сообщения меньше, чем общая высота 15 сообщений
3. появляется скролл
4. юзер скроллит вниз, при достижении скажем 100px от низа блока тригеррится событие
5. код ловит событие и делает ajax-запрос
6. после загрузки доп. данных с сервера вставляются более старые сообщения в блок (тестовые дивы в демо)
7. код вызывает scrollbox('update') для перерасчета высоты и позиции полосы прокрутки *
8. PROFIT!

---------
* - эту часть можно реализовать более грамотно (и удобно с точки зрения стороннего кода), например ловить в плагине dommutation-события браузера. Но я не стал реализовывать таким образом в угоду старых браузеров, которые не триггерят такие события.

PS. Т.е. если сообщения полностью помещаются в контейнер по высоте, то очевидно, что и подгружать с сервера нечего smile.gif


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
johniek_comp  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



женат на Node.JS
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 2478
Пользователь №: 28490
На форуме: 5 лет, 6 месяцев, 29 дней
Карма: -19

Трезвый :
22 года, 7 дней


Invis1ble
ну если с базы дергать только 15 последних, и заведомо делать их больше по размеру чем высота блока (что бы появился скролл) тогда да - красава!


--------------------
user posted image
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


Цитата
ну если с базы дергать только 15 последних, и заведомо делать их больше по размеру чем высота блока (что бы появился скролл)

именно

Как будет свободное время, нужно будет составить более-менее вменяемое README, описывающее все нюансы и апи и закоммитить. Проблемка в том, что с английским у меня туговато... (


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Invis1ble  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме




******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 11823
Пользователь №: 23195
На форуме: 6 лет, 5 месяцев, 29 дней
Карма: 430

Трезвый :
7 лет, 4 месяца, 29 дней


Ну что, фронтэндщики? Неужели никто не раскритикует код? huh.gif


--------------------
PMПисьмо на e-mail пользователюСайт пользователя
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темыСтраницы: (4) [1] 2 3 ... Последняя » Ответ в темуСоздание новой темыСоздание опроса