Passing parameters to $(window).on('resize') when using .trigger('resize')

Question

I need a reliable way to detect if $(window).on('resize') has been fired by user interaction or by a jQuery .trigger call.

I've tried the following, but I don't seem to get the parameters back in the function call:

$(window).trigger('resize',[true]);

function prepareOnResize(e, triggered){ console.dir(triggered); }
$(window).on('resize',prepareOnResize);

Triggered seems to return the width of the screen, so I tried the following, also to no avail:

$(window).trigger('resize',[true]);

function prepareOnResize(e, width, height, triggered){ console.dir(triggered); }
$(window).on('resize',prepareOnResize);

In that instance triggered comes back undefined.

I'm at a loss here -- any help would be greatly appreciated.

That first example should work. [It worked ok for me](https://jsfiddle.net/0wqrq0z5/1/) — Andy, Apr 21 '16 at 18:47

score 2 · Answer 1 · edited Apr 21 '16 at 19:31

You could try the following;

Javascript... on dom ready...

var $window = $(window);

$window.on('resize', function(event, param1) {

  console.log("Window resized event triggered by...");

  if (typeof param1 === 'undefined') // could also do if(param1) to test for false
    console.log("System Event");
  else
    console.log("User Event");

   // Another way to check is to check the originalEvent property
   // if (e.originalEvent === undefined) alert ('triggered by code');
   // else alert ('triggered by system');

});

setTimeout(function() {
  $window.trigger("resize", ["Custom"]);
}, 2000);

This is more or less what you were trying in your code, and it will distinguish the 2 types of events.

I also made a jsFiddle so you can see: https://jsfiddle.net/sysdevcode/4w3b8e14/

To make it work on your code

$(window).trigger('resize',[true]);

function prepareOnResize(e, width, height, triggered){ console.dir(triggered); }
$(window).on('resize',prepareOnResize);

You need to change the order of the params on the prepareOnResize() function, as $(window).trigger('resize',[true]); equates to the [true] being sent as the "width" param in your function. you wold need to do, for instance:

var $window = $(window);
$window.trigger('resize',[ $window.width(), $window.height(), true ]);

then

function prepareOnResize(e, width, height, triggered){ ... }

will work, but if you don't need to pass any params, then the e.isTrigger of the code above is probably a bit more elegent.

Thanks Robert, was copy from fiddle and didn't notice.. rectified — Dev Ops, Apr 21 '16 at 19:29
Thanks for the info, @DevOps ! Wasn't aware of the ordering behavior of parameters. Good to know :) In case anyone was wondering, I've ended up using `e.originalEvent` to handle this issue. After nixing that bothersome plugin that was hijacking my native resize event, everything works much cleaner now :) — Jonny Asmar, Apr 21 '16 at 19:41

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

jQuery puts a property isTrigger in the event object, which you can test:

function prepareOnResize(e){ 
    if (e.isTrigger) {
        console.log('resize via jQuery trigger');
    } else {
        console.log('resize by user');
    } 
}

Alternatively you can use e.originalEvent, which jQuery only the native event object has, as mentioned here:

function prepareOnResize(e){ 
    if (!e.originalEvent)
        console.log('resize via jQuery trigger');
    } else {
        console.log('resize by user');
    } 
}

edited May 23 '17 at 11:52

Community

1
1

answered Apr 21 '16 at 18:48

trincot

317,000
35
244
286

I tried this as well, but for the `resize` event it seems to always be set to `3` :\ Seems the `resize` event is handled differently by browsers than typical events like `click` or `mouseover` – Jonny Asmar Apr 21 '16 at 18:52
Might be browser dependent, because it works for me. I added an alternative in my answer. – trincot Apr 21 '16 at 18:57
Tried originalEvent as well -- comes back undefined every time, regardless of how it the event was triggered. – Jonny Asmar Apr 21 '16 at 19:05
1

I get the impression you have some other code or jQuery plug-ins that are responsible for this. Try with a new test page, without jQuery, and see if the property is set. Have you shared all the relevant code in your question? – trincot Apr 21 '16 at 19:08
I think you're right -- went digging around a bit more after your comment and came across a jquery.resize.js plugin hidden away in our site's architecture. Thanks for the help! I think I can take it from here :) – Jonny Asmar Apr 21 '16 at 19:10

Passing parameters to $(window).on('resize') when using .trigger('resize')

2 Answers2

Linked