Задать вопрос
cry_san
@cry_san
javascript

Как узнать номер колонки?

Здравствуйте, уважаемое сообщество!
Прошу вашей помощи в следующем вопросе:

Есть html-страница с текстом:

<article>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et,  
    rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor.  
    Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit  
    amet tincidunt orci placerat in. Integer vitae consequat augue.  
  
    //и т.д.
</article>


и стиль к ней:

article {  
    -webkit-column-count:20;  
    -moz-column-count:20;  
    column-count:20;  
}


При клике на какую-нибудь колонку, как узнать её номер и если можно, её scrollLeft?
  • Вопрос задан
  • 11421 просмотр
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
steppefox
@steppefox
Дело в том, что column-count режет на колонки ваш блок автоматически, основываясь на значении в CSS, при этом сами колонки не являются DOM-элементами, т.к. всё выполняется на уровне CSS3. Могу предложить такой алгоритм:
1. Навешиваем обработчик клика на блок, скажем: $('article').on('click',someFunction);
В callback-функции:
2. Находим позицию клика относительно блока article. Тоесть чтобы вы знали координаты клика по горизонтали (оси X) внутри блока.
3. Берем количество колонок, основываясь на свойстве column-count
4. Делим всю ширину блока на количество колонок
5. Согласно координатам клика, методом простых математических расчетов, получаем номер колонки по которой кликнули.
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
SkiF_TLT
@SkiF_TLT
На этапе формирования сохраняйте порядковый номер:

<article data-i="1"> ...  </article> 
<article data-i="2"> ...  </article> 
<article data-i="3"> ...  </article> 
...
<article data-i="N"> ...  </article>


Потом считывайте из этого атрибута данные. Всё просто.
Ответ написан
4 комментария
4 комментария
SkiF_TLT
@SkiF_TLT
А вообще нужный ответ находится здесь

Прямо первая строчка с ходу же решает вашу проблему.
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы