Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2014, 16:39
Новичок на форуме
Отправить личное сообщение для .Nikita Посмотреть профиль Найти все сообщения от .Nikita
 
Регистрация: 05.02.2014
Сообщений: 4

Фиксация события переноса элементов.
Приветствую всех.

Ситуация следующая.

Имеется div в котором
<ul>
<li>1</li>
<li>2</li>
...
<li>N</li>
</ul>

Теги li выводятся горизонтально посредством применения к ним css
то есть примерно так: 1 2 .. N
Естественно что ширина div ограничена и если элементы li не помещаются во всю ширину div то происходит перенос их на новую строку ниже. Нужно отследить этот перенос с целью скрывать не умещающиеся в одну строку (далее будет реализована прокрутка их, чтобы теги li были все в одной строке)
как быть?
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2014, 19:28
Аспирант
Отправить личное сообщение для DeUM Посмотреть профиль Найти все сообщения от DeUM
 
Регистрация: 27.02.2013
Сообщений: 36

Установить высоту и ширину, и скрывать всё не помещающееся.
width: 9999999px;  /* Устанавливаем ширину... */
height: 9999999px; /* и высоту... */
overflow: hidden;   /*  ...и скрываем всё не помещающееся. ()также можно посмотреть overflow-x и overflow-y */
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2014, 21:00
Новичок на форуме
Отправить личное сообщение для .Nikita Посмотреть профиль Найти все сообщения от .Nikita
 
Регистрация: 05.02.2014
Сообщений: 4

Ширина div у меня ограничена половиной экрана. С параметром overflow: hidden экспериментировал, получилось что часть элемента уходящего за границу div всё же видна. И не понятно как в таком виде отследить событие чтобы повесить на него функцию.
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2014, 21:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

.Nikita,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width: 200px;
    overflow: hidden;
    border: 5px solid #FF0000;

  }
  li{
    margin: 0px;
    float: left;
    width: 70px;
    background: #228B22;

  }
  ul{
    margin: 0px;
    display: block;
    width: 280px;
  }

  </style>
</head>

<body>
<div>
<ul>
 <li>1</li>
 <li>2</li>
 <li>...</li>
 <li>N</li>
 </ul>
 </div>
</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2014, 19:01
Новичок на форуме
Отправить личное сообщение для .Nikita Посмотреть профиль Найти все сообщения от .Nikita
 
Регистрация: 05.02.2014
Сообщений: 4

Дело в том что текст в li будет переменной длины (те самые li я добавляю в документ динамически), поэтому параметр width: 70px; не корректен.

Есть ли способ добавить прокрутку в div не вертикальную а горизонтальную?

У меня overflow:auto , когда добавляемые элементы упираются в нижний край вылазит вертикальная полоса прокрутки. Есть ли возможность чтобы добавляемые элементы не переносились на новую строку и добавлялась горизонтальная полоса прокрутки у родительского div/
Ответить с цитированием
  #6 (permalink)  
Старый 08.02.2014, 23:11
Аспирант
Отправить личное сообщение для Sanda Посмотреть профиль Найти все сообщения от Sanda
 
Регистрация: 12.10.2012
Сообщений: 90

white-space со значением no-wrap на li-элементы должно помочь от переноса на новую строку. Дальше, как уже сказали, overflow-y: auto для контейнера.
Ответить с цитированием
  #7 (permalink)  
Старый 25.02.2014, 22:32
Новичок на форуме
Отправить личное сообщение для .Nikita Посмотреть профиль Найти все сообщения от .Nikita
 
Регистрация: 05.02.2014
Сообщений: 4

Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Запрет события Click на дочернем элементе, кот. находится за рамками родителя Smokvin Events/DOM/Window 11 10.11.2013 01:53
Фиксация границ элементов и zoom всех объектов emppu2007 Элементы интерфейса 2 03.10.2013 06:04
Не могу связать два события для разных элементов. nono Элементы интерфейса 8 07.03.2013 19:36
Дебаг js, или как найти обработчик события для тега jimm88 Events/DOM/Window 1 18.04.2012 15:11
Передача параметров в колбэки и дальнейшее их вешанье на события. Gremlin Общие вопросы Javascript 17 13.08.2011 08:54