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

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

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



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

Профиль
Группа: Пользователь
Сообщений: 169
Пользователь №: 43443
На форуме: 2 месяца, 4 дня
Карма: 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
На форуме: 2 месяца, 4 дня
Карма: 1




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

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


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

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



Лысый и злой
******

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

Не курю:
1 год, 2 месяца, 6 дней



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


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

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


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
RootPM  
 ۩  Дата
Цитировать сообщение

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



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

Профиль
Группа: Пользователь
Сообщений: 169
Пользователь №: 43443
На форуме: 2 месяца, 4 дня
Карма: 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  
Дата
Цитировать сообщение

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



че?
******

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




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


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


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

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



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

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




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


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

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

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