Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Как такое сделать?

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Bio man
Отправлено: 24 Октября, 2013 - 13:22:29
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
Представим есть контейнер высотой 150пх и шириной на всю страницу.
В этом контейнере флоутом расположены элементы, например, 20х50пх.
Представили? Хорошо.
Теперь увеличим эти элементы, например, на 50. Появится скролл по Y оси.

Задача в том, что бы не было overflow-y, а вместо этого скролл появлялся на X оси.
При этом элементы могут располагаться в 2 строки.

Типо как на картинке.

(Добавление)
Может, для 2 строк, нужно общее кол. элементов поделить на 2 и каждую строку обернуть в свой контейнер?
(Добавление)
Есть какие идеи?

(Отредактировано автором: 24 Октября, 2013 - 13:24:03)

 
 Top
Panoptik
Отправлено: 24 Октября, 2013 - 14:50:04
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
Bio man пишет:
Теперь увеличим эти элементы, например, на 50. Появится скролл по Y оси.
вот тут мое представление заплыло туманом. попробуй объяснить более конкретно
что есть и что нужно


-----
Just do it
 
 Top
Bio man
Отправлено: 24 Октября, 2013 - 14:52:54
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
посмотри на картинку, там схематично показано как должно быть.
в низу это скроллбар.
Panoptik пишет:
что есть
Есть желание это сделать, jquery и bootstrap 3.
 
 Top
Panoptik
Отправлено: 24 Октября, 2013 - 14:55:22
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
так а контенеру с высотой 150пх поставить оверфлов-х: скрол не помогает?


-----
Just do it
 
 Top
Bio man
Отправлено: 24 Октября, 2013 - 14:56:47
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
нет, появляется только пустой скроллбар, все остальное без изменений
 
 Top
Panoptik
Отправлено: 24 Октября, 2013 - 15:01:20
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
я думаю нужно просто посчитать количество внутренних элементов, и ширину каждого
умножить - получить ширину контейнера и назначить джаваскриптом
но возможно нужно будет еще добавить дополнительный враппер


-----
Just do it
 
 Top
Bio man
Отправлено: 24 Октября, 2013 - 15:04:24
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
да, наверно так и придется делать.
будут еще идеи - пишите.
 
 Top
Panoptik
Отправлено: 24 Октября, 2013 - 15:11:00
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2493
Дата рег-ции: Нояб. 2011  
Откуда: Одесса, Украина


Помог: 131 раз(а)
http://jsfiddle[dot]net/qTffF/1/ вот пример наваял


-----
Just do it
 
 Top
Bio man
Отправлено: 24 Октября, 2013 - 18:58:57
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
Panoptik, спасибо!
(Добавление)
Блин, не пойму почему так!
outerWidth равен 21784! (Монитор FullHD, при меньших разрешениях цифра меньше, но тоже заоблочная)
Код
CODE (javascript):
скопировать код в буфер обмена
  1. render: function(params)
  2. {
  3.         // render template
  4.         var tpl = _.template(tplHome); // в переменной tplHome текстовое содержимое шаблона.
  5.         this.$el.html(tpl); // вставляем разметку, с которой будем работать ниже, в DOM.
  6.         //console.log($(tpl()));
  7.  
  8.         var item = $('.cp-widget-preview'),
  9.                 w = item.outerWidth(true),
  10.                 cw = (Math.ceil(item.length/2)) * w;
  11.         $('.cp-widgets-inner').width(cw);
  12.         console.log(item.outerWidth(true));
  13. }

Шаблон
CODE (html):
скопировать код в буфер обмена
  1. <div class="cp-widgets">
  2.         <div class="cp-widgets-inner">
  3.                 <div class="cp-widget-preview well well-sm">test test test</div>
  4.                 <div class="cp-widget-preview well well-sm">test test test</div>
  5.                 <div class="cp-widget-preview well well-sm">test test test</div>
  6.                 <div class="cp-widget-preview well well-sm">test test test</div>
  7.                 <div class="cp-widget-preview well well-sm">test test test</div>
  8.                 <div class="cp-widget-preview well well-sm">test test test</div>
  9.                 <div class="cp-widget-preview well well-sm">test test test</div>
  10.                 <div class="cp-widget-preview well well-sm">test test test</div>
  11.                 <div class="cp-widget-preview well well-sm">test test test</div>
  12.                 <div class="cp-widget-preview well well-sm">test test test</div>
  13.                 <div class="cp-widget-preview well well-sm">test test test</div>
  14.                 <div class="cp-widget-preview well well-sm">test test test</div>
  15.                 <div class="cp-widget-preview well well-sm">test test test</div>
  16.                 <div class="cp-widget-preview well well-sm">test test test</div>
  17.         </div>
  18. </div>

