jQuery - скрыть предметы, если окно недостаточно высокое -- jquery поле с участием menu поле с участием resize поле с участием window пол Связанный проблема

jQuery - Hide items if window is not tall enough


0
vote

проблема

русский

У меня есть фиксированная строка меню слева от страницы. Но я хотел бы, чтобы пункты меню были скрыты, если в окне достаточно высока, чтобы показать все элементы одновременно. Фиксированная строка меню имеет спрятанный переполнение, чтобы избежать прокрутки. Мой нынешний скрипт делает это довольно хорошо, но он станет способ договориться, потому что у меня может быть около 30 различных пунктов меню, что означает, что для этого потребуется много операций в меню. Я выполняю эту функцию каждый раз, когда окно изменяется.

 <код> function resizeMenu() {     var win_h = $(window).height();     if (win_h < 220) {         $('div.list_item_btn').show().slice(1).hide();         $('.down_arrow').show();     } else if (win_h < 288) {         $('div.list_item_btn').show().slice(2).hide();         $('.down_arrow').show();     } else if (win_h < 356) {         $('div.list_item_btn').show().slice(3).hide();         $('.down_arrow').show();     } else {         $('div.list_item_btn').show()     } }   

Потому что каждая высота элемента составляет 68px, я должен постоянно применять <код> 68 к увеличению Umber. Я знаю, что есть лучшее решение для этого, но вот сложная вещь .. Если не все предметы отображаются, я хотел бы показать стрелку внизу. При нажатии на эту стрелку я хотел бы, чтобы пункты меню скользят вверх и скрыть 1 в верхней части, показывающую еще 1 внизу.

Но я не знаю, как скользить контент, пока он скрыт .. это не имеет смысла, и я вроде не удалось ..

Английский оригинал

I have this fixed menu bar to the left of the page. But I would like the menu items to be hidden if the window is not tall enough to show all items at the same time.. The fixed menu bar has an overflow hidden to avoid scrollbars. My current script does it pretty well, but it will become way to long because I may have about 30 different menu items, which means that it would require many if/else statements to perform this. I execute this function every time the window is resized.

function resizeMenu() {     var win_h = $(window).height();     if (win_h < 220) {         $('div.list_item_btn').show().slice(1).hide();         $('.down_arrow').show();     } else if (win_h < 288) {         $('div.list_item_btn').show().slice(2).hide();         $('.down_arrow').show();     } else if (win_h < 356) {         $('div.list_item_btn').show().slice(3).hide();         $('.down_arrow').show();     } else {         $('div.list_item_btn').show()     } } 

Because every item-s height is 68px I have to continuously apply 68 to the umber increasing. I KNOW there is a better solution for this but here is the tricky thing.. if not all items are shown, I would like to show an arrow at the bottom. When clicked on this arrow I would like the menu items to slide up and hide 1 at the top showing 1 more at the bottom.

But I don't know how to slide content up as long as it is hidden.. it makes no sense and I kind of failed this one..

</div
           
 
 

Список ответов

1
 
vote
vote
Лучший ответ
 

