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.

تثبيت هذا البرنامج النصي ؟

Ask a question, post a review, or report the script.

Wrap lines

// ==UserScript==
// @name         Window Size PX
// @namespace    http://webketje.com/
// @version      0.1
// @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.
// @author       Kevin Van Lierde
// @include http://*
// @include https://*
// @include *
// @grant        none
// ==/UserScript==

(function(window) {

  var styles = {
    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;'
  };
  styles.root = styles.root.split(';').map(function(rule) { return rule + ' !important'; }).join(';');

  var windowSize = {
    id: '_ff_window-size',

    timer: null,

    elem: function() {
      var root = document.createElement('div'),
          xsize = document.createElement('span'),
          ysize = document.createElement('span');

      xsize.id = this.id + 'x';
      xsize.style = 'margin-right: 5px;';
      ysize.id = this.id + 'y';
      ysize.style = 'margin-left: 5px;';
      root.id = this.id;
      root.style = styles.root;

      root.appendChild(xsize);
      root.appendChild(document.createTextNode('×'));
      root.appendChild(ysize);

      return root;
    },

    onResize: function() {
      document.getElementById(this.id).style.opacity = 1;
      var id = this.id,
          xsize = document.getElementById(id + 'x'),
          ysize = document.getElementById(id + 'y');
      if (xsize) { xsize.textContent = Math.round(window.innerWidth); }
      if (ysize) { ysize.textContent = Math.round(window.innerHeight); }

      clearTimeout(this.timer);
      this.timer = setTimeout(function() {
        document.getElementById(id).style.opacity = 0;
      }, 1000);
    },

    init: function() {
      var ext = document.getElementById(this.id);
      if (!ext) {
        document.body.appendChild(this.elem());
        window.addEventListener('resize', this.onResize.bind(this));
      }
    }
  };

  windowSize.init();

}(window));