jQuery on window resize

[Presto]

Hello guys,

I’m developing an extension for Google Chrome that will display the browser’s dimensions as you resize the browser window. I have the script almost working, the issue I am having is when you stop resizing the window I have the script waiting 3 sec. then fading out, but if you try to resize the window again nothing happens, you have to wait like 20 sec. or so until the script is ready to run again.

If you could take a look at my code and let me know what I’m doing wrong I would be very grateful.

http://codepen.io/Presto/pen/ChrKj

Thanks

[CrocoDillon]

I don’t think such an extension is needed – http://pbrd.co/JTbaCD (upper right corner, that’s default in Chrome, though only visible if the dev tools are open)

However, the problem is each call to your functions adds to the jQuery queue. And it gets called a lot during resizing. You can either clear the queue, or only add to it when really needed (for example a debounce function).

[CrocoDillon]

Anyway for learning purposes if nothing else, this is a simple implementation of a debounce function (keeps resetting the timer while the function gets called, so it only executes 3 seconds after last call)

var $window = $(window),
    viewport = $('<div id="viewPort"></div>').hide(),
    visible = false,
    timer;

$('body').append(viewport);

function showViewportSize() {
  viewport.text($window.width() + ' x ' + $window.height());

  if (!visible) {
    viewport.fadeIn();
    visible = true;
  }

  clearTimeout(timer);
  timer = setTimeout(function() {
    viewport.fadeOut();
    visible = false;
  }, 3000);
}

$window.resize(showViewportSize);

[Presto]

Awesome! That works great! Thanks so much for the help with this script CrocoDillon.

Here is the final code:
http://codepen.io/Presto/pen/ChrKj

[Presto]

Ps. One main way I use it is resizing my screen to 1920 x 1080 for recording screencasts, using Chrome’s development tools is also a great way of doing this to, but on laptops you cant get the tools at the bottom down far enough to get the hight to 1080, that’s why I like this extension. There was another one for Chrome that a lot of people have been using over the past year, but about 2 weeks back or so that extension started hijacking peoples searches and driving them through this site Ecosia.org

[CrocoDillon]

You’re welcome :)

Another tip: Try clicking the ‘docking’ button of the dev tools, it’s all the way bottom left.

[Author]

Posts