Created
May 9, 2017 17:59
-
-
Save neodigm/8dfe83fb7ea6ebe1cf34686c40427e93 to your computer and use it in GitHub Desktop.
JavaScript Media Query or jsMQ is a function that can tell you what the current state of the browser is (Small, Medium or Large) and notify you if there is a change.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jsMQcallback = $.Callbacks(), jsMQcurrent = ""; | |
var jsMQ = { | |
getVW : function(){ | |
vw=jQuery(window).width(); | |
if(vw <= 480) return "s"; | |
if((vw >= 480) && (vw <= 748)) return "sl"; | |
if((vw >= 749) && (vw <= 965)) return "m"; | |
if(vw >= 966) return "l"; | |
}, | |
pubVW : function(){ | |
vw = jsMQ.getVW(); | |
if(jsMQcurrent != vw){ | |
jsMQcurrent = vw; | |
jsMQcallback.fire(vw); | |
} | |
}, | |
isSmall : function(){ return ( jsMQ.getVW().charAt(0)=="s" ) ? true : false; }, | |
isMedium : function(){ return ( jsMQ.getVW()=="m" ) ? true : false; }, | |
isLarge : function(){ return ( jsMQ.getVW()=="l" ) ? true : false; } | |
}; | |
setInterval(jsMQ.pubVW, 1800); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What is unique about this solution is that you can leverage JavaScript to fire events when the size of the browser changes even after the page has loaded.
Requires JQuery.
See also: https://api.jquery.com/jQuery.Callbacks/