Вы можете использовать функцию из Здесь для проверки, если <код> list_item_btn находится в Viewport И если нет, то скрыть это.

 <код> var anyHidden = 0; $("div.list_item_btn").each(function() {   if (!elementInViewport($(this))) {     anyHidden = 1;     $(this).hide();   } else {     $(this).show();   } } if (anyHidden>0) {   $(".down_arrow").show(); }   
 

You could use a function from here to check if the list_item_btn is in the viewport and if not then hide it.

var anyHidden = 0; $("div.list_item_btn").each(function() {   if (!elementInViewport($(this))) {     anyHidden = 1;     $(this).hide();   } else {     $(this).show();   } } if (anyHidden>0) {   $(".down_arrow").show(); } 
</div
 
 
0
 
vote
 <код> function resizeMenu() {  var win_h = $(window).height();    var height = 220;      for(var i=1; i <= $('div.list_item_btn').length; i++){               if (win_h < height) {                 $('div.list_item_btn').show().slice(i).hide();                 $('.down_arrow').show();                 height += 68;             } else{                 $('div.list_item_btn').show()                 break;             }         }    }//end function   

что-то вроде этого? Не знаю, что вы хотите нарезать, но это должно резко сократить ваш код.

 
function resizeMenu() {  var win_h = $(window).height();    var height = 220;      for(var i=1; i <= $('div.list_item_btn').length; i++){               if (win_h < height) {                 $('div.list_item_btn').show().slice(i).hide();                 $('.down_arrow').show();                 height += 68;             } else{                 $('div.list_item_btn').show()                 break;             }         }    }//end function 

Something like this? Don't know what you want to slice though, but this should shorten your code dramatically.

</div
 
 
 
 

Связанный проблема

0  Ошибка прокладывания слайдера jQuery: ... не удалось конвертировать аргумент JavaScript ARG 0 [NSIDOMHTMLanChorElement.appendChild]  ( Jquery slider throwing error could not convert javascript argument arg 0 ns ) 
Наш сайт Dev Dev имеет ползунок отлично работает здесь: http://allblacks.01dev.co.nz/index.cfm layout = dnahome Однако мы просто поставили сайт Live, и ...

0  Почему это работает над сафари и Firefox, но не на хроме?  ( Why is this working on safari and firefox but not on chrome ) 
У меня есть адаптивное меню навигации, он работает следующим образом: при изменении размера окна появляется значок «Гамбургер» (три строки). Нажатие на этот з...

2  Совет инструмента не работает на текстовой зоне Bootstrap  ( Tool tip not working on text area bootstrap ) 
У меня есть форма Bootstrap 3, на которой я применяю Tootip через скрипт. Toottip работает нормально на поле ввода, но не работает над Textarea. <код> <div ...

1  jquery адрес плагин  ( Jquery address plugin issue ) 
Я использую плагин jQuery Address, я реализовал плагин на странице списка, когда я нажимаю на одну из ссылок, функция будет вытащить данные, используя AJAX и ...

-1  Jquery первый раз попробовал ajax  ( Jquery first time tried ajax ) 
Это я впервые попробовал ajax, кнопку нажала, но ничего не произойдет, если это должно быть предупреждено, когда успех? Любой может помочь мне взглянуть, пожа...

0  Разрежьте строку в JavaScript [Закрыто]  ( Cut the string in javascript ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыт. Этот вопрос не соответствует Рекомендациям переполнения ...

1  Функция валидации угловых JS Возвращает до завершения вызова API для проверки  ( Angular js validation function returns before the api call for validation is com ) 
<код> if (!validate()) { return; }; function validate() { var nameIsValid = ...

0  jquery widget factory setoptions и setoption  ( Jquery widget factory setoptions and setoption ) 
Можете ли вы помочь, помогите, я пытаюсь понять концепцию <код> setOptions и <код> setOption на заводе виджета. в коде ниже я подумал, что если я изменил ...

0  jQuery Validator Плагин и Радио кнопки Проблемы  ( Jquery validator plugin and radio buttons issues ) 
У меня есть проблема с плагином Validator jQuery & AMP; Радио-кнопки. У меня есть набор из трех "lookingfor" Радиоугольники ... и я хочу убедиться, что хотя...

2  Как получить выделенные тексты?  ( How to get the highlighted texts ) 
Я пытаюсь получить выбранные тексты от пользователя (выделенный текст, который выделяет пользователь). У меня есть следующее: <код> function getSelectedTe...

0  Jquery value изменить жить  ( Jquery value change live ) 
Пожалуйста, обратитесь к этому HTML. <код> <input type="text" name="amount1" value="10" /> <input type="text" name="amount2" value="5" /> <input type="text"...

5  модальный всплывающий как Google  ( Modal pop up like google ) 
Как сделать модальное всплывающее окно, как Gmail (когда мы пытаемся загрузить EXE, который генерирует крышки прокрутки страницы) ...

2  Scala.js: выбор и манипулирующий сгенерированный SVG  ( Scala js selecting and manipulating generated svg ) 
Я борюсь с чем-то, казалось бы, простым. Использование SCAJA.JS, я создал несколько SVG с библиотекой STALATAGS. Теперь я хочу манипулировать элементами S...

0  Как вы делаете Div пойти по другому меню Div / NAV, которое не исправлено?  ( How do you make a div go under another div nav menu which is not fixed ) 
Я пытаюсь сделать Div, идут под очередной div, в котором ни один не фиксирован элементы. Вот мой код: <Код> ul { list-style-type: none; margin: ...

0  Обработчик событий не обнаруживается внутри $ (документ). Ready () [закрыто]  ( Event handler not getting detected inside document ready ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> закрыто. Этот вопрос не воспроизводится или был вызван опечаткам...