6

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!

Guy Coder
  • 24,501
  • 8
  • 71
  • 136
f1nn
  • 6,989
  • 24
  • 69
  • 92
  • Why is the solution slow, does the event get fired too often for how long your handler needs? If so, you could try something like Underscore.js's [`debounce()`](http://underscorejs.org/#debounce) to only execute the handler once the window is done resizing. (Assuming you don't really need the changes to be completely smooth.) – millimoose Aug 28 '12 at 22:35
  • well, in fact it even didn't worked for me - I couldnt get an alert when window was 980. And I need to get alert ONLY in case when window is resized from 980 to 979. Not vice versa :) – f1nn Aug 28 '12 at 22:45
  • Irregardless of the question, +1 for inventing a new word that sounds like it should exist. – Stickley May 28 '14 at 13:53

1 Answers1

7

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
  }
});
elclanrs
  • 92,861
  • 21
  • 134
  • 171
  • Inserted this in body - doesn't work. It should alert only once when window is resized from 980 to 979 (not from 978 to 979 ot 979 to 980). jQ is loaded. – f1nn Aug 28 '12 at 22:34
  • it's much faster to not use jQuery objects when possible. you can use `document.width` to find the width of the document – MrOBrian Aug 28 '12 at 22:38
  • Also tried to include your code to document.ready - same result (( – f1nn Aug 28 '12 at 22:39
  • @MrOBrian The problem is have to catch the moment when window is 979, but the prev value was 980. That means on each resized pixed I should store, check previous width, current, and if it is not 980 - replace prev with current etc. On the the next resize I should do the same. It will be too slow... (( – f1nn Aug 28 '12 at 22:42
  • 1
    Well, I think you have the right idea with storing the previous size and then comparing to the current size. I'm just not sure why you think it will be slow. If written correctly, javascript can perform millions of operations per second. – MrOBrian Aug 28 '12 at 22:47
  • @MrObrian - you mention using document.width, Mozilla documentation for Web API states that this is obsolete, that you should use one of their listed alternatives. document.body.clientWidth ( width of ), document.documentElement.clientWidth (width of ) or window.innerWidth (window's width). Also, when the page loads document.width is undefined until the page is resized. I found document.body.clientWidth worked better for me. For more information: (https://developer.mozilla.org/en-US/docs/Web/API/Document/width) – yougotiger Jun 28 '16 at 21:53
  • @yougotiger That comment was from 4 years ago, so I'd expect this whole conversation to be obsolete by now ;) – MrOBrian Aug 05 '16 at 16:13
  • @MrObrian, with the updates I made, I found it helpful, even 4 years later ;-) – yougotiger Aug 08 '16 at 14:00