# Stack Snippets Sandbox: Try It Out Here! [duplicate]

This post is dedicated to testing out the newly announced Stack Snippets feature. Feel free to answer with your own Stack Snippets!

## 25 Answers

Run this full screen

var WIDTH = 1000;
var HEIGHT = 500;
var prizes = 5;
var level = 1;
var canvas;
var ctx;
var x;
var y;
var score;
var direction = "right";
var STARTED;

function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}

//Key event listener
function keyPressed(evt) {
var charCode = evt.which;

if(charCode == 100) {
//x += 10;
direction = "right";
}
else if(charCode == 97) {
//x -= 10;
direction = "left";
}
else if(charCode == 119) {
//y -= 10;
direction = "up";
}
else if(charCode == 115) {
//y += 10;
direction = "down";
}
else if(charCode == 32) {
if(STARTED == 0) {
start();
STARTED = 1;
}
}
};

//Set up varialbles for new round
function initVars() {
x = 20;
y = 20;
score = 0;
direction = "right";
STARTED = 0;
}

//Set up variables and register keypress event handler for canvas
function init() {
initVars();
$("#c").keypress(keyPressed); canvas = document.getElementById("c"); ctx = canvas.getContext("2d"); drawStartScreen(); } //Draw the starting screen function drawStartScreen() { ctx.font="bold 36px sans-serif"; ctx.fillText("Snakes Game", 400, 200); ctx.font="bold 24px sans-serif"; ctx.fillText("Click here and then press SPACE to start", 300, 300); ctx.font="bold 18px sans-serif"; ctx.fillText("Use 'W' 'A' 'S' and 'D' as arrow keys", 350, 400); } //Place 'prizes' randomly on the playfield function drawPrizes() { ctx.fillStyle = "rgb(1, 0, 255)"; for(i = 0; i < prizes; i++) { var px = (Math.floor(Math.random()*49) * 20) + 20; var py = (Math.floor(Math.random()*24) * 20) + 20; circle(px, py, 10); } } //Start the game function start() { clear(); drawPrizes(); setInterval(draw, 100); setTimeout("alert('Level 1')", 100); } //MAIN LOOP -called every 50 miliseconds function draw() { //Move based on current direction if(direction == "up") y -= 20; else if(direction == "down") y += 20; else if(direction == "right") x += 20; else if(direction == "left") x -= 20; //Get color of space about to be moved on to var c = ctx.getImageData(x, y, 10, 10).data; //Detect player running into own tail if(c[0] == 255) { alert("You Are Dead"); location.reload(true); } //Detect player moving over a 'prize' else if(c[0] == 1) { score += 50; } //Display level and score //document.getElementById("score").innerHTML="Level: "+level+"<br />Score: "+score;$("#score").html("Level: "+level+"<br />Score: "+score);
//Detect player winning round
if(score == prizes*50) {
alert("You Win!");
clear();
initVars();
prizes += 5;
level += 1;
drawPrizes();
alert("Level "+level);
}

//Detect player moving off the playfield
if(x > WIDTH) x = 20;
if(x < 0) x = WIDTH-20;
if(y > HEIGHT) y = 20;
if (y < 0) y = HEIGHT-20;

//Draw the players position
ctx.fillStyle = "rgb(255, 0, 0)";
circle(x, y, 10);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head>
<body onload="init()">

<canvas id="c" tabindex="1" width="1000" height="500">
If you see this it wont work.
</canvas><br />

<!--<button onclick="start()">Start Game</button>-->
<div id="score">Level: 1<br />Score: 0</div>

</body>
</html>

• The snake doesn't move, it only grows :( now I have to do real work. Sep 19 '14 at 3:31
• I can't get it to work, it says click here and press space to start, well I have tried all that to no success Sep 19 '14 at 12:50
• All I get is "If you see this it wont work. Level: 1 Score: 0" Oct 26 '14 at 12:08
• You're dead. Why thank you ;) Nov 11 '16 at 1:32

var GRAVITY = 0.08;
var SPEED = 1; //1 is fastest
var dx = [];
var dy = [];
var maxX = window.innerWidth;
var maxY = window.innerHeight;
var all = [];// = document.getElementsByTagName("*:visible");
var positions = [];
var widths = [];
var heights = [];

function drop() {

$("*").each(function(index) { all.push(this); positions.push($(this).offset());
widths.push($(this).width()); heights.push($(this).height());
});

for(var i=0; i < all.length; i++) {
all[i].style.position = "fixed";
all[i].style.top = positions[i].top+"px";
all[i].style.left = positions[i].left+"px";
dx[i] = Math.random() * 4 - 2;
dy[i] = Math.random() * 1;
}

setInterval(mainLoop, SPEED);
}

function mainLoop() {
for(var i=0; i < all.length; i++) {
dy[i] += GRAVITY/2;
positions[i].top += dy[i];
positions[i].left += dx[i];
dy[i] += GRAVITY/2;
if(positions[i].left < 0) dx[i] *= -1;
if((positions[i].left + all[i].offsetWidth) > maxX) dx[i] *= -1;
if(positions[i].top > (maxY - all[i].offsetHeight)) dy[i] = -Math.abs(dy[i]);

all[i].style.left = positions[i].left+"px";
all[i].style.top = positions[i].top+"px";
}
}

drop();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<body>
<div style="border-style: solid; border-width: 5px; border-color:red;">Test</div>
</body>
</html>

Let's see if this can handle WebGL :D

if (!Detector.webgl) {

Detector.addGetWebGLMessage();
document.getElementById('container').innerHTML = "";

}

var fogExp2 = true;

var container, stats;

var camera, controls, scene, renderer;

var mesh, mat;

var worldWidth = 200,
worldDepth = 200,
worldHalfWidth = worldWidth / 2,
worldHalfDepth = worldDepth / 2,
data = generateHeight(worldWidth, worldDepth);

var clock = new THREE.Clock();

init();
animate();

function init() {

container = document.getElementById('container');

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 20000);
camera.position.y = getY(worldHalfWidth, worldHalfDepth) * 100 + 100;

controls = new THREE.FirstPersonControls(camera);

controls.movementSpeed = 1000;
controls.lookSpeed = 0.125;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = 1.1;
controls.verticalMax = 2.2;

scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xffffff, 0.00015);

// sides

var light = new THREE.Color(0xffffff);
var shadow = new THREE.Color(0x505050);

var matrix = new THREE.Matrix4();

var pxGeometry = new THREE.PlaneGeometry(100, 100);
pxGeometry.faces[0].vertexColors.push(light, shadow, light);
pxGeometry.faces[1].vertexColors.push(shadow, shadow, light);
pxGeometry.faceVertexUvs[0][0][0].y = 0.5;
pxGeometry.faceVertexUvs[0][0][2].y = 0.5;
pxGeometry.faceVertexUvs[0][1][2].y = 0.5;
pxGeometry.applyMatrix(matrix.makeRotationY(Math.PI / 2));
pxGeometry.applyMatrix(matrix.makeTranslation(50, 0, 0));

var nxGeometry = new THREE.PlaneGeometry(100, 100);
nxGeometry.faces[0].vertexColors.push(light, shadow, light);
nxGeometry.faces[1].vertexColors.push(shadow, shadow, light);
nxGeometry.faceVertexUvs[0][0][0].y = 0.5;
nxGeometry.faceVertexUvs[0][0][2].y = 0.5;
nxGeometry.faceVertexUvs[0][1][2].y = 0.5;
nxGeometry.applyMatrix(matrix.makeRotationY(-Math.PI / 2));
nxGeometry.applyMatrix(matrix.makeTranslation(-50, 0, 0));

var pyGeometry = new THREE.PlaneGeometry(100, 100);
pyGeometry.faces[0].vertexColors.push(light, light, light);
pyGeometry.faces[1].vertexColors.push(light, light, light);
pyGeometry.faceVertexUvs[0][0][1].y = 0.5;
pyGeometry.faceVertexUvs[0][1][0].y = 0.5;
pyGeometry.faceVertexUvs[0][1][1].y = 0.5;
pyGeometry.applyMatrix(matrix.makeRotationX(-Math.PI / 2));
pyGeometry.applyMatrix(matrix.makeTranslation(0, 50, 0));

var py2Geometry = new THREE.PlaneGeometry(100, 100);
py2Geometry.faces[0].vertexColors.push(light, light, light);
py2Geometry.faces[1].vertexColors.push(light, light, light);
py2Geometry.faceVertexUvs[0][0][1].y = 0.5;
py2Geometry.faceVertexUvs[0][1][0].y = 0.5;
py2Geometry.faceVertexUvs[0][1][1].y = 0.5;
py2Geometry.applyMatrix(matrix.makeRotationX(-Math.PI / 2));
py2Geometry.applyMatrix(matrix.makeRotationY(Math.PI / 2));
py2Geometry.applyMatrix(matrix.makeTranslation(0, 50, 0));

var pzGeometry = new THREE.PlaneGeometry(100, 100);
pzGeometry.faces[0].vertexColors.push(light, shadow, light);
pzGeometry.faces[1].vertexColors.push(shadow, shadow, light);
pzGeometry.faceVertexUvs[0][0][0].y = 0.5;
pzGeometry.faceVertexUvs[0][0][2].y = 0.5;
pzGeometry.faceVertexUvs[0][1][2].y = 0.5;
pzGeometry.applyMatrix(matrix.makeTranslation(0, 0, 50));

