Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

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 mouse leave 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?

share|improve this question
add comment

1 Answer 1

up vote 1 down vote accepted

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: http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery

share|improve this answer
1  
If you want to test out your performance JSPerf (jsperf.com) is great for that. You can create isolated test cases with entire sections of code, or even compare one method with another. –  Jonny Sooter Mar 8 '13 at 17:03
1  
you can still improve your code with variable caching and adding the timeout will improve performance. –  darshanags Mar 9 '13 at 16:18
    
In this case, variable caching wouldn't help. I need the updated page width. And ultimately, media queries are faster. If you have to use the document width in JS, use document.body.clientWidth –  Archonic Mar 11 '13 at 14:10
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.