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

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

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


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

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

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

Войти через центр авторизации
Похожие вопросы