var nzGeometry = new THREE.PlaneGeometry(100, 100);
nzGeometry.faces[0].vertexColors.push(light, shadow, light);
nzGeometry.faces[1].vertexColors.push(shadow, shadow, light);
nzGeometry.faceVertexUvs[0][0][0].y = 0.5;
nzGeometry.faceVertexUvs[0][0][2].y = 0.5;
nzGeometry.faceVertexUvs[0][1][2].y = 0.5;
nzGeometry.applyMatrix(matrix.makeRotationY(Math.PI));
nzGeometry.applyMatrix(matrix.makeTranslation(0, 0, -50));

//

var geometry = new THREE.Geometry();
var dummy = new THREE.Mesh();

for (var z = 0; z < worldDepth; z++) {

for (var x = 0; x < worldWidth; x++) {

var h = getY(x, z);

matrix.makeTranslation(
x * 100 - worldHalfWidth * 100,
h * 100,
z * 100 - worldHalfDepth * 100
);

var px = getY(x + 1, z);
var nx = getY(x - 1, z);
var pz = getY(x, z + 1);
var nz = getY(x, z - 1);

var pxpz = getY(x + 1, z + 1);
var nxpz = getY(x - 1, z + 1);
var pxnz = getY(x + 1, z - 1);
var nxnz = getY(x - 1, z - 1);

var a = nx > h || nz > h || nxnz > h ? 0 : 1;
var b = nx > h || pz > h || nxpz > h ? 0 : 1;
var c = px > h || pz > h || pxpz > h ? 0 : 1;
var d = px > h || nz > h || pxnz > h ? 0 : 1;

if (a + c > b + d) {

var colors = py2Geometry.faces[0].vertexColors;
colors[0] = b === 0 ? shadow : light;
colors[1] = c === 0 ? shadow : light;
colors[2] = a === 0 ? shadow : light;

var colors = py2Geometry.faces[1].vertexColors;
colors[0] = c === 0 ? shadow : light;
colors[1] = d === 0 ? shadow : light;
colors[2] = a === 0 ? shadow : light;

geometry.merge(py2Geometry, matrix);

} else {

var colors = pyGeometry.faces[0].vertexColors;
colors[0] = a === 0 ? shadow : light;
colors[1] = b === 0 ? shadow : light;
colors[2] = d === 0 ? shadow : light;

var colors = pyGeometry.faces[1].vertexColors;
colors[0] = b === 0 ? shadow : light;
colors[1] = c === 0 ? shadow : light;
colors[2] = d === 0 ? shadow : light;

geometry.merge(pyGeometry, matrix);

}

if ((px != h && px != h + 1) || x == 0) {

var colors = pxGeometry.faces[0].vertexColors;
colors[0] = pxpz > px && x > 0 ? shadow : light;
colors[2] = pxnz > px && x > 0 ? shadow : light;

var colors = pxGeometry.faces[1].vertexColors;
colors[2] = pxnz > px && x > 0 ? shadow : light;

geometry.merge(pxGeometry, matrix);

}

if ((nx != h && nx != h + 1) || x == worldWidth - 1) {

var colors = nxGeometry.faces[0].vertexColors;
colors[0] = nxnz > nx && x < worldWidth - 1 ? shadow : light;
colors[2] = nxpz > nx && x < worldWidth - 1 ? shadow : light;

var colors = nxGeometry.faces[1].vertexColors;
colors[2] = nxpz > nx && x < worldWidth - 1 ? shadow : light;

geometry.merge(nxGeometry, matrix);

}

if ((pz != h && pz != h + 1) || z == worldDepth - 1) {

var colors = pzGeometry.faces[0].vertexColors;
colors[0] = nxpz > pz && z < worldDepth - 1 ? shadow : light;
colors[2] = pxpz > pz && z < worldDepth - 1 ? shadow : light;

var colors = pzGeometry.faces[1].vertexColors;
colors[2] = pxpz > pz && z < worldDepth - 1 ? shadow : light;

geometry.merge(pzGeometry, matrix);

}

if ((nz != h && nz != h + 1) || z == 0) {

var colors = nzGeometry.faces[0].vertexColors;
colors[0] = pxnz > nz && z > 0 ? shadow : light;
colors[2] = nxnz > nz && z > 0 ? shadow : light;

var colors = nzGeometry.faces[1].vertexColors;
colors[2] = nxnz > nz && z > 0 ? shadow : light;

geometry.merge(nzGeometry, matrix);

}

}

}

var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAMAAAAsVwj+AAABv1BMVEUcQwAiTgElVAEqVgA5YgJJbQNQcghffgsnVAE0YQFxWjNxWTN2XzptWDVwVzJxVzMiUQBBbQN1XjloUC2AZUGAaEGNcUlMORcgUABRbgZVRQhWQR1YRiJ1XjVfRyVfTCd8YkF8Yz5/ZD8+KweAZUKAZURjTCeAaESMcUlnTy2OdEqQdk1SOhlTPxxTQSJTRAhUPBxURQhUdwk3Lgc5MxVWRQdWRidXQyJXSghXTykwLRBZRSFbTA5cRiddRyddTC5eRyheSyZeSygyLRI+Lgc+OhZgTChhTCdiUwxALgdjTidmTycpIwdnUC1nUDBCPCZoUS1oVC5pUy5pVxZqUy1rUixrUy1rVTBtVDJtVjJDMBVvVzNvWTNFNwdwWDJwWDhwWzhFPQdGQCdHNRJzWzNzWzt0XDpHNRVHPgd1XjtJNA92Yjx5YTl6Yzx7Yzs1YQFLRRt8ZEE2Lgd/ZURMOhdMOhpNNxZNRQdNRyiBa0ODZUGDaUGFbD+GbUSHbUeIbEOIbESIbEWIbUSIbUWIbkWJbkWJcUmKbUiLcUdPOheMckiNcUdQRwiNckqNdEmNdEqNdE02MSWPdUk3KAeVeFD3vhDZAAABm0lEQVR4XkWQU69mQRBFy330Gdc2xrZt27Zt2/ODp07uw2R3qpOVnZVKQTAyf6TGyKYIqEymLOIDhRRQzJQssAnmAQpBhM28Z+JFEENDUnURmRiDiUdJmP3LHYrEjHmERCiA641MjYRMCAnYuXvYKbOKgk7tQRpUObCBoGLAvC7IzoE1mKpwblJSAnJHQNexICkbsCtNBUUUXcVAZsZKFNTUnQRIZChqYt4XFm/8v0dUmbpHa4Vy040Io1YHXIkdzY4qEa5bHDloa4OoHMdlhPjrnyiCmzEuQvy142K8EOuH5pZhaRT3Pzi9cd6M8vWHj+qbbkNp66lve2aNvjuwpmPOWG3/MXi6tr3x+Mnv5vT2s0l1e0sJ1p9Jr355WV12olkfnry3oAXSnstZdmFaczwdLnkyaGRDd+f/SAqNFxODxeJQLwx+Hh/dVe361N3V7L/fMbMGEx+//327c0PPlTTtO1rrWwVj7589L3QfWZm9er383J2fCayuLikkh1d0bv4wsu1N78kEkuN7dw9s6bw2UBw5eGnfrfP/AEXsNS9OBYAmAAAAAElFTkSuQmCC');
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;

var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
map: texture,
ambient: 0xbbbbbb,
vertexColors: THREE.VertexColors
}));
scene.add(mesh);

var ambientLight = new THREE.AmbientLight(0xcccccc);
scene.add(ambientLight);

var directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(1, 1, 0.5).normalize();
scene.add(directionalLight);

renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);

container.innerHTML = "";

container.appendChild(renderer.domElement);

stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);

//

window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

controls.handleResize();

}

function loadTexture(path, callback) {

var image = new Image();

image.onload = function() {
callback();
};
image.src = path;

return image;

}

function generateHeight(width, height) {

var data = [],
perlin = new ImprovedNoise(),
size = width * height,
quality = 2,
z = Math.random() * 100;

for (var j = 0; j < 4; j++) {

if (j == 0)
for (var i = 0; i < size; i++) data[i] = 0;

for (var i = 0; i < size; i++) {

var x = i % width,
y = (i / width) | 0;
data[i] += perlin.noise(x / quality, y / quality, z) * quality;

}

quality *= 4

}

return data;

}

function getY(x, z) {

return (data[x + z * worldWidth] * 0.2) | 0;

}

//

function animate() {

requestAnimationFrame(animate);

render();
stats.update();

}

function render() {

controls.update(clock.getDelta());
renderer.render(scene, camera);

}
body {
color: #61443e;
font-family: Monospace;
font-size: 13px;
text-align: center;
/* background-color: #bfd1e5; */
background-color: #ffffff;
margin: 0px;
overflow: hidden;
}

a {
color: #a06851;
}

#info {
position: absolute;
top: 0px;
width: 100%;
padding: 5px;
}

#oldie {
background: rgb(100, 0, 0) !important;
color: #fff !important;
margin-top: 10em !important;
}

#oldie a {
color: #fff
}
<div id="container"><br /><br /><br /><br /><br />Generating world...</div>
<div id="info">
<a href="http://threejs.org" target="_blank">three.js</a> - <a href="http://www.minecraft.net/" target="_blank">minecraft</a> demo [ambient occlusion]. featuring <a href="http://painterlypack.net/" target="_blank">painterly pack</a><br />(left click:
forward, right click: backward)
</div>

