☰

Window Size PX

A simple window dimensions indicator (in px) that appears on window resize in the top-right corner for browsers other than Chrome/Chromium. Useful for designers, developers, functional/ technical analysts, UX'ers etc.

  1. // ==UserScript==
  2. // @name         Window Size PX
  3. // @namespace    http://webketje.com/
  4. // @version      0.1
  5. // @description  A simple window dimensions indicator (in px) that appears on window resize in the top-right corner for browsers other than Chrome/Chromium. Useful for designers, developers, functional/ technical analysts, UX'ers etc.
  6. // @author       Kevin Van Lierde
  7. // @include http://*
  8. // @include https://*
  9. // @include *
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function(window) {
  14.  
  15.   var styles = {
  16.     root: 'position: fixed; z-index: 3000; top: 0; right: 0; background-color: rgba(238,238,238,0.8); opacity: 0; -webkit-transition: 0.3s; -moz-transition: 0.3s; transition: opacity 0.3s; color: black; padding: 3px 5px 5px; line-height: 14px; font-size: 14px;'
  17.   };
  18.   styles.root = styles.root.split(';').map(function(rule) { return rule + ' !important'; }).join(';');
  19.  
  20.   var windowSize = {
  21.     id: '_ff_window-size',
  22.  
  23.     timer: null,
  24.  
  25.     elem: function() {
  26.       var root = document.createElement('div'),
  27.           xsize = document.createElement('span'),
  28.           ysize = document.createElement('span');
  29.  
  30.       xsize.id = this.id + 'x';
  31.       xsize.style = 'margin-right: 5px;';
  32.       ysize.id = this.id + 'y';
  33.       ysize.style = 'margin-left: 5px;';
  34.       root.id = this.id;
  35.       root.style = styles.root;
  36.  
  37.       root.appendChild(xsize);
  38.       root.appendChild(document.createTextNode('×'));
  39.       root.appendChild(ysize);
  40.  
  41.       return root;
  42.     },
  43.  
  44.     onResize: function() {
  45.       document.getElementById(this.id).style.opacity = 1;
  46.       var id = this.id,
  47.           xsize = document.getElementById(id + 'x'),
  48.           ysize = document.getElementById(id + 'y');
  49.       if (xsize) { xsize.textContent = Math.round(window.innerWidth); }
  50.       if (ysize) { ysize.textContent = Math.round(window.innerHeight); }
  51.  
  52.       clearTimeout(this.timer);
  53.       this.timer = setTimeout(function() {
  54.         document.getElementById(id).style.opacity = 0;
  55.       }, 1000);
  56.     },
  57.  
  58.     init: function() {
  59.       var ext = document.getElementById(this.id);
  60.       if (!ext) {
  61.         document.body.appendChild(this.elem());
  62.         window.addEventListener('resize', this.onResize.bind(this));
  63.       }
  64.     }
  65.   };
  66.  
  67.   windowSize.init();
  68.  
  69. }(window));