jQuery - Hide items if window is not tall enough

Question

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..

Can you create a fiddle? it would be easier to work on this. — Tariqulazam, Nov 08 '12 at 11:08

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

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();
}

edited May 23 '17 at 12:04

Community

1
1

answered Nov 08 '12 at 11:41

Mike Campbell

7,921
2
38
51

score 0 · Answer 2 · answered Nov 08 '12 at 11:14

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.

it seems perfect, but somehow it doesn't work... I can read it and it looks nice... but it doesn't do as the function says — Corfitz., Nov 08 '12 at 11:35

jQuery - Hide items if window is not tall enough

2 Answers2