<script src="https://threejs.org/build/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/FirstPersonControls.js"></script>

<script src="https://threejs.org/examples/js/ImprovedNoise.js"></script>

<script src="https://threejs.org/examples/js/Detector.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

<script>
</script>

Spoiler: yes it can.

Taken from here.

• This is awesome!
– Haney StaffMod
Sep 18 '14 at 23:26
• @Haney Indeed! The possibilities of this are endless. Sep 19 '14 at 1:25
• What?? (jaw drop) Nov 11 '16 at 1:34
• World is dead... Apr 24 '17 at 22:18
• @ShadowWizard turns out HTTPs is mandatory already which is good I guess. May 17 '17 at 22:57
• Cheers for fixing! May 18 '17 at 6:15

<h1>SCORE!</h1>

<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:cc="http://web.resource.org/cc/"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:ns1="http://sozi.baierouge.fr"
id="svg1"
sodipodi:docname="gnome-mime-application-x-svg.svg"
height="128pt"
sodipodi:version="0.32"
width="128pt"
inkscape:version="0.39cvs"
sodipodi:docbase="/home/andy/Desktop/etiquette-icons-0.4/scalable/mimetypes"
>
<defs
id="defs3"
>
<linearGradient
id="linearGradient2222"
y2=".55249"
xlink:href="#linearGradient1513"
y1="-.10497"
x2=".58431"
x1="-.10588"
/>
<linearGradient
id="linearGradient2316"
y2=".52030"
y1=".21771"
x2=".80392"
x1=".47451"
>
<stop
id="stop2318"
style="stop-color:#d6d6d6"
offset="0"
/>
<stop
id="stop2322"
style="stop-color:#eaeaea"
offset=".25769"
/>
<stop
id="stop2320"
style="stop-color:#919191"
offset=".70594"
/>
<stop
id="stop2321"
style="stop-color:#d2d2d2"
offset=".73347"
/>
<stop
id="stop2319"
style="stop-color:#a6a6a6"
offset="1"
/>
</linearGradient
>
<linearGradient
id="linearGradient1513"
>
<stop
id="stop1514"
style="stop-color:#ffffff"
offset="0"
/>
<stop
id="stop1515"
style="stop-color:#ffffff;stop-opacity:0"
offset="1"
/>
</linearGradient
>
<linearGradient
id="linearGradient2121"
y2="0.443"
xlink:href="#linearGradient1513"
y1=".27687"
x2=".59608"
x1=".41569"
/>
<radialGradient
id="radialGradient1502"
fx=".18039"
fy=".47917"
>
<stop
id="stop1919"
style="stop-color:#000000;stop-opacity:.31638"
offset="0"
/>
<stop
id="stop1920"
style="stop-color:#000000;stop-opacity:.079096"
offset=".5"
/>
<stop
id="stop1921"
style="stop-color:#000000;stop-opacity:0"
offset="1"
/>
</radialGradient
>
<linearGradient
id="linearGradient893"
y2="1.0067"
y1="0.32"
x2=".59707"
x1=".51648"
>
<stop
id="stop895"
style="stop-color:#445632"
offset="0"
/>
<stop
id="stop896"
style="stop-color:#007837;stop-opacity:0"
offset="1"
/>
</linearGradient
>
<linearGradient
id="linearGradient1492"
>
<stop
id="stop1493"
style="stop-color:#dadada"
offset="0"
/>
<stop
id="stop1496"
style="stop-color:#f1f1f1"
offset=".34923"
/>
<stop
id="stop1494"
style="stop-color:#f0f0f0"
offset="1"
/>
</linearGradient
>
<linearGradient
id="linearGradient1495"
y2="1.1797"
xlink:href="#linearGradient1492"
y1=".21094"
x2=".085470"
x1=".88034"
/>
<linearGradient
id="linearGradient1497"
y2="1.3281"
xlink:href="#linearGradient1492"
y1=".32812"
x2="-.37607"
x1=".63248"
/>
<linearGradient
id="linearGradient1499"
y2=".59848"
y1="-.42424"
x2=".86260"
x1="-.24427"
>
<stop
id="stop1502"
style="stop-color:#ffffff"
offset="0"
/>
<stop
id="stop1504"
style="stop-color:#ffffff;stop-opacity:0"
offset="1"
/>
</linearGradient
>
<linearGradient
id="linearGradient1506"
y2=".0078125"
y1=".97656"
x2=".78261"
x1=".052174"
>
<stop
id="stop1508"
style="stop-color:#000000;stop-opacity:.095506"
offset="0"
/>
<stop
id="stop1510"
style="stop-color:#000000;stop-opacity:0"
offset="1"
/>
</linearGradient
>
<linearGradient
id="linearGradient866"
y2=".84848"
y1=".14394"
x2=".81197"
x1="1.2991"
>
<stop
id="stop3035"
style="stop-color:#4b6983"
offset="0"
/>
<stop
id="stop3036"
style="stop-color:#9db8d2;stop-opacity:0"
offset="1"
/>
</linearGradient
>
</defs
>
<sodipodi:namedview
id="base"
bordercolor="#666666"
inkscape:pageshadow="2"
inkscape:window-width="341"
pagecolor="#ffffff"
inkscape:zoom="1.5187464"
inkscape:window-x="398"
borderopacity="1.0"
inkscape:cx="60.199260"
inkscape:cy="73.299368"
inkscape:window-y="89"
inkscape:window-height="527"
inkscape:pageopacity="0.0"
/>
<path
id="path930"
sodipodi:nodetypes="cccccccccccccccc"
style="fill-rule:evenodd;stroke-width:.42649;stroke-opacity:.36478;fill:#ffffff"
d="m17.159 6.3293v36.74 36.739 36.742 36.74h33.528 33.528 33.525 33.53v-36.74-36.742-36.739l-33.53-36.74-33.525 0.0003h-33.528-33.528z"
/>
<g
id="g1552"
style="fill:url(#linearGradient1506)"
transform="matrix(.30417 0 0 .29757 -36.704 -112.49)"
>
<path
id="path1505"
sodipodi:nodetypes="cccccccccccccccc"
style="fill-rule:evenodd;stroke-width:.95407pt;fill-opacity:.75"
d="m173.36 408.81v122.26 122.26 122.27 122.26h108.76 108.76 108.77 108.76v-122.26-122.27-122.26l-108.76-122.26h-108.77-108.76-108.76z"
/>
<path
id="path1538"
style="fill-rule:evenodd;stroke-width:.95407pt;fill-opacity:.75"
d="m170.12 407.19v493.9h441.54v-371.28c-36.85-41.42-73.68-82.86-110.57-124.25h-330.97v1.63z"
/>
<path
id="path1543"
style="fill-rule:evenodd;stroke-width:.95407pt;fill-opacity:.75"
d="m166.88 403.94v500.4h448.03v-375.78c-37.45-42.09-74.89-84.19-112.38-126.25h-335.65v1.63z"
/>
</g
>
<path
id="rect900"
sodipodi:nodetypes="cccccccccccccccc"
style="stroke-opacity:.36478;fill-rule:evenodd;stroke:#000000;stroke-width:1.4375;fill:url(#linearGradient1495)"
d="m297.99 136.74v123.83 123.83 123.83 123.83h113.01 113 113.01 113v-123.83-123.83-123.83l-113-123.83h-113.01-113-113.01z"
transform="matrix(.29669 0 0 .29669 -71.196 -34.058)"
/>
<path
id="rect1558"
sodipodi:nodetypes="cccccc"
style="fill-rule:evenodd;stroke-width:1pt;fill:url(#linearGradient866)"
d="m26.107 13.576v132.8h115.77v-108.68l-21.85-24.124h-93.923z"
/>
<path
id="path892"
sodipodi:nodetypes="cczzzzzzzzzcc"
style="stroke-width:1pt;fill:url(#linearGradient893)"
d="m86.959 69.383c11.089 2.853 32.541 23.61 5.653 23.483-18.834-0.664-51.748-7.834-51.982-0.983s17.268 3.278 64.84 15.727c47.94 12.54-27.92 12.46-4.88 18.4 23.05 5.94 47.25 1.98 52.54 13 5.28 11.02 0.5 5.92-7.15-1.7s-44.94 0.36-60.619-10.76c-15.677-11.12 34.829-9.26 15.759-17.18-19.063-7.91-62.413 2.62-74.665-14.561-12.582-17.646 28.972-9.137 44.448-7.695 15.477 1.441 37.267-4.104 7.921-13.692-3.41-1.337 4.266 0.131 8.135-4.039z"
/>
<path
id="path1500"
sodipodi:nodetypes="cccczc"
style="fill-rule:evenodd;stroke-width:1pt;fill:url(#linearGradient1499)"
d="m150.8 19.069l0.6 134.69h-131.67l-0.079-33.29c2.944 1.13 32.692-40.999 70.141-39.187 37.488 1.814 27.788-56.778 61.008-62.214z"
/>
<path
id="path1231"
sodipodi:nodetypes="cc"
style="stroke:#314e6c;stroke-width:1.1568;fill:none"
d="m35.811 218.67l17.767 23.42"
transform="matrix(1.3207 0 0 1.3207 -31.661 -208.47)"
/>
<path
id="path1232"
sodipodi:rx="6.9132495"
sodipodi:ry="6.9132495"
style="stroke:#314e6c;stroke-width:2.3894;fill:none"
sodipodi:type="arc"
d="m84.687 242.96a6.9132 6.9132 0 1 0 -13.826 0 6.9132 6.9132 0 1 0 13.826 0z"
transform="matrix(.63942 0 0 .63942 -7.7754 -41.226)"
sodipodi:cy="242.95900"
sodipodi:cx="77.774055"
/>
<path
id="path1818"
sodipodi:rx="6.9132495"
sodipodi:ry="6.9132495"
style="stroke:#314e6c;stroke-width:2.3894;fill:none"
sodipodi:type="arc"
d="m84.687 242.96a6.9132 6.9132 0 1 0 -13.826 0 6.9132 6.9132 0 1 0 13.826 0z"
transform="matrix(.63942 0 0 .63942 -35.917 -78.665)"
sodipodi:cy="242.95900"
sodipodi:cx="77.774055"
/>
<path
id="path906"
sodipodi:nodetypes="cccc"
style="fill-rule:evenodd;stroke-width:.95407pt;fill:url(#linearGradient1497)"
d="m750.01 260.57c-34.07-10.08-78.21-8.65-111.56-2.9 5.76-36.95 6.48-83.26-1.44-120.93l113 123.83z"
transform="matrix(.29669 0 0 .29669 -71.196 -34.058)"
/>
<g
id="g3664"
transform="matrix(3.2509 0 0 3.2509 75.566 11.493)"
>
<path
id="path1934"
sodipodi:rx="12.562782"
sodipodi:ry="12.562782"
style="fill-rule:evenodd;stroke-width:1pt;fill:url(#radialGradient1502)"
sodipodi:type="arc"
d="m54.439 37.866a12.563 12.563 0 1 0 -25.126 0 12.563 12.563 0 1 0 25.126 0z"
transform="matrix(.74091 0 0 .13637 -20.773 12.915)"
sodipodi:cy="37.865574"
sodipodi:cx="41.875938"
/>
<path
id="path2139"
sodipodi:nodetypes="czzcc"
style="fill-rule:evenodd;stroke-width:.25;fill:#565248"
d="m5.1124 15.088c2.5318-4.155 11.088-14.236 13.239-14.741 2.114-0.49593 1.775 0.7818 1.141 1.794-0.645 1.029-3.458 6.907-12.687 13.62-1.3705 0.464-1.6926-0.673-1.6926-0.673z"
/>
<path
id="path2140"
sodipodi:nodetypes="cccc"
style="fill-rule:evenodd;stroke-width:.25;fill:#434343"
d="m0.37663 18.603s6.4391 1.541 6.9583-2.039c0.5192-3.581-1.9917-1.852-3.0638-1.769-1.4947 0.054-2.9655 1.604-3.8945 3.808z"
/>
<path
id="path2230"
sodipodi:nodetypes="czccc"
style="fill-rule:evenodd;stroke-width:.125;fill:url(#linearGradient2121)"
d="m9.7456 9.468c1.4424-1.666 6.9044-7.8858 8.3754-8.5542 1.439-0.6538 1.589-0.16192 1.38 0.3369-0.209 0.4989-7.502 9.3543-8.332 9.0413-0.829-0.3128-1.4441-0.39-1.4234-0.824z"
/>
<path
id="path2141"
sodipodi:nodetypes="ccccc"
style="fill-rule:evenodd;stroke-width:.25;fill:url(#linearGradient2316)"
d="m5.2263 14.482l4.1773-5.2886c0.4688 1.0156 3.2544 1.6546 2.8214 2.1426s-4.3874 4.255-4.8491 4.431c-0.4618 0.176-2.3709-1.093-2.1496-1.285z"
/>
<path
id="path2247"
sodipodi:nodetypes="cccc"
style="fill-rule:evenodd;stroke-width:1pt;fill:url(#linearGradient2222)"
d="m0.92111 17.977s1.406-2.97 3.6492-2.713c1.695 0.167 1.5018 0.673 1.5018 0.673s-2.1279 2.298-5.151 2.04z"
/>
</g
>
<rect
id="rect1019"
style="fill-rule:evenodd;stroke:#c1c1c1;stroke-width:1.0447pt;fill:#9f9f9f;fill-opacity:.75"
height="7.5958"
width="7.5958"
y="91.987"
x="22.454"
/>
<path
id="path1557"
sodipodi:nodetypes="cczccccccccc"
style="fill-rule:evenodd;stroke-width:1pt;fill:#267726"
d="m77.752 73.254l-1.135-0.779s0.778-3.51 4.069-6.848c3.195-3.242 4.494-2.115 2.174 0.457-1.277 1.559-0.426 4.676 0.426 3.585 0.851-1.091 5.249-2.65 3.972-1.247s-2.553 3.429-0.283 2.65c2.27-0.78 5.391-1.715 3.972-0.312-1.418 1.403-1.277 1.87 0.568 0.935 1.844-0.935 3.263-0.312 2.27 0.468-0.993 0.779-4.824 1.714-5.817 1.714s-9.081 0-10.216-0.623z"
/>
<metadata
>
<rdf:RDF
>
<cc:Work
>
<dc:format
>image/svg+xml</dc:format
>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage"
/>
<cc:license
rdf:resource="http://creativecommons.org/licenses/publicdomain/"
/>
<dc:publisher
>
<cc:Agent
rdf:about="http://openclipart.org/"
>
<dc:title
>Openclipart</dc:title
>
</cc:Agent
>
</dc:publisher
>
<dc:title
>SVG</dc:title
>
<dc:date
>2009-04-29T06:30:28</dc:date
>
<dc:description
>An SVG file icon by Andrew Fitzsimon. Etiquette Icon set. From 0.18 OCAL database.</dc:description
>
<dc:source
>https://openclipart.org/detail/25454/svg-by-anonymous-25454</dc:source
>
<dc:creator
>
<cc:Agent
>
<dc:title
>Anonymous</dc:title
>
</cc:Agent
>
</dc:creator
>
<dc:subject
>
<rdf:Bag
>
<rdf:li
>computer</rdf:li
>
<rdf:li
>drawing</rdf:li
>
<rdf:li
>etiquette</rdf:li
>
<rdf:li
>file</rdf:li
>
<rdf:li
>gnome</rdf:li
>
<rdf:li
>graphics</rdf:li
>
<rdf:li
>icon</rdf:li
>
<rdf:li
>mime type</rdf:li
>
<rdf:li
>paintbrush</rdf:li
>
<rdf:li
>vector</rdf:li
>
</rdf:Bag
>
</dc:subject
>
</cc:Work
>
<cc:License
rdf:about="http://creativecommons.org/licenses/publicdomain/"
>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution"
/>
<cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks"
/>
</cc:License
>
</rdf:RDF
>
</metadata
>
</svg
>
<h2>We've got svg support!</h2>
<h3>Thank you, StackExchange!</h3>

