Display [box] resolution on resize

A small plugin that shows the viewport size
Show viewport width and height when resizing window. Display box resolution plugin is intended to help the web development for responsive designs.
For the whole functionality of Display [box] resolution on resize, see documentation.

How to use

1. Load jQuery and include Display Resolution plugin files
<script src="jquery.js" type="text/javascript"></script>
<script src="display-resolution/display-resolution.min.js" type="text/javascript"></script>
2. Call the plugin
<script type="text/javascript">
    $(document).ready(function() {
        $.wgDisplayResolution();
    });
</script>

Browser Support

 
10+
 
6+
 
15+
 
5.0.5+
 
8+

Examples

Change position
Change the position of the Display box resolution. Available options - top, bottom, right, left.
The position of the Display box resolution element is fixed.
<script type="text/javascript">
    $.wgDisplayResolution({
        right:0,
        top:0
    }); 
</script>
View demo - Change position
Resolution name
You can overwrite the breakpoint and resolution name
<script type="text/javascript">
    $.wgDisplayResolution({
        responsive: {
            0: {
                resolutionName:"Extra small "
            },
            768: {
                resolutionName:"Small"
            },
            992: {
                resolutionName:"Medium"
            },
            1200: {
                resolutionName:"Large"
            }
        }
    }); 
</script>
View demo - Resolution name
Github Download Documentation