1

I have a web application with a left-hand side menu. The menu is useful when the browser window is wide (e.g., desktops), but takes too much space when the window is narrow (e.g., mobile).

Using css @media stuff, I can make it so that if you make the browser window smaller than some resize width, it will switch to mobile mode. In this mode, I still want the menu to be available, but for it to be hidden until the user clicks a button to bring it up.

This is easy enough, but I am running into a problem. If the normal desktop user:

  1. Switches to Mobile Mode (resizes the browser smaller than the resize width)
  2. Turns the menu on (javascript to set its display: to block)
  3. Turns the menu off (js to set its display: to none)
  4. Switches back to Desktop Mode (resizes the browser to be wide again)

Then the menu is still using display:none and is invisible, even though it should always be available in desktop mode.

Here is a working illustration of the problem.

My question: is there something I can do to prevent this? Perhaps a way to detect when the browser is switching the stylesheet it is using, and to reset the menu bar to display:block when desktop mode is re-entered?

Basic HTML code:

<link rel="stylesheet" href="desktop.css" media="all and (min-width: 600px)"/>
<link rel="stylesheet" href="mobile.css" media="all and (max-width: 600px)"/>
...
<div id="left"> ... menu bar ... </div>
<div id="right"> ... content ... </div>

Mobile stylesheet:

#left { display: none; position: fixed; z-index: 100; ... }
#right { left: 0px; ... }

Desktop stylesheet

#left { display: block; position: fixed; left: 0; ...}
#right { position: fixed; left: 170px; ...}

Javascript for toggling the menu

function toggleLeft() { $("#left").toggle(); } // Using jQuery

Thanks very much!!

Jared Davis
  • 559
  • 4
  • 12

4 Answers4

2

This is a problem I run into a fair amount myself. I tend to use a class instead of directly hiding/showing the menu in mobile. For example:

function toggleLeft() { $("#left").toggleClass("active"); }

Then in your CSS media queries, only make use of the .active in the mobile stylesheet.

#left { display: none; position: fixed; z-index: 100; ... }
#left.active { display: block; }
Jonathan
  • 6,507
  • 5
  • 37
  • 47
1

The problem is that your display: block; in your desktop.css has lower priority then direct styling by element atribute style:

<div id="left" style="display: none"> ... </div>

which is exactly what javascript's toggle() do. The best way is to toggle class. However you can simply add display: block !important into your desktop.css. Styles with !important won't be changed by the direct styling.

dannymo
  • 390
  • 3
  • 13
  • Thank you -- I didn't know about `!important`. This seems to work perfectly well. I ended up using Jonathan's solution because it seems maybe somehow cleaner, though I can't articulate why I feel that way. – Jared Davis Mar 28 '15 at 04:34
0

I think you should maybe toggle the css using jQuery on window resize:

jQuery on window resize

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* toggle css or class etc */ }
    if (win.width() >= 1280) { /* ... */ }
});

This way when the browser is scaled up again, you can just toggle or change the class back to what it was!

Community
  • 1
  • 1
cnorthfield
  • 3,384
  • 15
  • 22
0

It looks like the toggle() is setting the actual style on the node, which will override the css.

You could try to add !important to your css so it would override the style in desktop mode, but it's a little hacky.

chris van hooser
  • 388
  • 3
  • 11