<p>An SVG file icon by Andrew Fitzsimon.  From https://openclipart.org/detail/25454/SVG-by-Andy.  http://creativecommons.org/licenses/publicdomain/.

Demo'ing some console config. Presumably, these settings could be tied to some UI elements and then auto-injected into the composited snippet.

console.config({
maximize: true,       // default is false
maxEntries: Infinity, // default is 50... to prevent you from crashing the DOM in a loop
autoScroll: false,    // default is true (like the native console)
timeStamps: false     // default is true
});

for(var i = 0; i < 1000; i++){
console.count("test");
}
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

## Inspired by SE's Workplace.

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
display: block;
margin: 0 auto;
padding: 10px;
width: 100%;
background: #a8d4d7;
}
.bottle {
position: relative;
display: block;
margin: 0 auto;
height: 160px;
width: 100px;
background: #64B7FF;
border-radius: 40px;
}
.bottle .reflection {
position: absolute;
top: 8px;
left: 5px;
height: 40px;
width: 110px;
border-top-left-radius: 31px;
border-top-right-radius: 31px;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(1%, rgba(255, 255, 255, 0.20)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
}
.bottle .line {
position: absolute;
background: inherit;
height: 15px;
width: 110px;
border-radius: 15px;
}
.bottle .line:before {
content:"";
height: 15px;
width: 100px;
position: absolute;
top: -1px;
left: 5px;
box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
-webkit-box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75);
}
.bottle .line:after {
content:"";
height: 15px;
width: 100px;
position: absolute;
top: -1px;
left: 5px;
box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
-webkit-box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75);
}
.bottle .line:nth-child(3) {
top: 40px;
left: -5px;
}
.bottle .line:nth-child(4) {
bottom: 40px;
left: -5px;
}
.stand {
height: 250px;
width: 120px;
background: white;
position: relative;
display: block;
margin: 0 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.stand:before {
content:"";
position: absolute;
top: -5px;
left: 10px;
width: 100px;
height: 8px;
background: #f8f8f8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.stand:after {
content:"";
position: absolute;
bottom: 0px;
width: 100%;
height: 3px;
background: #e1e1e1;
}
.stand .taps {
height: 40%;
width: 70%;
background: #e1e1e1;
position: absolute;
margin: 0 auto;
top: 10%;
left: 0;
bottom: 0;
right: 0;
border-radius: 5px;
border-bottom-color: #767676;
border-bottom-style: solid;
border-bottom-width: 10px;
}
.stand .taps:before {
content:"";
height: 97%;
width: 1px;
background: #c5c5c5;
position: absolute;
bottom: 0;
left: 0;
border-top-left-radius: 5px;
}
.stand .taps:after {
content:"";
height: 97%;
width: 1px;
background: #c5c5c5;
position: absolute;
bottom: 0;
right: 0;
border-top-right-radius: 5px;
}
.stand .taps div {
height: 20px;
width: 32px;
background: white;
display: inline-block;
margin: 15px 4px;
}
.stand .taps .cold:before {
content:"";
height: 6px;
width: 32px;
position: absolute;
margin: 0 auto;
background: #0000FF;
}
.stand .taps .hot:before {
content:"";
height: 6px;
width: 32px;
position: absolute;
margin: 0 auto;
background: #FF3300;
}
.stand .taps .cold:after {
content:"";
height: 8px;
width: 8px;
border-radius: 8px;
position: absolute;
margin: auto;
top: 30px;
left: 16px;
background: white;
}
.stand .taps .hot:after {
content:"";
height: 8px;
width: 8px;
border-radius: 8px;
position: absolute;
margin: auto;
top: 30px;
right: 16px;
background: white;
}
.bottle .bubbles {
height: 100%;
width: 100%;
margin: 0 auto;
}
.bottle .bubbles span {
position: absolute;
opacity: .5;
}
.bottle .bubbles span:nth-child(1) {
height: 3px;
width: 3px;
border-radius: 3px;
background: #d8d8ff;
bottom: 75px;
left: 45px;
}
.bottle .bubbles span:nth-child(2) {
height: 5px;
width: 5px;
border-radius: 5px;
background: #d8d8ff;
bottom: 25px;
left: 25px;
}
.bottle .bubbles span:nth-child(3) {
height: 7px;
width: 7px;
border-radius: 7px;
background: #d8d8ff;
bottom: 35px;
left: 60px;
}
.bottle .bubbles span:nth-child(4) {
height: 9px;
width: 9px;
border-radius: 9px;
background: #d8d8ff;
bottom: 20px;
left: 45px;
}
.bottle .bubbles span:nth-child(5) {
height: 11px;
width: 11px;
border-radius: 11px;
background: #d8d8ff;
bottom: 60px;
left: 50px;
}
.bottle .bubbles span:nth-child(6) {
height: 9px;
width: 9px;
border-radius: 9px;
background: #d8d8ff;
bottom: 60px;
left: 60px;
}
<div class="wrapper">
<div class="bottle">
<div class="bubbles">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="reflection"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="stand">
<div class="taps">
<div class="cold"></div>
<div class="hot"></div>
</div>
</div>
</div>

Whee

var logo = document.getElementById("logo"),
x = 0,
y = 0,
vx = 1,
vy = 1,
angle = -90,
t = 0;

logo.transform = (logo.transform || logo.webkitTransform || logo.msTransform);

setInterval(function() {
logo.style.left = x + "px";
logo.style.top = y + "px";
logo.style.transform = "rotate(" + angle + "deg)";
angle += (Math.sin(t / 50) * Math.cos(t / 75)) * 25;
x += vx;
y += vy;
t++;
if (x >= 470)
vx = -1;
if (x <= 0)
vx = 1;
if (y >= 270)
vy = -1;
if (y <= 0)
vy = 1;
}, 10);
#logo {
background-image: url(http://cdn.sstatic.net/stackexchangemeta/img/favicon.ico);
width: 32px;
height: 32px;
position: relative;
transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
#box {
width: 500px;
height: 300px;
border-color: #000;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
<html>

<body>
<div id="box">
<div id="logo"></div>
</div>
</body>

</html>

• Not sure what's there..? Nov 11 '16 at 1:35

/*//
idea and most code from HTML 5 CSS All In One for Dummies by Andy Harris
http://www.aharrisbooks.net/haio/book_4/chap_07/
//*/

var drawing;
var con;
var absPic;
CANV_HEIGHT = 400;
CANV_WIDTH = 400;
SPR_HEIGHT = 100;
SPR_WIDTH = 80;

var x = 0;
var y=100;
var dx = 10;
var dy = 7;

function init(){
drawing = document.getElementById("drawing");
con = drawing.getContext("2d");
absPic = document.getElementById("absPic");
setInterval(draw, 100);
} // end init

function draw(){

// clear background
con.clearRect(0, 0, 400, 400);

// move the element
x += dx;
y += dy;

// check for boundaries
bounce();

// draw the image
con.drawImage(absPic, x, y, SPR_WIDTH, SPR_HEIGHT);

//* // turn on (add '/ ' in front) for wrap
function wrap(){
if (x > CANV_WIDTH) {
x = 0;
}
if (x < 0) {
x = CANV_WIDTH;
}
if (y > CANV_HEIGHT){
y = 0;
}
if (y < 0) {
y = CANV_HEIGHT;
}
} // end wrap
//*/

//*// turn on for bounce
function bounce(){
if (x > CANV_WIDTH - SPR_WIDTH) {
dx += -1;
}
if (x < 0) {
dx *= -1;
}
if (y > CANV_HEIGHT - SPR_HEIGHT) {
dy *= -1;
}
if (y < 0) {
dy *= -1;
}
} // end bounce
//*/

} // end draw
body{
/*font-size:400%;*/
font-family:"univers",sans-serif;
background-color:#4ca3d7;
color:white;
}

.hidden{
display: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b4c7_03wrapBounce.html</title>
<body onload = "init()">
<h3>Animated wrap or bounce</h3>

<img class = "hidden"
id = "absPic"
src = "http://webdev.nut.cc/AbigailSelfPortraitPicassoStyle.jpg"
alt = "Abigail Clare Sawatsky self-portrait in the style of Picasso" />

<canvas id = "drawing"
height = "400"
width = "400">
Canvas not supported
</canvas>
</body>
</html>

body {
background: #161616 url(pattern_40.gif) top left repeat;
margin: 0;
padding: 0;
font: 12px normal Verdana, Arial, Helvetica, sans-serif;
height: 100%;
}

* {margin: 0; padding: 0; outline: none;}

img {border: none;}

a {
text-decoration:none;
color:#00c6ff;
}

h1 {
font: 4em normal Arial, Helvetica, sans-serif;
padding: 20px;	margin: 0;
text-align:center;
color:#bbb;
}

h1 small{
font: 0.2em normal  Arial, Helvetica, sans-serif;
text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em;
display: block;
}

.container {width: 960px; margin: 0 auto; overflow: hidden;}
.content {width:800px; margin:0 auto; padding-top:50px;}
.contentBar {width:90px; margin:0 auto; padding-top:50px; padding-bottom:50px;}

/* STOP ANIMATION */

.stop {
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
}

/* Loading Circle */
.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}

.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoff .5s infinite linear;
-webkit-animation:spinoff .5s infinite linear;
}

@-moz-keyframes spin {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(-360deg); }
}

