Jump to content

Need a jQuery function to remove a CSS class based upon browser width


simcoweb

Recommended Posts

I've added a CSS class to the main menu of a Wordpress site and wish to remove the class if the browser width drops below a certain number. I've tried a number of different approaches but none has worked. 

 

Some examples:

 

$(document).ready(function() {
if($(window).innerWidth() <= 751) {
$("#top-menu .menu-item").removeClass("float-shadow");
}
});
 
$(document).ready(function() {
if $(document.width < 767) {
$("#top-menu .menu-item").removeClass("float-shadow");
}
});
 
$(function(){
if $(documentElement.clientWidth <= 767) {
$("#top-menu .menu-item").removeClass("float-shadow");
}
});
 
 
And a bunch of variations of these. None worked. Anyone have an answer for this? Thanks in advance for your help.

 

Link to comment
Share on other sites

Thanks for your response. I've definitely considered that but there's about 40 lines of CSS related to the float-shadow class and there's 5 media queries. This could mean 200 more lines of CSS to bloat the page load. Unless, of course, there's a way to isolate the main components only and have directives just for those. So far, however, my experiments have not produced the results needed.

 

Just for FYI, here's the code in question:

/* Float Shadow */
.float-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 0%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}
Link to comment
Share on other sites

The five separate media queries shouldn't matter. Create a media query with 'max-width=largest width that shouldn't display the effect' and turn off the visibility. Any resolution below that will not display the effects. I think (don't quote me on this one - I haven't tested it) if you make the main class (.float-shadow) display:none; and visibility:hidden; you shouldn't have to adjust anything for the children - the dipslay:none removes the element from the DOM.

Link to comment
Share on other sites

Your first example seems to work. The problem is that the code only executes when the page is first loaded. If the inner width is less than 751 when the page loads, it removes the class.

 

If you're looking to dynamically remove the class, you could look into using .resize(). More information can be found here:

http://api.jquery.com/resize/

Link to comment
Share on other sites

If you're going to use resize(), I'd highly suggest looking into a debounce function to use in conjunction with it. The problem with resize() is it fires many, many times while the browser is being resized which would trigger your code as many times which is overkill and can lead to problems (non-responsive for periods of time) with the browser depending on how much code you are executing. Using a debounce method would slow the number of times your code is executed.

 

Try this to see what I mean and check your js console as you resize the browser:

$(window).resize(function(){
  console.log('resizing');
});

Also try it on different browsers to see how much different the resize() event gets triggered in various browsers.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.