Convert JavaScript to CSS media query

Question

I'm running into page performace issues and I believe this block is causing the biggest slowdown:

  // Section menu on mouseover, hide menu on mouseout
  // Can be more concise using .toggleClass?
  $('section').live('mouseenter', function() {
    if ($(window).width() > 1278) {
      $(this).find('menu').removeClass('hidden')
      $(this).find('div.section-wrapper').addClass('active')
    }
  }).live('mouseleave', function() {
    if ($(window).width() > 1278) {
      $(this).find('menu').addClass('hidden')
      $(this).find('div.section-wrapper').removeClass('active')
    }
  })

For the record, I'm aware .live() is deprecated and will eventually switch to .on(). I'm under the impression this only runs when mouseenter and mouseleave occur, but with it, the page performance is poor - especially for mobile.

I'm trying to convert this to a css media query so it runs faster but the following block of SASS isn't cutting it:

@media(min-width: 1279px) {
  section:hover {
    menu.hidden {
      display:block;
    }
    section .section-wrapper {
      border: 1px #ddd solid;
      padding: 14px;
    }
  }
}

.active just adds a border and changes the padding to accommodate. section:hover appears to do nothing. I added section {background-color: #E1C2E2;} within the media query for troubleshooting and it's working fine. Ideas? Could it be nested SASS with media queries causing the slowdown?

Answer 1

Just a simple case of css hierarchy and not covering my bases with undoing twitter bootstrap's .hidden class. This does the trick:

@media(min-width: 1279px) {
  section:hover {
    menu.hidden {
      display: block;
      visibility: visible;
    }
    .section-wrapper {
      border: 1px #ddd solid;
      padding: 14px;
    }
  }
}

As for performance, it was this block that was causing a much bigger slow down:

  $(window).bind('load resize orientationchange', function(){
    $('#main_menu').trigger('testfit')
    if ($(window).width() < 1278) {
      $('section').find('menu').removeClass('hidden')
      $('section').find('div.section-wrapper').addClass('active')
    } else {
      $('section').find('menu').addClass('hidden')
      $('section').find('div.section-wrapper').removeClass('active')
    }
  })

Using a timeout will speed things up since it doesn't need to run everytime the browser size changes by 1 pixel: https://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery