Bootstrap: Responsitive design - execute JS when w

2020-03-03 05:32发布

I'm using last Twitter's Bootstrap. I would like to execute a certain JS function (showing tooltip once) when my window's width is lower than 980px (as you know, on this size Bootstrap modifies Navbar and hides standard menu items) – window is from 768 to 979, to be short. I know that

@media (min-width: 768px) and (max-width: 979px) {...}

this option may be used to catch the event. However, it may be used only for changing exiting styles like

body {background-color:#ccc;}

And I need to launch JS-function, or add or remove a specific style for element. I've tried:

<script>
  window.onresize = function () {
      if (window.outerWidth == 980) {alert('');}
  };
</script>

but this solution is so slow, and even hangs a browser window. So, is there any solution to catch this event, when window is resized to 979px from GREATER side and execute a JS-function?

Thanks to all!

1条回答
Emotional °昔
2楼-- · 2020-03-03 06:24

outerWidth is a method so you're missing ():

if (window.outerWidth() == 980)

In any case if you're using jQuery:

$(window).resize(function() {
  if ($(this).width() < 981) {
    //do something
  }
});
查看更多
登录 后发表回答