Here we have 2 files:
- index.html
- mediaquery.plugin.js
index.html is a very basic page which passes the window object to mediaquery.plugin.js.
mediaquery.plugin.js listens for changes in the window width and reacts accordingly.
In this case it simply changes the background colour of the body which calls the plugin, but of course, this is only the start. In place of changing the page colour, you could do all sorts of useful things. For example, you could pass the identifier of a div the plugin and add external content to it. The list is endless. Have fun!
index.html
<!DOCTYPE html><html lang="en">
<head>
<title>jQuery media queries</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="mediaquery.plugin.js"></script>
<script>
(function()
{
$(window).mediaquery();
})();
</script>
</body>
</html>
mediaquery.plugin.js
(function($){
$.fn.mediaquery = function(options)
{
var defaults =
{
phone:'blue',
tablet:'red',
desktop:'green'
};
options = $.extend(defaults, options);
$(this).handleWidths(options);
$(this).resize(function()
{
$(this).handleWidths(options);
});
}
})(jQuery);
$.fn.handleWidths = function(opt)
{
if($(this).width() < 481)
{
$(this).phoneFunc(opt.phone);
}
else if($(this).width() < 769)
{
$(this).tabletFunc(opt.tablet);
}
else
{
$(this).desktopFunc(opt.desktop);
}
}
$.fn.phoneFunc = function(str)
{
$('body').css('background-color', str);
};
$.fn.tabletFunc = function(str)
{
$('body').css('background-color', str);
};
$.fn.desktopFunc = function(str)
{
$('body').css('background-color', str);
};
