CODEWITHSUNDEEP
javascriptjquerymedia-queries
nolawi
nolawi

Reputation: 4649

how to check if condition on resize of the browser?

I have a menu item login markup that displays differently on mobile via media queries and also if the user is logged in.

LargeDevice - loggedin - ShowMarkup

LargeDevice - loggedOut - ShowMarkup

SmallDevice - loggedin - ShowMarkup

SmallDevice - loggedOut - DoNotShowMarkup

The condition of the markup is in an API and so I have an if condition to check if the user is logged out like this 

  if (acs.user.loggedin === false) {
            $('a.navbar-toggle.icon').hide();
            $('#my-menu').show();
     }

The rest of it is done with CSS only and works as expected.

The only problem is if the user is logged out and is on a LargeDevice and then resizes to a small screen. How can I tell the browser to check if the browser width is resized to recheck for the acs.user.loggedin or some other solution for this problem?

Upvotes: 0

Views: 67

Answers (1)

SLaks
SLaks

Reputation: 887453

Instead of showing and hiding elements directly from Javascript, change your JS code to add a CSS logged-in or logged-out classes to a container element.

You can then use CSS selectors with that classname, in and out of media queries, to specify your four states:

@media (max-width: 640px) {
   .logged-out a.navbar-toggle.icon {
       display: none;
   }
}

Upvotes: 2

Related Questions