passing a global javascript variable into jquery plugins on resize

Question

I am creating a mobile first responsive web site that has a few custom jquery plugins which kick in at certain breakpoints.

First, snippets of the code, and then ill explain the issue...

CSS:

@media (min-width: 20em) {
  html:after {
    content: "320";
     } }
@media (min-width: 25em) {
  html:after {
    content: "400";
     } }
@media (min-width: 30em) {
  html:after {
    content: "480";
     } }

GLOBAL JS

var FOO = {
 mq: function() {
   return  parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);                     
 }
}

JQUERY PLUGIN 1

this.init = function()
{
 $(window).on("load resize orientationchange", function() {
   if(FOO.mq() >= 480) {
      DO SOMETHING
   }
});
};

JQUERY PLUGIN 2

this.init = function()
{
 $(window).on("load resize orientationchange", function() {
   if(FOO.mq() >= 560) {
      DO SOMETHING ELSE
   }
});
};

Now the problem with putting the FOO.mq() in the jquery plugin is that it will fire the FOO.mq() function for every DOM object found (e.g. if the plugin does something to 10 images it will fire the FF.mq() 10 times) where really thats not needed as we only need to check once.

I have tried putting the resize/return value in a global object but it nevers seems to work and gets picked up bu the jquery plugins.

Any pointers would be greatly appreciated.

Thanks

You made a mistake somewhere. Your event only bound to window unless you have event with the same type bubbling somewhere — Thanh Trung
– Thanh Trung, Commented Apr 30, 2013 at 10:04
can't you get FOO.mq() to calculate its stuff once (and whenever a relevant event occurs) rather than on demand? — Alnitak
– Alnitak, Commented Apr 30, 2013 at 10:08
@Alnitak thats what im trying to do but cannot get it to work — Adi
– Adi, Commented Apr 30, 2013 at 10:23
@Adi so what events will result in the value of FOO.mq changing? — Alnitak
– Alnitak, Commented Apr 30, 2013 at 10:26

Alnitak · Accepted Answer · 2013-04-30 11:09:47Z

1

Assuming that this calculated value only changes on document load, or if the window changes layout:

var FOO = FOO || {};      // create global namespace obj, if required
$(function() {
    var mq;               // scoped variable

    // catch events that might change the @media CSS rules
    $(window).on("load resize orientationchange", function() {
        mq = parseInt(window.getComputedStyle(document.documentElement,':after').getPropertyValue('content').replace(/['"]/g,''),10);
    });

    FOO.mq = function() { // function that just returns the scoped variable
        return mq;
    }
});

edited Apr 30, 2013 at 11:09

answered Apr 30, 2013 at 10:48

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adi Over a year ago

If i put a console.log(FOO.mq()) outside of this I get a 'TypeError: FOO.mq is not a function' error. Any ideas? I can see what you're trying to do and I think the idea is great

Alnitak Over a year ago

You won't be able to call FOO.mq until after the document.ready handler has been invoked.

Adi Over a year ago

this must be becasue the js is firing before the window load is fired thinking about it (which gives the variable a value)

Alnitak Over a year ago

Yes, I believe it does. I don't recall at which point you can reliably call window.getComputedStyle() but whatever happens you'll need to ensure you don't try to use FOO.mq() until after this function has been called.

A. Wolff · Accepted Answer · 2013-04-30 10:02:28Z

0

Try to use a timeout:

this.init = function () {
    var timeout;
    $(window).on("load resize orientationchange", function () {
        clearTimeout(timeout);
        timeout = setTimeout(function(){
           if (FOO.mq() >= 480) {
               DO SOMETHING
           }
        },15);//even 0 should be enough
    });
};

answered Apr 30, 2013 at 10:02

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Collectives™ on Stack Overflow

passing a global javascript variable into jquery plugins on resize

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related