/* Second Loadin Circle */

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spinPulse 1s infinite ease-in-out;
-webkit-animation:spinPulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #2187e7;
width:30px;
height:30px;
margin:0 auto;
position:relative;
top:-50px;
-moz-animation:spinoffPulse 1s infinite linear;
-webkit-animation:spinoffPulse 1s infinite linear;
}

@-moz-keyframes spinPulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes spinoffPulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);  }
}
@-webkit-keyframes spinPulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #2187e7; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes spinoffPulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg); }
}

/* LITTLE BAR */

.barlittle {
background-color:#2187e7;
background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff);
background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
width:10px;
height:10px;
float:left;
margin-left:5px;
opacity:0.1;
-moz-transform:scale(0.7);
-webkit-transform:scale(0.7);
-moz-animation:move 1s infinite linear;
-webkit-animation:move 1s infinite linear;
}
#block_1{
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
#block_2{
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_3{
-moz-animation-delay: .2s;
-webkit-animation-delay: .2s;
}
#block_4{
-moz-animation-delay: .3s;
-webkit-animation-delay: .3s;
}
#block_5{
-moz-animation-delay: .4s;
-webkit-animation-delay: .4s;
}
@-moz-keyframes move{
0%{-moz-transform: scale(1.2);opacity:1;}
100%{-moz-transform: scale(0.7);opacity:0.1;}
}
@-webkit-keyframes move{
0%{-webkit-transform: scale(1.2);opacity:1;}
100%{-webkit-transform: scale(0.7);opacity:0.1;}
}

/* Trigger button for javascript */

