Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

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!

like image 892
f1nn Avatar asked Aug 28 '12 22:08

f1nn


1 Answers

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
  }
});
like image 93
elclanrs Avatar answered Nov 14 '22 09:11

elclanrs