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?

Community · Accepted Answer · 2017-05-23 12:41:06Z

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

edited May 23, 2017 at 12:41

CommunityBot

1

answered Mar 7, 2013 at 18:21

Archonic

1711 silver badge7 bronze badges

1

\$\begingroup\$ 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. \$\endgroup\$

Jonny Sooter
– Jonny Sooter

2013-03-08 17:03:10 +00:00
Commented Mar 8, 2013 at 17:03
1

\$\begingroup\$ you can still improve your code with variable caching and adding the timeout will improve performance. \$\endgroup\$

darshanags
– darshanags

2013-03-09 16:18:39 +00:00
Commented Mar 9, 2013 at 16:18
\$\begingroup\$ 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 \$\endgroup\$

Archonic
– Archonic

2013-03-11 14:10:35 +00:00
Commented Mar 11, 2013 at 14:10

Add a comment |

Stack Exchange Network

Convert JavaScript to CSS media query

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Convert JavaScript to CSS media query

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions