File
Login or Register via GitHub
<html><head> <title>Demo</title> <meta charset="utf-8"> <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /></head><body>X:<input onchange="setPosX(this.value)"/>Y:<input onchange="setPosY(this.value)"/>Scale:<input onchange="setScale(this.value)"/><div id="wrapper"></div></body></html>#wrapper{ height: 800px; width: 1200px; border: 1px solid green; margin: auto; position: relative; }.rul_cornerTL,.rul_cornerTR{border-bottom:1px solid gray}.rul_cornerBL,.rul_cornerTL{border-right:1px solid gray}.rul_cornerBR,.rul_cornerTR{right:1px;border-left:1px solid gray}.rul_cornerBL,.rul_cornerBR{bottom:1px;border-top:1px solid gray}.rul_wrapper{position:absolute;height:100%;width:100%;overflow:hidden;pointer-events:none}.rul_corner,.rul_line,.rul_ruler{position:absolute;pointer-events:all}.rul_wrapper *{user-select:none;user-select:none;user-select:none;user-select:none;user-select:none}.rul_ruler{display:block;border:1px solid gray;filter:blur(0);filter:blur(0)}.rul_corner{background-color:#fff;z-index:10;cursor:pointer}.rul_corner:hover{background-color:#d3d3d3}.rul_cornerTL{top:0;left:0}.rul_cornerTR{top:1px}.rul_cornerBL{left:1px}.rul_ruler_Vertical{cursor:ew-resize;border-left:none}.rul_ruler_Horizontal{cursor:ns-resize;border-top:none}.rul_line{background-color:#56aff4;z-index:100000}.rul_line:hover{background-color:#458CC3}.rul_lineVer{top:0;bottom:0;width:1px}.rul_lineVer:hover{cursor:ew-resize}.rul_lineHor{right:0;left:0;height:1px}.rul_lineHor:hover{cursor:ns-resize}.rul_tooltip:after{background:#A0A0A0;border-radius:2px;color:#fff;font-size:10px;content:attr(data-tip);top:50%;left:50%;margin-top:1px;margin-left:1px;padding:2px 5px;position:absolute;z-index:10000;min-width:30px}.rul_tracker{height:1px;width:1px;background:#000;position:absolute;pointer-events:none}
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers