@kendawson-online/showscreensize 1.0.0 → 1.1.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/README.md +20 -16
- package/package.json +1 -1
- package/sss.js +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Show Screen Size (sss)
|
|
2
2
|
|
|
3
|
-
**Version 1.0**
|
|
3
|
+
**Version 1.1.0**
|
|
4
4
|
|
|
5
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
6
|
|
|
@@ -17,34 +17,38 @@ These dimensions are the interior width and height of the current browser window
|
|
|
17
17
|
|
|
18
18
|
# Usage
|
|
19
19
|
|
|
20
|
-
1. Download the script (`sss.js`) to your project
|
|
20
|
+
### 1. Download the script (`sss.js`) to your project.
|
|
21
21
|
|
|
22
|
-
2.
|
|
22
|
+
### 2. Or, if you prefer, you can use a CDN link instead (pick one):
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
</body>
|
|
28
|
-
</html>
|
|
25
|
+
<script src="https://cdn.jsdelivr.net/npm/@kendawson-online/showscreensize@1.1.0/sss.min.js"></script>
|
|
29
26
|
```
|
|
30
27
|
|
|
31
|
-
|
|
28
|
+
```html
|
|
29
|
+
<script src="https://cdn.jsdelivr.net/gh/kendawson-online/sss@v1.1.0/sss.js"></script>
|
|
30
|
+
```
|
|
32
31
|
|
|
33
|
-
|
|
32
|
+
### 3. Include the `<script>` tag in your HTML document right before closing `<body>` tag.
|
|
34
33
|
|
|
34
|
+
Code example:
|
|
35
|
+
```html
|
|
36
|
+
<script src="sss.js"></script>
|
|
37
|
+
<!-- Or, use CDN link instead: -->
|
|
38
|
+
<!-- <script src="https://cdn.jsdelivr.net/gh/kendawson-online/sss@v1.1.0/sss.js"></script> -->
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
41
|
+
```
|
|
35
42
|
|
|
36
|
-
|
|
43
|
+
### 4. Clear cache/cookies and reload your page. If the script is loaded, you should see this message in the developer console:
|
|
37
44
|
|
|
38
|
-
|
|
45
|
+
- `Show Screen Size (sss.js) loaded. Press 1 or 0 to toggle, use URL params ss=1/ss=0, or call window.sssToggle().`
|
|
39
46
|
|
|
40
|
-
-----
|
|
41
47
|
<br>
|
|
42
48
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
Once the script is loaded, you'll see this message in the developer console:
|
|
49
|
+
## The display layer will be hidden by default when page loads!
|
|
46
50
|
|
|
47
|
-
|
|
51
|
+
This is the default behavior of the script. **Nothing will appear in the GUI until you make it appear**.
|
|
48
52
|
|
|
49
53
|
<br>
|
|
50
54
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kendawson-online/showscreensize",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A self-contained Javascript which displays screen dimensions in a tiny layer for debugging CSS and layout issues.",
|
|
5
5
|
"main": "sss.js",
|
|
6
6
|
"files": ["sss.js", "README.md", "LICENSE", "screenshot.png"],
|
package/sss.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// -----------------------------------------------------------------------------------
|
|
2
2
|
// sss.js -- show screen size
|
|
3
3
|
//
|
|
4
|
-
// Version 1.0
|
|
4
|
+
// Version 1.1.0
|
|
5
5
|
//
|
|
6
6
|
// injects a small display element into the page and displays screen dimensions
|
|
7
7
|
// in the upper right corner. useful for debugging style sheet and layout issues.
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
// call window.sssToggle() in the browser console to toggle the display
|
|
24
24
|
//
|
|
25
25
|
// Created 12/12/25 by ken@kendawson.online
|
|
26
|
-
// Last updated: 12/
|
|
26
|
+
// Last updated: 12/23/25
|
|
27
27
|
//
|
|
28
28
|
// -----------------------------------------------------------------------------------
|
|
29
29
|
|