Задать вопрос
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?
  • Вопрос задан
  • 11427 просмотров
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Веб-дизайн клининговой компании
22 дек. 2024, в 17:54
10000 руб./за проект
Нарисовать UX/UI дизайн для игры. Нарисовать несколько иконок для игры
22 дек. 2024, в 17:45
10000 руб./за проект
Написать макросы для excel
22 дек. 2024, в 17:39
2000 руб./за проект
Ещё заказы