.trigger, .triggerFull, .triggerBar {
background: #000000;
background: -moz-linear-gradient(top, #161616 0%, #000000 100%);
background: -webkit-linear-gradient(top, #161616 0%,#000000 100%);
border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
font-family: Verdana, Geneva, sans-serif;
font-size: 0.8em;
text-decoration: none;
text-transform: lowercase;
text-align: center;
color: #fff;
padding: 10px;
border-radius: 3px;
display: block;
margin: 0 auto;
width: 140px;
}

.trigger:hover, .triggerFull:hover, .triggerBar:hover {
background: -moz-linear-gradient(top, #202020 0%, #161616 100%);
background: -webkit-linear-gradient(top, #202020 0%, #161616 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>CSS3 Loading Animation Loop</h1>
<!-- LOOP LOADER -->
<div class="container">
<div class="content">
<div class="ball"></div>
<div class="ball1"></div>
</div>
</div>

• nice job on this! interresting. Dec 12 '15 at 8:49

I found something that may interest you.

in one of my questions on Code Review I added in Stack Snippets to an old question and used the fun header formatting and it made parts of the stack snippet bigger because of where the comment for the begin snippet was located.

# Just because snippets are cool table { border: 3px solid red; } th { border: 3px double green; } td { border: 3px dashed blue; <table width="500px"> <tr> <th colspan="2">Food you love to eat</th> </tr> <tr> <td> I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health. </td> <td width="170"> <img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" alt="Fruit Bowl" /> </td> </tr> </table

it looked so much cooler on CodeReview, but it has been fixed in my Answer https://codereview.stackexchange.com/a/41557/18427

It was fixed with the last edit.

The Buttons were huge on Code Review and in Meta.StackOverflow.com when I did this.

it automatically placed the code snippet like this when I tried to insert it, even though when I clicked the insert snippet the cursor was 2 lines down from that.

• Interesting. I'll see if I can do something in regards to this.
– Haney StaffMod
Sep 18 '14 at 15:26
• Awesome, thanks for this awesome tool! Sep 18 '14 at 15:41

Here's to show XSS is not possible.

try {
$('#foo').text(document.cookie); } catch (e) {$('#foo').text('No cookie for you!');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo"></div>

Also, what about crashing the browser?

// fixed for @klenium
if (confirm("please make sure you aren't @klenium"))
while(a='a')a=a+a; // BOOM

• That //BOOM code did in fact crash my Chrome tab, I won't be able close it without ending process. Sep 28 '14 at 13:04
• @ElonZito There were browser crashes in the past who went full seppuku and committed a BSOD (on IE). On Opera there was once a site with a .gif that would crash it. No longer works since Opera is now rendered Blink, but fun times. Sep 28 '14 at 22:51
• There should be a counter. I wonder how many people ran into that trap. May 21 '16 at 23:15
• @klenium A counter to prevent loops cannot be implemented in javascript (or rather, it can, but you'd easily get around that and it'd be a cat-and-mouse game), and in the browser it would have to check every piece of code the browser runs to see if it's an unintentional loop (also, how do you define unintentional then? it's a "halting problem"!). May 22 '16 at 22:45
• @CamiloMartin I meant how many users clicked on the run coe snippet button. May 23 '16 at 10:42
• @klenium fixed. May 26 '16 at 2:16
• @CamiloMartin Wtf? clickHander = { send user's IP via ajax, if it isn't tracked yet, counter+=1 } ajaxResponseHander = { start inf loop }. What's so hard to understand? Of course it's possible, and of course I was joking, this is not needed. What I was talking about is that almost everyone clicks on the button without reading what's it, and kills their browsers, which is - I think - funny. That's all. Have a nice day.. May 26 '16 at 20:15
• @klenium I'd actually track it, but only to display a "x unique users crashed their browser" count :D (as a matter of fact, I'm sure someone somewhere implemented a freely available "counter" API that one could use, it's such a simple logging thing and there are many more complex free APIs available, but I can't find one - and hosting one just for this is too much). Jun 3 '16 at 13:35
• Refreshing tab stopped it though. Nov 11 '16 at 1:37

window.top.location.href = "http://www.youtube.com/watch?v=y6120QOlsfU";
No redirecting. :(

• ...thankfully so? Sep 18 '14 at 7:48
• Redirects the entire page on Firefox ESR 24.8.0, when did Firefox introduce proper sandboxing for HTML5 IFrames? Sep 18 '14 at 10:31
• @CamiloMartin, I tried what bad things you could do with code snippets. ;-)
– kay
Sep 18 '14 at 14:03
• @FelixR, at least in FF 33 sandboxed iframes are supported, or at least this particular privilege is restricted.
– kay
Sep 18 '14 at 14:04

This is the text of the answer. Here comes a snippet.

new sap.m.Button({text:"Hello"}).placeAt("content");
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"></script>
<div id="content"></div>

• It looks empty.. Nov 11 '16 at 1:39

Count MathJax code tokens for Puzzling site MathJax problems. (No code snippets there, unfortunately.)

function Count() {
var mathjax = document.getElementById("mathjax").value;
var count = document.getElementById("count");
tokens = mathjax.split(/(\\(?:[a-z]+|.)|##?\d|.)/i);
var n = 0;
for (var i = 0, m = tokens.length; i < m; i++) {
if (!tokens[i].match(/^|\}|\s|\n/)) n++; } count.innerHTML = "Tokens: <b>"+n+"</b>"; } <input type="button" value="Count Tokens" onclick="Count()" /> <span id="count" style="padding-left:2em"></span><br/> <span style="vertical-align:-.1em; font-size:80%">Paste MathJax code to be counted:</span><br/> <textarea cols="80" rows="5" id="mathjax"></textarea> • In order to change the default limitations, open your browser's console window and type MathJax.Hub.Config({TeX: {MAXBUFFER: 5120, MAXMACROS: 10000}}) and press RETURN. These are the default values. Raise them to you desired values. This will stay in effect until the page is reloaded, when you will have to do it again. It would be possible to make a bookmarklet for this, for easier access. Aug 2 '16 at 2:37 • Wikiness compelled me to make an impulsive edit for uppercase. Wouldn't be surprised if mathjax.split() has a flag for that. Still wonder about how to weigh the limits of a solution though. Perhaps the goal could be something along the lines of maximizing log_tokens(top input). My initial \binary{} would be log_148(121)=0.96, which MathJax.Hub.Config() increased just as advertised. Your \stars{} would be ~1.95, while mine would be only ~1.6. Wonder what formulae could be justified theoretically. Aug 4 '16 at 12:42 • Thanks for the edit. It was supposed to be a /.../i regex, but I forgot the i. You change is fine. About the "length" formula, I don't really know what the right one is, either. I'm not sure what top input means, here. I wonder if it should include number of \def commands in some way, or number of substitutions performed? Aug 4 '16 at 13:05 • Thought this might be an unobtrusive place to stow a sample of what's cooking with \stars{}, @Davide C, and made a couple of compulsive adjustments while at it Aug 18 '16 at 8:41 • Thanks for the \stars code, @humn. It look like you will definitely win the prize for this one. I look forward to plumbing its depths when I get a moment. I was not able to bring things under 67 myself, so you have beaten me soundly, here. Thanks for the comments on the dragons. I also thought the rounded paths were and interesting visual effect. I'm sure more could be done, but I've run out of tie for the moment! Aug 18 '16 at 10:01 • PS, @humn, in terms of the edits to the code, I don't like to misuse markup (like <sub>) because it can be confusing to people using assistive technology like screen readers. So I've changed that to use a different approach to produce the same result. Aug 18 '16 at 10:03 console.log(localStorage); localStorage["hacked"] = "the Game!"; console.log(localStorage); Ain't sure how this would go with localStorage so checking that out :D • Chrome says: Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag. js:13(anonymous function) js:13 Sep 17 '14 at 13:06 • @carbontax which is completely expected but not called for ;p Sep 17 '14 at 13:54 # Byte counter: <!DOCTYPE html><html><head><style type=text/css>html,body{margin:0;height:100%;overflow-y:hidden;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}#wrapper{overflow-y:hidden;margin:0;min-height:100%;padding:10px}#fileinput{display:none}#count{white-space:nowrap;font-weight:bold;font-size:20px;padding-right:10px}td{vertical-align:middle}table{margin-bottom:10px;margin-right:80px}#textinput{width:100%;box-sizing:border-box}</style> <!--[if lte IE 6]> <style type=text/css>#container{height:100%}</style> <![endif]--> </head> <body> <div id=wrapper> <table><tr><td id=count>0 bytes</td><td>Drag and drop a file anywhere on this snippet, <a href=# id=fileselect>select a file using a dialog</a>, or enter UTF-8 code in the textbox.</td></tr></table> <input type=file id=fileinput onchange=filedialog(this.files)> <textarea id=textinput onkeyup=textbox(this.value) onchange=textbox(this.value)></textarea> </div> <script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script> <script type=text/javascript>function nodefault(a){a.stopPropagation();a.preventDefault()}function drop(a){nodefault(a);("#count").text(a.dataTransfer.files[0].size+" bytes")}function click(a){nodefault(a);$("#fileinput")[0].click()}function filedialog(a){$("#count").text(a[0].size+" bytes")}function textbox(a){$("#count").text((new Blob([a],{encoding:"UTF-8",type:"text/plain;charset=UTF-8"})).size+" bytes")}$(document).ready(function(){var a=function(){$("#textinput").height($(window).height()-$("#textinput").offset().top-20)};$(window).resize(a);a()});document.body.addEventListener("dragenter",nodefault,false);document.body.addEventListener("dragover",nodefault,false);document.body.addEventListener("drop",drop,false);("#fileselect").on("click",click);</script> </body> </html> Console tests var ary = new Array(16); console.log(ary); var weirdness = {} - 1; console.log(weirdness); ary = ary.join(weirdness); console.log(ary); console.log(ary + " Batman!"); /*// idea and most code from HTML 5 CSS All In One for Dummies by Andy Harris http://www.aharrisbooks.net/haio/book_4/chap_07/ //*/ var drawing; var con; var absPic; CANV_HEIGHT = 400; CANV_WIDTH = 400; SPR_HEIGHT = 100; SPR_WIDTH = 80; var x = 0; var y=100; var dx = 10; var dy = 7; function init(){ drawing = document.getElementById("drawing"); con = drawing.getContext("2d"); absPic = document.getElementById("absPic"); setInterval(draw, 100); } // end init function draw(){ // clear background con.clearRect(0, 0, 400, 400); // move the element x += dx; y += dy; // check for boundaries bounce(); // draw the image con.drawImage(absPic, x, y, SPR_WIDTH, SPR_HEIGHT); //* // turn on (add '/ ' in front) for wrap function wrap(){ if (x > CANV_WIDTH) { x = 0; } if (x < 0) { x = CANV_WIDTH; } if (y > CANV_HEIGHT){ y = 0; } if (y < 0) { y = CANV_HEIGHT; } } // end wrap //*/ //*// turn on for bounce function bounce(){ if (x > CANV_WIDTH - SPR_WIDTH) { dx += -1; } if (x < 0) { dx *= -1; } if (y > CANV_HEIGHT - SPR_HEIGHT) { dy *= -1; } if (y < 0) { dy *= -1; } } // end bounce //*/ } // end draw body{ /*font-size:400%;*/ font-family:"univers",sans-serif; background-color:#4ca3d7; color:white; } .hidden{ display: none; } <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>b4c7_03wrapBounce.html</title> <body onload = "init()"> <h3>Animated wrap or bounce</h3> <img class = "hidden" id = "absPic" src = "http://webdev.nut.cc/AbigailSelfPortraitPicassoStyle.jpg" alt = "Abigail Clare Sawatsky self-portrait in the style of Picasso" /> <canvas id = "drawing" height = "400" width = "400"> Canvas not supported </canvas> </body> </html> *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wrapper { display: block; margin: 0 auto; padding: 10px; width: 100%; background: #a8d4d7; } .bottle { position: relative; display: block; margin: 0 auto; height: 160px; width: 100px; background: #64B7FF; border-radius: 40px; } .bottle .reflection { position: absolute; top: 8px; left: 5px; height: 40px; width: 110px; border-top-left-radius: 31px; border-top-right-radius: 31px; background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(1%, rgba(255, 255, 255, 0.20)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); } .bottle .line { position: absolute; background: inherit; height: 15px; width: 110px; border-radius: 15px; } .bottle .line:before { content:""; height: 15px; width: 100px; position: absolute; top: -1px; left: 5px; box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75); -webkit-box-shadow: 0px 1px 0px 0px rgba(80, 146, 204, .75); } .bottle .line:after { content:""; height: 15px; width: 100px; position: absolute; top: -1px; left: 5px; box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75); -webkit-box-shadow: inset 0px 1px 0px 0px rgba(176, 218, 255, .75); } .bottle .line:nth-child(3) { top: 40px; left: -5px; } .bottle .line:nth-child(4) { bottom: 40px; left: -5px; } .stand { height: 250px; width: 120px; background: white; position: relative; display: block; margin: 0 auto; border-top-left-radius: 5px; border-top-right-radius: 5px; } .stand:before { content:""; position: absolute; top: -5px; left: 10px; width: 100px; height: 8px; background: #f8f8f8; border-top-left-radius: 10px; border-top-right-radius: 10px; } .stand:after { content:""; position: absolute; bottom: 0px; width: 100%; height: 3px; background: #e1e1e1; } .stand .taps { height: 40%; width: 70%; background: #e1e1e1; position: absolute; margin: 0 auto; top: 10%; left: 0; bottom: 0; right: 0; border-radius: 5px; border-bottom-color: #767676; border-bottom-style: solid; border-bottom-width: 10px; } .stand .taps:before { content:""; height: 97%; width: 1px; background: #c5c5c5; position: absolute; bottom: 0; left: 0; border-top-left-radius: 5px; } .stand .taps:after { content:""; height: 97%; width: 1px; background: #c5c5c5; position: absolute; bottom: 0; right: 0; border-top-right-radius: 5px; } .stand .taps div { height: 20px; width: 32px; background: white; display: inline-block; margin: 15px 4px; } .stand .taps .cold:before { content:""; height: 6px; width: 32px; position: absolute; margin: 0 auto; background: #0000FF; } .stand .taps .hot:before { content:""; height: 6px; width: 32px; position: absolute; margin: 0 auto; background: #FF3300; } .stand .taps .cold:after { content:""; height: 8px; width: 8px; border-radius: 8px; position: absolute; margin: auto; top: 30px; left: 16px; background: white; } .stand .taps .hot:after { content:""; height: 8px; width: 8px; border-radius: 8px; position: absolute; margin: auto; top: 30px; right: 16px; background: white; } .bottle .bubbles { height: 100%; width: 100%; margin: 0 auto; } .bottle .bubbles span { position: absolute; opacity: .5; } .bottle .bubbles span:nth-child(1) { height: 3px; width: 3px; border-radius: 3px; background: #d8d8ff; bottom: 75px; left: 45px; } .bottle .bubbles span:nth-child(2) { height: 5px; width: 5px; border-radius: 5px; background: #d8d8ff; bottom: 25px; left: 25px; } .bottle .bubbles span:nth-child(3) { height: 7px; width: 7px; border-radius: 7px; background: #d8d8ff; bottom: 35px; left: 60px; } .bottle .bubbles span:nth-child(4) { height: 9px; width: 9px; border-radius: 9px; background: #d8d8ff; bottom: 20px; left: 45px; } .bottle .bubbles span:nth-child(5) { height: 11px; width: 11px; border-radius: 11px; background: #d8d8ff; bottom: 60px; left: 50px; } .bottle .bubbles span:nth-child(6) { height: 9px; width: 9px; border-radius: 9px; background: #d8d8ff; bottom: 60px; left: 60px; } <div class="wrapper"> <div class="bottle"> <div class="bubbles"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div class="reflection"></div> <div class="line"></div> <div class="line"></div> </div> <div class="stand"> <div class="taps"> <div class="cold"></div> <div class="hot"></div> </div> </div> </div> Any idea why Bootstrap tooltips won't work in this example? <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <html> <body> <br> <br> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> </body> </html> • Console says: Error: Bootstrap's JavaScript requires jQuery so you need to switch the order of JS includes around such that jQuery is first. – Haney StaffMod Oct 2 '14 at 14:36 Just testing if Cesium can work inside a snippet, with various customized settings and stuff. Looks like it can. var imagerySources = Cesium.createDefaultImageryProviderViewModels(); var terrainSources = Cesium.createDefaultTerrainProviderViewModels(); var viewer = new Cesium.Viewer('cesiumContainer', { // The 2nd imagery source has labels turned on. imageryProviderViewModels : imagerySources, selectedImageryProviderViewModel : imagerySources[1], // The 2nd terrain source has a water mask. terrainProviderViewModels : terrainSources, selectedTerrainProviderViewModel : terrainSources[1] }); viewer.scene.globe.enableLighting = true; html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } <link href="http://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/> <script src="http://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script> <div id="cesiumContainer"></div> • @Haney it would be cool if people browsing the answers could load a snippet back into the snippet editor, just for testing and fiddling, without any intent to commit edits to the posted answer. The editor could be a nice environment for experimenting with other people's snippets, trying different values, etc. Apr 15 '15 at 20:56 # Leaderboard for PPCG function answersUrl(e){return"http://api.stackexchange.com/2.2/questions/"+QUESTION_ID+"/answers?page="+e+"&pagesize=100&order=desc&sort=creation&site=codegolf&filter="+ANSWER_FILTER}function commentUrl(e,r){return"http://api.stackexchange.com/2.2/answers/"+r.join(";")+"/comments?page="+e+"&pagesize=100&order=desc&sort=creation&site=codegolf&filter="+COMMENT_FILTER}function getAnswers(){jQuery.ajax({url:answersUrl(answer_page++),method:"get",dataType:"jsonp",crossDomain:!0,success:function(e){answers.push.apply(answers,e.items),answers_hash=[],answer_ids=[],e.items.forEach(function(e){e.comments=[];var r=+e.share_link.match(/\d+/);answer_ids.push(r),answers_hash[r]=e}),e.has_more||(more_answers=!1),comment_page=1,getComments()}})}function getComments(){jQuery.ajax({url:commentUrl(comment_page++,answer_ids),method:"get",dataType:"jsonp",crossDomain:!0,success:function(e){e.items.forEach(function(e){e.owner.user_id===OVERRIDE_USER&&answers_hash[e.post_id].comments.push(e)}),e.has_more?getComments():more_answers?getAnswers():process()}})}function getAuthorName(e){return e.owner.display_name}function process(){var e=[],r={};answers.forEach(function(s){var a=s.body;s.comments.forEach(function(e){OVERRIDE_REG.test(e.body)&&(a="<h1>"+e.body.replace(OVERRIDE_REG,"")+"</h1>")});var n=a.match(SCORE_REG);if(n){var t=getAuthorName(s);e.push({user:getAuthorName(s),size:+n[2],language:n[1],link:s.share_link}),r[t]=r[t]||0,r[t]+=30/+n[2]}});var s=Object.keys(r).sort(function(e,s){return r[s]-r[e]});e.sort(function(e,r){var s=e.size,a=r.size;return s-a});var a={},n=1,t=null,o=1;e.forEach(function(e){e.size!=t&&(o=n),t=e.size,++n;var r=e.language;/<a/.test(r)&&(r=jQuery(r).text()),a[r]=a[r]||{lang:e.language,user:e.user,size:e.size,link:e.link}});for(var c=0;c<s.length;c++){var i=jQuery("#author-template").html();i=i.replace("{{PLACE}}",c+1).replace("{{NAME}}",s[c]).replace("{{SCORE}}",r[s[c]].toFixed(2)),jQuery("#authors").append(jQuery(i))}var u=[];for(var m in a)a.hasOwnProperty(m)&&u.push(a[m]);u.sort(function(e,r){var s=e.lang.replace(/<.*?>/g,"").toLowerCase(),a=r.lang.replace(/<.*?>/g,"").toLowerCase();return s>a?1:a>s?-1:0});for(var l=0;l<u.length;++l){var h=jQuery("#language-template").html(),m=u[l];h=h.replace("{{LANGUAGE}}",m.lang).replace("{{NAME}}",m.user).replace("{{SIZE}}",m.size).replace("{{LINK}}",m.link),h=jQuery(h),jQuery("#languages").append(h)}}var QUESTION_ID=57327,ANSWER_FILTER="!t)IWYnsLAZle2tQ3KqrVveCRJfxcRLe",COMMENT_FILTER="!)Q2B_A2kjfAiU78X(md6BoYk",OVERRIDE_USER=16294,answers=[],answers_hash,answer_ids,answer_page=1,more_answers=!0,comment_page;getAnswers();var SCORE_REG=/<h\d>\s*([^\n,]*[^\s,]),.*?(\d+)(?=[^\n\d<>]*(?:<(?:s>[^\n<>]*<\/s>|[^\n<>]+>)[^\n\d<>]*)*<\/h\d>)/,OVERRIDE_REG=/^Override\s*header:\s*/i; body{text-align:left!important}#answer-list,#language-list{padding:10px;width:290px;float:left}table thead{font-weight:700}table td{padding:5px} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/codegolf/all.css?v=83c949450c8b"> <div id="author-list"> <h2>Leaderboard</h2> <table class="author-list"> <thead> <tr><td></td><td>Author</td><td>Score</td></tr></thead> <tbody id="authors"> </tbody> </table> </div><div id="language-list"> <h2>Languages</h2> <table class="language-list"> <thead> <tr><td>Language</td><td>User</td><td>Score</td></tr></thead> <tbody id="languages"> </tbody> </table> </div><table style="display: none"> <tbody id="author-template"> <tr><td>{{PLACE}}</td><td>{{NAME}}</td><td>{{SCORE}}</td></tr></tbody> </table> <table style="display: none"> <tbody id="language-template"> <tr><td>{{LANGUAGE}}</td><td>{{NAME}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr></tbody> </table> Hidden snippet function doNothing() { alert("boo"); } Hide this html /* Configuration */ var QUESTION_IDs = [50484, 50521, 50625, 51123, 51222, 61940]; // Obtain this from the url // It will be like http://XYZ.stackexchange.com/questions/QUESTION_ID/... on any question page var ANSWER_FILTER = "!.FjwQBrX2KXuFkv6p2lChi_RjzM19"; /* App */ var answers = [], page = 1, currentQ = -1; function answersUrl(index) { return "http://api.stackexchange.com/2.2/questions/" + QUESTION_IDs.join(";") + "/answers?page=" + index + "&pagesize=100&order=desc&sort=creation&site=codegolf&filter=" + ANSWER_FILTER; } function getAnswers() {.ajax({
url: answersUrl(page++),
method: "get",
dataType: "jsonp",
crossDomain: true,
success: function (data) {
answers.push.apply(answers, data.items);
if (data.has_more) getAnswers();
else process();
}
});
}

getAnswers();

var SIZE_REG = /\d+(?=[^\d&]*(?:&lt;(?:s&gt;((?!&gt;).)*&lt;\/s&gt;|((?!&gt;).)+&gt;)[^\d&]*)*$)/; var NUMBER_REG = /\d+/; var LANGUAGE_REG = /^#*\s*([^\n,]+)(?=,)/;// function shouldHaveHeading(a) { var pass = false; var lines = a.body_markdown.split("\n"); try { pass |= /^#/.test(a.body_markdown); pass |= ["-", "="] .indexOf(lines[1][0]) > -1; pass &= LANGUAGE_REG.test(a.body_markdown); } catch (ex) {} return pass; } function shouldHaveScore(a) { var pass = false; try { pass |= SIZE_REG.test(a.body_markdown.split("\n")[0]); } catch (ex) {} if (!pass) console.log(a); return pass; } function getAuthorName(a) { return a.owner.display_name; } function getAuthorId(a) { return a.owner.user_id; } function process() { answers = answers.filter(shouldHaveScore) .filter(shouldHaveHeading); answers.sort(function (a, b) { var aB = +(a.body_markdown.split("\n")[0].match(SIZE_REG) || [Infinity])[0], bB = +(b.body_markdown.split("\n")[0].match(SIZE_REG) || [Infinity])[0]; return aB - bB }); var users = {}; answers.forEach(function (a) { var headline = a.body_markdown.split("\n")[0]; var question = QUESTION_IDs.indexOf(a.question_id); var size = parseInt((headline.match(SIZE_REG)||[0])[0]); var language = headline.match(LANGUAGE_REG)[1]; var user = getAuthorName(a); var userId = getAuthorId(a); if (!users[userId]) users[userId] = {name: user, nAnswer: 0, answers: []}; if (!users[userId].answers[question]) { users[userId].answers[question] = {size: Infinity}; users[userId].nAnswer++; } if (users[userId].answers[question].size > size) { users[userId].answers[question] = {size: size, link: a.share_link} } }); var sortedUsers = []; for (var userId in users) if (users.hasOwnProperty(userId)) { var user = users[userId]; user.score = 0; user.completedAll = true; for (var i = 0; i < QUESTION_IDs.length; ++i) { if (user.answers[i]) user.score += user.answers[i].size; else user.completedAll = false; } sortedUsers.push(user); } sortedUsers.sort(function (a, b) { if (a.nAnswer > b.nAnswer) return -1; if (b.nAnswer > a.nAnswer) return 1; return a.score - b.score; }); var place = 1; for (var i = 0; i < sortedUsers.length; ++i) { var user = sortedUsers[i]; var row = '<tr><td>'+ place++ +'.</td><td>'+user.name+'</td>'; for (var j = 0; j < QUESTION_IDs.length; ++j) { var answer = user.answers[j]; if (answer) row += '<td><a href="'+answer.link+'">'+answer.size+'</a></td>'; else row += '<td class="missing"></td>'; } row += '<td></td>'; if (user.completedAll) row += '<td class="total">'+user.score+'</td>'; else row += '<td class="total missing">'+user.score+'</td>'; row += '</tr>';$("#users").append(row);
}
}
body { text-align: left !important}

