This question already has an answer here:

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

marked as duplicate by Shog9 discussion Jul 6 '17 at 16:25

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

25 Answers 25

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>

  • 4
    The snake doesn't move, it only grows :( now I have to do real work. – Krumia Sep 19 '14 at 3:31
  • 2
    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 – Lemuel Botha Sep 19 '14 at 12:50
  • 1
    All I get is "If you see this it wont work. Level: 1 Score: 0" – celtschk Oct 26 '14 at 12:08
  • You're dead. Why thank you ;) – Dani Springer 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 Sep 18 '14 at 23:26
  • 1
    @Haney Indeed! The possibilities of this are endless. – Camilo Martin Sep 19 '14 at 1:25
  • What?? (jaw drop) – Dani Springer Nov 11 '16 at 1:34
  • World is dead... – Shadow Wizard Apr 24 '17 at 22:18
  • @ShadowWizard turns out HTTPs is mandatory already which is good I guess. – Camilo Martin May 17 '17 at 22:57
  • Cheers for fixing! – Shadow Wizard 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/.

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>

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>

/*//
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. – codea 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.

CodeReview ScreenShot

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.

  • 2
    Interesting. I'll see if I can do something in regards to this. – Haney Sep 18 '14 at 15:26
  • Awesome, thanks for this awesome tool! – Malachi 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

Also, wtf.

  • 3
    That //BOOM code did in fact crash my Chrome tab, I won't be able close it without ending process. – Elon Zito 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. – Camilo Martin Sep 28 '14 at 22:51
  • There should be a counter. I wonder how many people ran into that trap. – klenium 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"!). – Camilo Martin May 22 '16 at 22:45
  • @CamiloMartin I meant how many users clicked on the run coe snippet button. – klenium May 23 '16 at 10:42
  • @klenium fixed. – Camilo Martin May 26 '16 at 2:16
  • 1
    @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.. – klenium 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). – Camilo Martin Jun 3 '16 at 13:35
  • Refreshing tab stopped it though. – Dani Springer Nov 11 '16 at 1:37

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

  • 1
    ...thankfully so? – Camilo Martin 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? – Felix R 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>

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!");

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>

  • 1
    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. – Davide Cervone 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. – lauir 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? – Davide Cervone 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 – lauir 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! – Davide Cervone Aug 18 '16 at 10:01
  • 1
    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. – Davide Cervone 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

  • 1
    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 – carbontax Sep 17 '14 at 13:06
  • @carbontax which is completely expected but not called for ;p – Awal Garg 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>

/*//
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>

  • 1
    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 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. – emackey 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

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>

protected by Shadow Wizard Nov 26 '15 at 21:49

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged .