Stack Snippets Sandbox (This sandbox is deprecated. Please use the general Formatting Sandbox.) [duplicate]

Question

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

I don't see how to answer in this thread to test snippets.
– David Spector
Commented Aug 17, 2023 at 20:51 — David Spector, Commented Aug 17, 2023 at 20:51

3 revs, 3 users 98% · Accepted Answer · 2024-05-15 14:38:36Z

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;
var dead = false;

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() {
  if (dead) return;
    //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 && !dead) {
        alert("You Are Dead");
    dead = 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. — sampathsris, Commented Sep 19, 2014 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 — Lemuel Botha, Commented Sep 19, 2014 at 12:50
All I get is "If you see this it wont work. Level: 1 Score: 0" — celtschk, Commented Oct 26, 2014 at 12:08

3 revs, 2 users 98% · Accepted Answer · 2014-09-17 09:21:18Z

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>

3 revs, 2 users 74% · Accepted Answer · 2018-07-10 09:17:16Z

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.

@ShadowWizard turns out HTTPs is mandatory already which is good I guess. — Camilo Martin, Commented May 17, 2017 at 22:57

Wandering Logic · Accepted Answer · 2014-09-16 20:59:07Z

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

5 revs · Accepted Answer · 2017-09-28 14:49:57Z

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>

Omar · Accepted Answer · 2020-06-03 13:30:57Z

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>

kitcar2000 · Accepted Answer · 2014-10-21 18:45:58Z

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..?
– user308037
Commented Nov 11, 2016 at 1:35 — user308037, Commented Nov 11, 2016 at 1:35

Phil Sawatsky · Accepted Answer · 2014-09-17 02:18:20Z

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

Mudaser Ali · Accepted Answer · 2014-09-17 06:18:23Z

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
Commented Dec 12, 2015 at 8:49 — codea, Commented Dec 12, 2015 at 8:49

2 revs · Accepted Answer · 2017-04-13 12:41:05Z

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.

Interesting. I'll see if I can do something in regards to this. — Haney, Commented Sep 18, 2014 at 15:26

4 revs · Accepted Answer · 2016-05-26 02:14:37Z

3

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.

edited May 26, 2016 at 2:14

community wiki

4 revs
Camilo Martin

3

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

Add a comment |

Kijewski · Accepted Answer · 2014-09-16 22:27:56Z

2

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

No redirecting. :(

answered Sep 16, 2014 at 22:27

community wiki

Kijewski

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

Add a comment |

qmacro · Accepted Answer · 2014-10-16 13:57:28Z

2

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>

answered Oct 16, 2014 at 13:57

community wiki

qmacro

It looks empty..
– user308037
Commented Nov 11, 2016 at 1:39

Add a comment |

7 revs, 2 users 53% · Accepted Answer · 2020-06-03 13:30:57Z

2

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>

edited Jun 3, 2020 at 13:30

community wiki

7 revs, 2 users 53%
humn

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
Commented Aug 2, 2016 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
Commented Aug 4, 2016 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
Commented Aug 4, 2016 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
Commented Aug 18, 2016 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
Commented Aug 18, 2016 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
Commented Aug 18, 2016 at 10:03

Add a comment |

2 revs · Accepted Answer · 2014-09-17 09:31:53Z

1

console.log(localStorage);
localStorage["hacked"] = "the Game!";
console.log(localStorage);

Ain't sure how this would go with localStorage so checking that out :D

edited Sep 17, 2014 at 9:31

community wiki

2 revs
Awal Garg

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
Commented Sep 17, 2014 at 13:06
@carbontax which is completely expected but not called for ;p
– user3459110
Commented Sep 17, 2014 at 13:54

Add a comment |

ArtOfCode · Accepted Answer · 2016-05-21 20:30:36Z

1

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

answered May 21, 2016 at 20:30

community wiki

ArtOfCode

Add a comment |

Phil Sawatsky · Accepted Answer · 2014-09-17 02:23:06Z

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

cepage · Accepted Answer · 2014-10-02 14:23:36Z

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, Commented Oct 2, 2014 at 14:36

orlp · Accepted Answer · 2020-06-03 13:30:57Z

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>

emackey · Accepted Answer · 2015-04-15 20:16:12Z

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, Commented Apr 15, 2015 at 20:56

2 revs · Accepted Answer · 2015-09-10 22:36:50Z

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>

rolfl · Accepted Answer · 2015-10-05 02:18:10Z

0

Hidden snippet

function doNothing() {
  alert("boo");
}

Hide this html

answered Oct 5, 2015 at 2:18

community wiki

rolfl

Add a comment |

GamrCorps · Accepted Answer · 2015-10-28 00:19:38Z

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

bb216b3acfd8f72cbc8f899d4d6963 · Accepted Answer · 2016-08-19 23:42:58Z

0

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

answered Aug 19, 2016 at 23:42

community wiki

bb216b3acfd8f72cbc8f899d4d6963

What's this for?
– user308037
Commented Nov 11, 2016 at 1:45
1

@AllDani.com It was for a Code Golf submission. Let me find the link to it.
– bb216b3acfd8f72cbc8f899d4d6963
Commented Nov 11, 2016 at 2:54

Add a comment |

2 revs, 2 users 98% · Accepted Answer · 2017-04-18 09:33:53Z

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>

Stack Exchange Network

Stack Snippets Sandbox (This sandbox is deprecated. Please use the general Formatting Sandbox.) [duplicate]

25 Answers 25

Inspired by SE's Workplace.

Byte counter:

Leaderboard for PPCG

Not the answer you're looking for? Browse other questions tagged
discussion
stack-snippets
sandbox
.

Linked

Hot Network Questions

Stack Snippets Sandbox (This sandbox is deprecated. Please use the general Formatting Sandbox.) [duplicate]

25 Answers 25

Inspired by SE's Workplace.

Byte counter:

Leaderboard for PPCG

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

Linked

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
discussion
stack-snippets
sandbox
.