Cacher is the code snippet organizer for pro developers

/*
  Script to display the viewport size when working on responsive stuff.
  Taken from here: http://stackoverflow.com/questions/14184447/firefox-extension-to-show-current-window-dimensions
*/

$(function(){
    var MEASUREMENTS_ID = "measurements"; // abstracted-out for convenience in renaming
    $("body").append('<div id="'+MEASUREMENTS_ID+'"></div>');
    $("#"+MEASUREMENTS_ID).css({
        "position": "fixed",
        "bottom": "0",
        "right": "0",
        "background-color": "black",
        "color": "white",
        "padding": "5px",
        "font-size": "11px",
        "opacity": "0.7"
    });
    getDimensions = function(){
        //Viewport and document widths
        //return $(window).width() + " (" + $(document).width() + ") x " + $(window).height() + " (" + $(document).height() + ")";
        //Just viewport width
        return $(window).width() + " x " + $(window).height();
    }
    $("#"+MEASUREMENTS_ID).text(getDimensions());
    $(window).on("resize", function(){
        $("#"+MEASUREMENTS_ID).text(getDimensions());
    });
});