#leaderboard {
width: 500px;
}

#answer-list {
padding: 10px;
width: 290px;
float: left;
}

#language-list {
padding: 10px;
width: 290px;
float: left;
}

table thead {
font-weight: bold;
}

table td {
padding: 5px;
}

td.total {
font-weight: bold;
text-align: right;
}

td.missing {
background: #bbbbbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/codegolf/all.css?v=83c949450c8b">
<div id="leaderboard">
<h2>Leaderboard</h2>
<p>
Missing scores are shown as grey cells. A grey total indicates that the user has not participated in all challenges and is not eligible for the overall victory yet.
</p>
<table class="_user-list">
<thead>
<tr><td></td><td>User</td>
<td><a href="http://codegolf.stackexchange.com/q/50484/31414">#1</a></td>
<td><a href="http://codegolf.stackexchange.com/q/50521/31414">#2</a></td>
<td><a href="http://codegolf.stackexchange.com/q/50625/31414">#3</a></td>
<td><a href="http://codegolf.stackexchange.com/q/51123/31414">#4</a></td>
<td><a href="http://codegolf.stackexchange.com/q/51222/31414">#5</a></td>
<td><a href="http://codegolf.stackexchange.com/q/61940/31414">#5</a></td>
<td></td><td>Total</td>
</tr>
</thead>
<tbody id="users">

</tbody>
</table>
</div>
<table style="display: none">
<tbody id="answer-template">
<tr><td>{{NAME}}</td><td>{{LANGUAGE}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr>
</tbody>
</table>
<table style="display: none">
<tbody id="language-template">
<tr><td>{{LANGUAGE}}</td><td>{{NAME}}</td><td>{{SIZE}}</td><td><a href="{{LINK}}">Link</a></td></tr>
</tbody>
</table>

var t = prompt("Input your code.");
var d = ["A", "a", "U", "u", "X", "x", "+", "&", "#", "6", "5", "4", "1", "9", "7", "0"];

if (d.indexOf(t) > -1) {
alert("Contains a disallowed character!");
}

// Stack Exchange is love, Stack Exchange is life.

// http://stackoverflow.com/a/4444497/5513988
// Modified that if statement from above link

// http://stackoverflow.com/a/18588905/5513988
// Then changed to this

• What's this for? Nov 11 '16 at 1:45
• @AllDani.com It was for a Code Golf submission. Let me find the link to it. Nov 11 '16 at 2:54

This is not allowed. Why not? I have weekly answers featuring a submit button

Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.

$(function() {$("#form1").on("submit",function(e) {
e.preventDefault(); // with or without this, the code is not allowed
alert("I want stacksnippets to work here");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Getting <pre><B>Blocked form submission to '' because the form's frame is sandboxed and the 'allow-forms' permission is not set.</b></pre>

<form id="form1">
<input type="submit">
</form>