Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Меню в адаптивной вёрстке
RootPM  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местный житель
****

Профиль
Группа: Пользователь
Сообщений: 169
Пользователь №: 43443
На форуме: 9 месяцев, 21 день
Карма: 1




Имеется меню (горизонтальное и выпадающее вертикальное), в котором заранее неизвестно количество элементов меню, ширина каждого элемента меню также неизвестна.

Задача, если в горизонтальное меню не помещаются элементы, переместить их в вертикальное меню. Если изменяется ширина блочного элемента в большую сторону - переместить элементы в горизонтальное меню, сколько будет возможно.

На habrahabr нашёл такой вариант:
<html>
<head>
<meta
charset="UTF-8">
</head>
<body
onload="javascript:res(0,0,0,0)">

<script
type="text/javascript">
function
res(width, height, timeout, validation) {
var item = document.getElementById('test_two');

if((width == item.offsetWidth) && (height == item.offsetHeight)) {

if(validation) {
// Сработает при изменении размеров блочного элементов, для тестирования можно раскомментировать нижнюю строку.
// document.getElementById('test').innerHTML = Date();

} else {
timeout = 500;
}
window.setTimeout(res, timeout, width, height, timeout, 0);

} else {
width = item.offsetWidth;
height = item.offsetHeight;
timeout = 200;
window.setTimeout(res, timeout, width, height, timeout, 1);
}

}

</script>

<div
id="test"></div>
<div
id="test_two"><p>Test JavaScript.</p></div>

</body>
</html>


Но в комментариях пишут что при каждом - offsetHeight, будет происходить - reflow.


--------------------
Все будет офигенно. Кому-то сразу, кому-то постепенно.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
RootPM  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местный житель
****

Профиль
Группа: Пользователь
Сообщений: 169
Пользователь №: 43443
На форуме: 9 месяцев, 21 день
Карма: 1




Получается нужно получить событие изменения размеров блочного элемента, но как?

Не делать же offsetHeight каждые пол секунды?


--------------------
Все будет офигенно. Кому-то сразу, кому-то постепенно.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



c начала 2017 года в Новосибирске.
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 26438
Пользователь №: 21350
На форуме: 7 лет, 4 месяца, 6 дней
Карма: 739





Цитата
Не делать же offsetHeight каждые пол секунды?


Цитата
function res(width, height, timeout, validation) {

Цитата
window.setTimeout(res, timeout, width, height, timeout, 1);


--------------------
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql (TSql, BI OLAP, MDX), Git, SVN, CodeIgnater, Yii 2, JiRA, Redmine, Bitbucket, Composer
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
RootPM  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местный житель
****

Профиль
Группа: Пользователь
Сообщений: 169
Пользователь №: 43443
На форуме: 9 месяцев, 21 день
Карма: 1




Цитата (Игорь_Vasinsky @ 16.10.2016 - 11:56)
Цитата
Не делать же offsetHeight каждые пол секунды?

Цитата
function res(width, height, timeout, validation) {

Цитата
window.setTimeout(res, timeout, width, height, timeout, 1);


Не понял вас, функция рабочая, но будет происходить reflow каждые пол секунды.

Это сообщение отредактировал RootPM - 16.10.2016 - 12:04


--------------------
Все будет офигенно. Кому-то сразу, кому-то постепенно.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
SerginhoLD  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



че?
******

Профиль
Группа: Форумчанин
Завсегдатай форума
Сообщений: 723
Пользователь №: 24500
На форуме: 6 лет, 8 месяцев, 28 дней
Карма: 55




тебе нужно посчитать все один раз при onload, по этому не вызывай
window.setTimeout(res


да и вообще какое-то говно а не функция


--------------------
"internet explorer всех правильней отображает страницы" ©
PM
    1   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
RootPM  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Местный житель
****

Профиль
Группа: Пользователь
Сообщений: 169
Пользователь №: 43443
На форуме: 9 месяцев, 21 день
Карма: 1




Тут ещё почитать можно, кто с гугла зайдёт - событие изменения


--------------------
Все будет офигенно. Кому-то сразу, кому-то постепенно.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса