@kendawson-online/showscreensize 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +90 -0
- package/package.json +23 -0
- package/screenshot.png +0 -0
- package/sss.js +153 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025-2026 Ken Dawson
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Show Screen Size (sss)
|
|
2
|
+
|
|
3
|
+
**Version 1.0**
|
|
4
|
+
|
|
5
|
+
Show Screen Size is a self-contained Javascript which displays screen dimensions in a tiny layer for debugging CSS and layout issues. The layer appears in the upper right corner and can be enabled/disabled by multiple methods.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## How it works
|
|
11
|
+
|
|
12
|
+
Show Screen Size (sss.js) injects a small display element `<div>` into your page before the closing `<body>` tag and then writes the screen dimensions to it. It appears in the upper right hand corner of the page as a small white layer (18 px high x 70 px wide) with black numbers on it. (See screenshot above). The left number is the width and the right number is the height. The units are in pixels. The script uses `window.innerWidth` and `window.innerHeight` for the screen dimensions.
|
|
13
|
+
|
|
14
|
+
These dimensions are the interior width and height of the current browser window (the layout viewport). This includes the width and height of any scroll bars (if they are present).
|
|
15
|
+
|
|
16
|
+
<i>Note: If you need to obtain the width/height of the window minus scroll bars and borders, you'll have to request the root `<html>` or `<body>` element's clientWidth / clientHeight properties instead. This script doesn't do that.</i>
|
|
17
|
+
|
|
18
|
+
# Usage
|
|
19
|
+
|
|
20
|
+
1. Download the script (`sss.js`) to your project
|
|
21
|
+
|
|
22
|
+
2. Include it in your HTML document right before the closing `<body>` tag:
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<script src="sss.js"></script>
|
|
26
|
+
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
3. Clear cache/cookies and reload your page
|
|
32
|
+
|
|
33
|
+
<br>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
-----
|
|
37
|
+
|
|
38
|
+
### The dimension display layer will be hidden by default when page loads!
|
|
39
|
+
|
|
40
|
+
-----
|
|
41
|
+
<br>
|
|
42
|
+
|
|
43
|
+
This is the default behavior of the script. **Nothing will appear in the GUI until you make it appear**.
|
|
44
|
+
|
|
45
|
+
Once the script is loaded, you'll see this message in the developer console:
|
|
46
|
+
|
|
47
|
+
**Show Screen Size (sss.js) loaded. Press 1 or 0 to toggle, use URL params ss=1/ss=0, or call window.sssToggle().**
|
|
48
|
+
|
|
49
|
+
<br>
|
|
50
|
+
|
|
51
|
+
# Toggling the display:
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
#### <u>Keyboard control</u>:
|
|
55
|
+
|
|
56
|
+
<kbd>1</kbd> (one) key shows the display
|
|
57
|
+
|
|
58
|
+
<kbd>0</kbd> (zero) key hides the display
|
|
59
|
+
|
|
60
|
+
#### <u>URL parameter control</u>:
|
|
61
|
+
|
|
62
|
+
passing parameter: `?ss=1` (or `?ss=true`) in URL turns on display
|
|
63
|
+
|
|
64
|
+
passing parameter: `?ss=0` (or `?ss=false`) in URL turns off display
|
|
65
|
+
|
|
66
|
+
#### <u>Programmatic control</u>:
|
|
67
|
+
|
|
68
|
+
type `window.sssToggle()` in developer console to toggle the display
|
|
69
|
+
|
|
70
|
+
<br>
|
|
71
|
+
|
|
72
|
+
# Notes
|
|
73
|
+
|
|
74
|
+
* The primary reason I created this script was to see screen dimensions on mobile devices while troubleshooting CSS / layout issues. That's why the URL parameters exist — to toggle dimension display without having access to dev console.
|
|
75
|
+
|
|
76
|
+
* I know that when developer console is open the browser automatically shows the screen dimensions. That feature works great on deskop/laptop computers while developing and troubleshooting. But, on phones, and tablets, and other devices you can't enable developer console. This provides an easy way to see screen sizes on all devices.
|
|
77
|
+
|
|
78
|
+
* The script is entirely self-contained. It creates it's own `<div>` element and inserts it before the closing `<body>` tag with inline CSS styling. You only have to include this script in your document and it will automatically start running when the document loads.
|
|
79
|
+
|
|
80
|
+
* The script saves data to local storage to keep track of the on/off state of the layer. If you reload the page it will restore the previous state you set it to. Example: if you turn it on and reload the page it will appear "on" again. If you clear cache/cookies or local storage data it will lose track of the state and return to default settings ("off"). Just press the <kbd>1</kbd> key to turn the layer back on again.
|
|
81
|
+
|
|
82
|
+
* The URL parameters intentionally trigger an alert to let you know when the display is turned on or off. This was done for confirmation since developers are not able to easily access developer console on mobile devices. If you don't want to see these alerts you can change this value: `const urlAlerts = true`. Set the value to false instead.
|
|
83
|
+
|
|
84
|
+
* Each time the script is loaded, it displays a message with usage instructions in dev console. If you want to disable these messages you can change this value: `const consoleMsg = true`. Set the value to false instead.
|
|
85
|
+
|
|
86
|
+
<br>
|
|
87
|
+
|
|
88
|
+
# License
|
|
89
|
+
|
|
90
|
+
[MIT](LICENSE)
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kendawson-online/showscreensize",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "A self-contained Javascript which displays screen dimensions in a tiny layer for debugging CSS and layout issues.",
|
|
5
|
+
"main": "sss.js",
|
|
6
|
+
"files": ["sss.js", "README.md", "LICENSE", "screenshot.png"],
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/kendawson-online/sss.git"
|
|
10
|
+
},
|
|
11
|
+
"keywords": ["tools","helper","screen size","development","showscreensize","javascript"],
|
|
12
|
+
"author": {
|
|
13
|
+
"name":"Ken Dawson",
|
|
14
|
+
"email": "ken@kendawson.online",
|
|
15
|
+
"url": "https://kendawson.online"
|
|
16
|
+
},
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"type": "commonjs",
|
|
19
|
+
"bugs": {
|
|
20
|
+
"url": "https://github.com/kendawson-online/sss/issues"
|
|
21
|
+
},
|
|
22
|
+
"homepage": "https://github.com/kendawson-online/sss#readme"
|
|
23
|
+
}
|
package/screenshot.png
ADDED
|
Binary file
|
package/sss.js
ADDED
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
// -----------------------------------------------------------------------------------
|
|
2
|
+
// sss.js -- show screen size
|
|
3
|
+
//
|
|
4
|
+
// Version 1.0
|
|
5
|
+
//
|
|
6
|
+
// injects a small display element into the page and displays screen dimensions
|
|
7
|
+
// in the upper right corner. useful for debugging style sheet and layout issues.
|
|
8
|
+
//
|
|
9
|
+
// hidden by default when page loads
|
|
10
|
+
//
|
|
11
|
+
// keyboard control:
|
|
12
|
+
//
|
|
13
|
+
// 1 (one) key displays the element
|
|
14
|
+
// 0 (zero) key hides the element
|
|
15
|
+
//
|
|
16
|
+
// url parameter control:
|
|
17
|
+
//
|
|
18
|
+
// passing parameter: ss=1 in url turns on the element
|
|
19
|
+
// passing parameter: ss=0 in url turns off the element
|
|
20
|
+
//
|
|
21
|
+
// programmatic control:
|
|
22
|
+
//
|
|
23
|
+
// call window.sssToggle() in the browser console to toggle the display
|
|
24
|
+
//
|
|
25
|
+
// Created 12/12/25 by ken@kendawson.online
|
|
26
|
+
// Last updated: 12/12/25
|
|
27
|
+
//
|
|
28
|
+
// -----------------------------------------------------------------------------------
|
|
29
|
+
|
|
30
|
+
// enable URL parameters
|
|
31
|
+
const urlSearchParams = new URLSearchParams(window.location.search);
|
|
32
|
+
const params = Object.fromEntries(urlSearchParams.entries());
|
|
33
|
+
|
|
34
|
+
// show alert messages when passing url parameters? (default = true)
|
|
35
|
+
const urlAlerts = true;
|
|
36
|
+
|
|
37
|
+
// show console message on script load? (default = true)
|
|
38
|
+
const consoleMsg = true;
|
|
39
|
+
|
|
40
|
+
// track state of visibility in local storage
|
|
41
|
+
const storageKey = 'ssState';
|
|
42
|
+
|
|
43
|
+
// Simple debounce utility for resize events
|
|
44
|
+
function debounce(func, delay) {
|
|
45
|
+
let timeoutId;
|
|
46
|
+
return function (...args) {
|
|
47
|
+
clearTimeout(timeoutId);
|
|
48
|
+
timeoutId = setTimeout(() => func.apply(this, args), delay);
|
|
49
|
+
};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Initialize after DOM is ready
|
|
53
|
+
function initScreenSizeHelper() {
|
|
54
|
+
|
|
55
|
+
// Generate a unique ID to avoid collisions
|
|
56
|
+
const devSsId = 'dev_ss_' + Math.random().toString(36).slice(2, 11);
|
|
57
|
+
let devSs = document.createElement('div');
|
|
58
|
+
devSs.id = devSsId;
|
|
59
|
+
// Apply styles inline for self-containment
|
|
60
|
+
devSs.style.display = 'none';
|
|
61
|
+
devSs.style.paddingTop = '1px';
|
|
62
|
+
devSs.style.textAlign = 'center';
|
|
63
|
+
devSs.style.opacity = '1';
|
|
64
|
+
devSs.style.fontSize = '11px';
|
|
65
|
+
devSs.style.fontFamily = 'sans-serif';
|
|
66
|
+
devSs.style.backgroundColor = 'white';
|
|
67
|
+
devSs.style.color = 'black';
|
|
68
|
+
devSs.style.width = '70px';
|
|
69
|
+
devSs.style.height = '18px';
|
|
70
|
+
devSs.style.position = 'absolute';
|
|
71
|
+
devSs.style.top = '0';
|
|
72
|
+
devSs.style.right = '0';
|
|
73
|
+
devSs.style.zIndex = '3000';
|
|
74
|
+
document.body.appendChild(devSs);
|
|
75
|
+
|
|
76
|
+
// safe localStorage helpers
|
|
77
|
+
function getStoredState() {
|
|
78
|
+
try {
|
|
79
|
+
return localStorage.getItem(storageKey) === 'true';
|
|
80
|
+
} catch (e) {
|
|
81
|
+
return false;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
function setStoredState(val) {
|
|
86
|
+
try {
|
|
87
|
+
localStorage.setItem(storageKey, String(val));
|
|
88
|
+
} catch (e) {}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// current state: true (visible) or false (hidden)
|
|
92
|
+
let isVisible = getStoredState();
|
|
93
|
+
|
|
94
|
+
function showScreenSize() {
|
|
95
|
+
if (!devSs || !isVisible) return;
|
|
96
|
+
const w = window.innerWidth;
|
|
97
|
+
const h = window.innerHeight;
|
|
98
|
+
devSs.textContent = `${w} x ${h}`;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
// Debounced version for resize events
|
|
102
|
+
const debouncedShowScreenSize = debounce(showScreenSize, 100);
|
|
103
|
+
|
|
104
|
+
function applyState(visible) {
|
|
105
|
+
visible = !!visible;
|
|
106
|
+
isVisible = visible;
|
|
107
|
+
setStoredState(visible);
|
|
108
|
+
if (devSs) devSs.style.display = visible ? 'block' : 'none';
|
|
109
|
+
if (visible) {
|
|
110
|
+
showScreenSize();
|
|
111
|
+
window.addEventListener('resize', debouncedShowScreenSize);
|
|
112
|
+
} else {
|
|
113
|
+
window.removeEventListener('resize', debouncedShowScreenSize);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Expose toggle function globally for programmatic control
|
|
118
|
+
window.sssToggle = () => {
|
|
119
|
+
applyState(!isVisible);
|
|
120
|
+
return isVisible;
|
|
121
|
+
};
|
|
122
|
+
|
|
123
|
+
// Priority: if URL param provided and valid, use it (and persist)
|
|
124
|
+
if ((params.ss === '1' || params.ss === 'true') || (params.ss === '0' || params.ss === 'false')) {
|
|
125
|
+
const visible = params.ss === '1' || params.ss === 'true';
|
|
126
|
+
applyState(visible);
|
|
127
|
+
if (urlAlerts) {
|
|
128
|
+
alert(visible ? 'Turned on screen dimension display' : 'Turned off screen dimension display');
|
|
129
|
+
}
|
|
130
|
+
} else {
|
|
131
|
+
// no URL param: initialize from storage (default hidden)
|
|
132
|
+
applyState(isVisible);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// hotkeys: 1 = on, 0 = off. Only prevent default for these keys.
|
|
136
|
+
document.addEventListener('keydown', (event) => {
|
|
137
|
+
if (event.key === '1') {
|
|
138
|
+
event.preventDefault();
|
|
139
|
+
applyState(true);
|
|
140
|
+
console.log('Turned on screen dimension display');
|
|
141
|
+
} else if (event.key === '0') {
|
|
142
|
+
event.preventDefault();
|
|
143
|
+
applyState(false);
|
|
144
|
+
console.log('Turned off screen dimension display');
|
|
145
|
+
}
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
if (consoleMsg) {
|
|
149
|
+
console.log('Show Screen Size (sss.js) loaded. Press 1 or 0 to toggle, use URL params ss=1/ss=0, or call window.sssToggle().');
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
document.addEventListener('DOMContentLoaded', initScreenSizeHelper);
|