CODE (css):
скопировать код в буфер обмена
  1. .cp-widgets {
  2.         position: fixed;
  3.         left: 0;
  4.         right: 0;
  5.         top: 51px;
  6.         height: 110px;
  7.         z-index: 100;
  8.  
  9.         background: skyblue;
  10. }
  11.  
  12. .cp-widgets-inner {
  13.         position: relative;
  14. }
  15.  
  16. .cp-widget-preview {
  17.         width: 150px;
  18.         padding: 10px 0;
  19.         float: left;
  20.         margin: 5px;
  21. }

(Добавление)
Забыл сказать, используется Backbone + AMD (RequireJS+text plugin)
(Добавление)
А console.log(w); выводит 1556. Хотя по сути это одно и то же что item.outerWidth(true)
(Добавление)
Немного пошаманил и вроде понял в чем проблема.
Проблема в том, что все данные по элементу в CSS файле, а его я подгружаю динамически через RequireJS и вставляю в шапку.

Если подождать немного перед рендером то все воркает.

Отредактировано модератором: armancho7777777, 25 Октября, 2013 - 03:26:09
Пардон.
Спутал со своим сообщением ))
 
 Top
armancho7777777 Супермодератор
Отправлено: 25 Октября, 2013 - 02:13:36
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Всё куда проще.
У внутренних блоков меняем float на display:inline-block, а родителю задаём white-space:nowrap

CODE (css):
скопировать код в буфер обмена
  1.        
  2. .wrapper { padding:10px; }
  3.    
  4.    
  5. .container {
  6.     border:1px solid #999;
  7.     font-size:0; /* Чтобы убрать отступы у внутренних блоков в Опере. */
  8.     white-space:nowrap;
  9.     overflow-x:auto;
  10.     }
  11.    
  12.    
  13. .container > div {
  14.     padding-left:1px;
  15.     }
  16.  
  17.  
  18. .item {
  19.     display:inline-block;
  20.     font-size:14px; /* Возвращаем размер шрифта */
  21.    
  22.     width:120px;
  23.     height:50px;
  24.     background:#88C4FF;
  25.     border:1px solid #0080FF;
  26.     margin:1px 1px 0 0;
  27.     }
  28.    
  29. .item > p {
  30.     margin:0;
  31.     padding:4px 7px;
  32.     }
  33.  


PHP:
скопировать код в буфер обмена
  1.  
  2. // Массив для заполнения.
  3. $data = array_pad(array(), 29, 'item - %u');
  4. $data = array_chunk($data, ceil(count($data) / 2), true);
  5.  


CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. <div class="wrapper">
  3.   <div class="container">
  4.  
  5.     <?php foreach($data as $items) { ?>
  6.    
  7.       <div>
  8.      
  9.         <?php foreach($items as $i => $item) { ?>
  10.        
  11.           <div class="item">
  12.             <p><?=sprintf($item, $i + 1)?></p>
  13.           </div>
  14.        
  15.         <?php } // End foreach $data ?>
  16.      
  17.       </div><!-- .container > div -->
  18.    
  19.     <?php } // End foreach $items ?>
  20.    
  21.   </div><!-- .container -->
  22. </div><!-- .wrapper -->
  23.  


Bio man пишет:
Может, для 2 строк, нужно общее кол. элементов поделить на 2 и каждую строку обернуть в свой контейнер?

Да.
 
 Top
Bio man
Отправлено: 25 Октября, 2013 - 07:23:06
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)
armancho7777777, спасибо, попробую.
 
 Top
armancho7777777 Супермодератор
Отправлено: 25 Октября, 2013 - 08:30:39
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Не за что.
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB