This post is dedicated to testing out the newly announced Stack Snippets feature. Feel free to answer with your own Stack Snippets, and have some fun!
This is a little more prosaic than other answers. I wanted to see if I can run this js fiddle I used in an answer recently: http://jsfiddle.net/Ljnufjs1/
.field {
position: absolute;
width: 205px;
left: 22px;
color: #eaeaea;
}
.btn {
line-height:40px;
height: 35px;
cursor: default;
-webkit-touch-callout: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
font-size: 26px;
}
.half {
width: 101px;
}
#register-btn {
right:22px;
}
.green
{
background-color:green;
}
<a href="#"><div class="field btn half green" id="register-btn">ثبت نام</div></a>
Now I have seen it in action I am very impressed.
See if this works.
function getTime(){
var d = new Date();
return [d.getHours(), d.getMinutes(), d.getSeconds()];
}
function getColor(){
var time = getTime();
var h = parseInt(time[0] * (0xff/24)).toString(16),
m = parseInt(time[1] * (0xff/60)).toString(16),
s = parseInt(time[2] * (0xff/60)).toString(16);
return (p16(h) + p16(m) + p16(s)).toUpperCase();
}
function p10(n){// apply zero-padding if n < 10
return n < 10 ? ('0' + n) : n;
};
function p16(n){ // p10() for hexadecimal (part of a bugfix)
return (parseInt(n,16) < 16 ? ('0' + n) : n).toString(16);
};
(function loop(){
var t = getTime(),
time = [p10(t[0]),p10(t[1]),p10(t[2])],
color = getColor(),
face = document.getElementById("face");
face.innerHTML = time.join(' : ') + '<hr>' + color;
face.style.fontSize = (window.innerHeight / 6) + 'px';
face.style.top = ((window.innerHeight / 2) - (face.clientHeight / 2))+'px';
face.style.left = ((window.innerWidth / 2) - (face.clientWidth / 2))+'px';
bg.style.backgroundColor = '#' + color;
setTimeout(loop,1000);
})();
html,body{
height:100%;
padding:0;
margin:0;
}
#bg{
width:100%;
height:100%;
text-align:center;
}
#face{
color:#ccccee;
text-shadow:0px 0px 2px #000;
font:14px arial;
vertical-align:middle;
position:absolute;
}
hr{
background:#ccccee;
border:none;
box-shadow:0px 0px 2px #000;
margin:10px;
padding:1px;
}
.darken{
position:absolute;
left:0;
top:0;
padding:0;
margin:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
background: -webkit-radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.6));
background: -moz-radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0.6));
cursor:default;
}
<html>
<div id="bg">
<div id="face"></div>
</div>
<div class="darken"></div>
</html>
-
-
-
How do you mean "broken the sandbox"? Not sure what issue you are referring to. – Martin Smith Sep 7 '14 at 16:19
-
@MartinSmith At the time I made the snippet, the colors in the background were not rendering properly. Instead, it was just grey. I can see that it is working, now. So that effectively voids my earlier statement. – Braden Best Sep 8 '14 at 1:40
-
Looks like the sandbox has been updated, with a snazzy new "copy code snippet" buttons, the much-requested "hide results" button, and improved CSS. – Braden Best Sep 8 '14 at 1:45
A minor modification to Ian's test, but it highlights this is selectable text.
A minor feature request that probably wouldn't matter for most normal Q&As: the "Copy code snippet" should automatically include a reference to the original post.
@keyframes rotate {
from {
transform: translateZ(-300px) translateY(0px) rotateY(0deg) rotateZ(50deg) rotateX(0deg);
}
50% {
transform: translateZ(-300px) translateY(0px) rotateY(180deg) rotateZ(30deg) rotateX(100deg);
}
to {
transform: translateZ(-300px) translateY(0px) rotateY(360deg) rotateZ(50deg) rotateX(0deg);
}
}
.container {
width: 200px;
height: 200px;
position: relative;
margin: 40px auto 0 auto;
border: 1px solid #CCC;
perspective: 1000px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
top: -120px;
transform: translateZ(-100px) translateY(100px);
transform-style: preserve-3d;
transition: transform 1s;
animation: rotate 2s ease-in 1s infinite;
}
#cube figure {
display: block;
position: absolute;
width: 196px;
height: 196px;
border: 2px solid black;
line-height: 196px;
font-size: 120px;
font-weight: bold;
color: #000;
text-align: center;
background: rgba(255,255,255,0.5) !important;
}
#cube .front {
background: hsla(0, 100%, 50%, 0.7);
transform: translateZ(100px);
}
#cube .back {
background: hsla(60, 100%, 50%, 0.7);
transform: rotateX(-180deg) translateZ(100px);
}
#cube .right {
background: hsla(120, 100%, 50%, 0.7);
transform: rotateY(90deg) translateZ(100px);
}
#cube .left {
background: hsla(180, 100%, 50%, 0.7);
transform: rotateY(-90deg) translateZ(100px);
}
#cube .top {
background: hsla(240, 100%, 50%, 0.7);
transform: rotateX(90deg) translateZ(100px);
}
#cube .bottom {
background: hsla(300, 100%, 50%, 0.7);
transform: rotateX(-90deg) translateZ(100px);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<section class="container">
<div id="cube" class="show-right">
<figure class="front">F</figure>
<figure class="back">B</figure>
<figure class="right">R</figure>
<figure class="left">L</figure>
<figure class="top">U</figure>
<figure class="bottom">D</figure>
</div>
</section>
Spinning cube (CSS animation) with image and inline SVG as face.
#container {
width: 120px;
height: 120px;
margin: 60px 60px;
}
#cube {
animation: spinit 8s infinite linear;
transform-style: preserve-3d;
transform-origin: 60px 60px 0;
}
@keyframes spinit {
from { transform: rotateY(0deg) rotateX(54.735deg) rotateY(45deg); }
to { transform: rotateY(360deg) rotateX(54.735deg) rotateY(45deg); }
}
#cube .face {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid black;
background: linear-gradient(30deg,orange,yellow,rgba(255,255,255,0.3));
box-shadow: inset 0 0 20px rgba(0,0,0,0.4);
text-align: center;
line-height: 120px;
color: white;
font-size: 80px;
text-shadow: 2px 4px 6px blue;
}
#cube .front { transform: rotateY( 0deg ) translateZ( 60px ); }
#cube .back { transform: rotateY( 180deg ) translateZ( 60px ); }
#cube .right { transform: rotateY( 90deg ) translateZ( 60px ); }
#cube .left { transform: rotateY( -90deg ) translateZ( 60px ); }
#cube .top { transform: rotateX( 90deg ) translateZ( 60px ); }
#cube .bottom { transform: rotateX( -90deg ) translateZ( 60px ); }
<div id="container">
<div id="cube">
<div class="face front">1</div>
<!-- need to find a image with transparent background for testing -->
<img class="face left" src="http://i.stack.imgur.com/UFoAJ.jpg?s=128&g=1"/>
<svg class="face back"
width="120" height="120" viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style><![CDATA[
.i0, .i1, .i2, .i3, .be, .bo { stroke: black; stroke-width: 1; filter: url(#filter1); }
.i0 { fill: none; }
.o0 { fill: yellow; }
.i1, .o1 { fill: red; }
.i2, .o2 { fill: green; }
.i3, .o3 { fill: blue; }
.be { fill: #ccffcc; }
.bo { fill: #ccccff; }
]]></style>
<filter id="filter1">
<feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="4" />
<feSpecularLighting in="blur" lighting-color="#ffffff" result="specOut" specularConstant="0.75" specularExponent="20" surfaceScale="5">
<feDistantLight azimuth="240" elevation="45" />
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
<feComposite in="SourceGraphic" in2="specOut" k1="0" k2="1" k3="1" k4="0" operator="arithmetic" result="litPaint" />
</filter>
</defs>
<g transform="matrix( 1 0 0 -1 0 120 )">
<circle class="i0" cx="60" cy="60" r="40" />
<circle class="i1" cx="81" cy="60" r="19" />
<circle class="i2" cx="49" cy="79" r="19" />
<circle class="i3" cx="49" cy="41" r="19" />
<circle class="o1" cx="29" cy="60" r="9" />
<circle class="o3" cx="76" cy="87" r="9" />
<circle class="o3" cx="27" cy="73" r="4" />
<circle class="o2" cx="88" cy="82" r="4" />
<circle class="o2" cx="76" cy="33" r="9" />
<circle class="o1" cx="65" cy="95" r="4" />
<circle class="o1" cx="65" cy="25" r="4" />
<circle class="o3" cx="88" cy="38" r="4" />
<circle class="o2" cx="27" cy="47" r="4" />
</g>
</svg>
<div class="face right">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
- works correctly on firefox 28.
- needs to find a image with tranparent background to retest.
Visualizing a 3d polytope Metabiaugmented Hexagonal Prism (J56) using X3DOM.
<link href="http://www.x3dom.org/x3dom/release/x3dom.css" rel="stylesheet"/>
<script src="http://www.x3dom.org/x3dom/release/x3dom.js"></script>
<h2>metabiaugmented hexagonal prism (J56)</h2>
<X3D xmlns="http://www.web3d.org/specifications/x3d-namespace" width="800px" height="600px">
<Scene>
<Viewpoint position='2.241 -8.365 5.000' orientation='0.967 0.127 0.221 1.076'></Viewpoint>
<Background skyColor='0.671 0.804 0.937'></Background>
<Shape>
<Appearance>
<Material diffuseColor='1.0 0.9 0.8' specularColor='1.0 1.0 1.0' shininess='0.7' transparency='0.15'/>
<ImageTexture url='wood004.jpg'/>
</Appearance>
<IndexedFaceSet coordIndex='12 8 3 1 5 10 -1 6 2 4 9 13 11 -1 8 12 13 9 -1 3 8 9 4 -1 5 1 2 6 -1 12 10 11 13 -1 3 0 1 -1 3 4 0 -1 1 0 2 -1 2 0 4 -1 5 7 10 -1 5 6 7 -1 10 7 11 -1 11 7 6 -1'>
<Coordinate point='-2.608 1.022 -1.076, -1.897 0.375 0.648, -1.642 -0.697 -0.989, -1.067 1.929 -0.240, -0.812 0.857 -1.877, -0.777 -0.899 1.657, -0.522 -1.972 0.020, 0.443 -2.450 1.674, 0.883 2.210 -0.120, 1.138 1.138 -1.757, 1.172 -0.619 1.778, 1.428 -1.691 0.140, 2.003 0.935 0.889, 2.258 -0.137 -0.748,'/>
</IndexedFaceSet>
</Shape>
<Shape>
<Appearance>
<Material emissiveColor='0.0 0.0 0.0' specularColor='1.0 1.0 1.0' shininess='0.7'/>
</Appearance>
<IndexedLineSet coordIndex='12 8 3 1 5 10 -1 6 2 4 9 13 11 -1 8 12 13 9 -1 3 8 9 4 -1 5 1 2 6 -1 12 10 11 13 -1 3 0 1 -1 3 4 0 -1 1 0 2 -1 2 0 4 -1 5 7 10 -1 5 6 7 -1 10 7 11 -1 11 7 6 -1'>
<Coordinate point='-2.608 1.022 -1.076, -1.897 0.375 0.648, -1.642 -0.697 -0.989, -1.067 1.929 -0.240, -0.812 0.857 -1.877, -0.777 -0.899 1.657, -0.522 -1.972 0.020, 0.443 -2.450 1.674, 0.883 2.210 -0.120, 1.138 1.138 -1.757, 1.172 -0.619 1.778, 1.428 -1.691 0.140, 2.003 0.935 0.889, 2.258 -0.137 -0.748,'/>
</IndexedLineSet>
</Shape>
</Scene>
</X3D>
- doesn't work, why?
-
-
@Ian To hide the snippet by default, go to the bottom of the snippet editor and select the checkbox "Hide snippet by default...". If you already have some snippet code in your answer, look for the line
<!-- begin snippet: js hide: false -->
and change false to true there. – achille hui Sep 24 '14 at 4:37
//Made for Stack Overflow Code Testing
//Unicorn Inspired by http://drbl.in/kayh
//Made by Mr. Alien
/*
* Just created in a hurry, so won't refactor my CSS
* as of now, also I can drastically reduce
* the markup but I won't do it right now
*/
html, body {
height: 450px;
background: -webkit-radial-gradient(center, ellipse, #fce300 0%, #ffc700 46%, #ff7f00 100%);
background: radial-gradient(ellipse at center, #fce300 0%,#ffc700 46%,#ff7f00 100%);
}
.unicorn {
position: absolute;
left: 50%;
top: 170px;
margin-left: -250px;
}
.tail > div,
.body > div,
.leg > div,
.leg2 > div,
.leg3 > div,
.unihorn {
width: 0;
height: 0;
position: absolute;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.tail .pone{
border-left: 30px solid transparent;
border-right: 40px solid transparent;
border-bottom: 30px solid #ffb82b;
-webkit-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
}
.tail .ptwo {
border-left: 40px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #FD8A07;
-webkit-transform: rotate(-39deg);
-ms-transform: rotate(-39deg);
transform: rotate(-39deg);
top: 26px;
left: -30px;
}
.tail .pthree {
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid #ffb82b;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
top: 45px;
left: -12px;
}
.tail .pfour {
top: 72px;
left: 17px;
border-bottom: 35px solid #FD8A07;
border-right: 35px solid transparent;
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
div.body .pone {
border-top: 10px solid transparent;
border-left: 221px solid #FD8A07;
border-bottom: 60px solid transparent;
-webkit-transform: rotate(40deg);
-ms-transform: rotate(40deg);
transform: rotate(40deg);
top: 65px;
left: 45px;
}
div.body .ptwo {
border-bottom: 70px solid #ffb82b;
border-left: 90px solid transparent;
border-right: 130px solid transparent;
-webkit-transform: rotate(43deg);
-ms-transform: rotate(43deg);
transform: rotate(43deg);
top: 15px;
left: 87px;
}
div.body .pthree {
border-bottom: 100px solid #FD8A07;
border-left: 20px solid transparent;
border-right: 130px solid transparent;
-webkit-transform: rotate(71deg);
-ms-transform: rotate(71deg);
transform: rotate(71deg);
top: 15px;
left: 200px;
}
div.body .pfour {
border-bottom: 100px solid #ffb82b;
border-left: 30px solid transparent;
border-right: 130px solid transparent;
-webkit-transform: rotate(109deg);
-ms-transform: rotate(109deg);
transform: rotate(109deg);
top: 38px;
left: 246px;
}
div.body .pfive {
border-bottom: 60px solid #FD8A07;
border-right: 105px solid transparent;
left: 310px;
top: -27px;
-webkit-transform: rotate(34deg);
-ms-transform: rotate(34deg);
transform: rotate(34deg);
}
div.body .psix {
border-top: 85px solid #ffb82b;
border-left: 85px solid transparent;
left: 319px;
top: -40px;
-webkit-transform: rotate(19deg);
-ms-transform: rotate(19deg);
transform: rotate(19deg);
}
div.body .pseven {
border-bottom: 110px solid #FD8A07;
border-left: 85px solid transparent;
left: 350px;
top: -144px;
-webkit-transform: rotate(19deg);
-ms-transform: rotate(19deg);
transform: rotate(19deg);
}
div.body .peight {
border-bottom: 90px solid #ffb82b;
border-right: 120px solid transparent;
left: 425px;
top: -92px;
-webkit-transform: rotate(18deg);
-ms-transform: rotate(18deg);
transform: rotate(18deg);
}
div.body > div.eye {
background-color: #000;
top: -70px;
left: 445px;
height: 10px;
width: 10px;
border-radius: 50%;
z-index: 1;
}
div.nose {
border-bottom: 40px solid #f27d00;
border-right: 40px solid transparent;
-webkit-transform: rotate(-28deg);
-ms-transform: rotate(-28deg);
transform: rotate(-28deg);
left: 480px;
top: -15px;
}
div.extreme-left {
border-top: 115px solid transparent;
border-right: 30px solid #ffb82b;
border-bottom: 110px solid transparent;
-webkit-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
transform: rotate(-65deg);
left: 130px;
top: 4px;
}
div.leg .pone {
border-top: 120px solid transparent;
border-right: 60px solid #FD8A07;
border-bottom: 0px solid transparent;
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
top: 55px;
left: 45px;
}
div.leg .ptwo {
border-top: 20px solid transparent;
border-right: 30px solid #ffb82b;
border-bottom: 20px solid transparent;
top: 145px;
-webkit-transform: rotate(-24deg);
-ms-transform: rotate(-24deg);
transform: rotate(-24deg);
left: 66px;
}
div.leg .pthree {
border-top: 15px solid transparent;
border-right: 33px solid #FD8A07;
border-bottom: 20px solid transparent;
top: 164px;
-webkit-transform: rotate(34deg);
-ms-transform: rotate(34deg);
transform: rotate(34deg);
left: 63px;
}
div.leg .pfour {
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 100px solid #ffb82b;
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
top: 165px;
left: 80px;
}
div.leg .pfive {
border-bottom: 30px solid #FD8A07;
border-right: 30px solid transparent;
top: 235px;
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
left: 89px;
}
div.body .extreme-right {
left: 246px;
top: 100px;
border-top: 30px solid #FD8A07;
border-left: 80px solid transparent;
border-right: 85px solid transparent;
-webkit-transform: rotate(-33deg);
-ms-transform: rotate(-33deg);
transform: rotate(-33deg);
}
div.leg2 div.pone {
border-top: 50px solid #ffb82b;
border-right: 85px solid transparent;
left: 339px;
top: 84px;
-webkit-transform: rotate(-53deg);
-ms-transform: rotate(-53deg);
transform: rotate(-53deg);
}
div.leg2 div.ptwo {
border-bottom: 20px solid #FD8A07;
border-left: 42px solid transparent;
border-right: 30px solid transparent;
-webkit-transform: rotate(62deg);
-ms-transform: rotate(62deg);
transform: rotate(62deg);
left: 328px;
top: 146px;
}
div.leg2 .pthree {
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 100px solid #ffb82b;
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
top: 154px;
left: 368px;
}
div.leg2 .pfour {
border-bottom: 30px solid #FD8A07;
border-right: 30px solid transparent;
top: 230px;
-webkit-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
left: 378px;
}
div.leg3 div.pone {
border-top: 50px solid transparent;
border-left: 60px solid #ef7b00;
border-bottom: 30px solid transparent;
left: 382px;
top: 60px;
-webkit-transform: rotate(6deg);
-ms-transform: rotate(6deg);
transform: rotate(6deg);
}
div.leg3 div.ptwo {
border-left: 0px solid transparent;
border-right: 30px solid transparent;
border-top: 50px solid #e87604;
left: 419px;
top: 116px;
-webkit-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
transform: rotate(-18deg);
}
div.leg3 div.pthree {
border-bottom: 30px solid #e5892d;
border-left: 13px solid transparent;
left: 411px;
top: 143px;
-webkit-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
transform: rotate(-17deg);
}
div.leg3 .pfour {
border-bottom: 30px solid #FD8A07;
border-right: 30px solid transparent;
top: 173px;
-webkit-transform: rotate(76deg);
-ms-transform: rotate(76deg);
transform: rotate(76deg);
left: 403px;
}
.unihorn {
top: -130px;
left: 446px;
border-top: 10px solid transparent;
border-left: 120px solid #FD8A07;
border-bottom: 10px solid transparent;
-webkit-transform: rotate(-36deg);
-ms-transform: rotate(-36deg);
transform: rotate(-36deg);
}
<div class="unicorn">
<div class="tail">
<div class="pone"></div>
<div class="ptwo"></div>
<div class="pthree"></div>
<div class="pfour"></div>
</div>
<div class="body">
<div class="pone"></div>
<div class="ptwo"></div>
<div class="pthree"></div>
<div class="pfour"></div>
<div class="pfive"></div>
<div class="psix"></div>
<div class="pseven"></div>
<div class="peight"></div>
<div class="eye"></div>
<div class="nose"></div>
<div class="extreme-left"></div>
<div class="extreme-right"></div>
</div>
<div class="leg">
<div class="pone"></div>
<div class="ptwo"></div>
<div class="pthree"></div>
<div class="pfour"></div>
<div class="pfive"></div>
</div>
<div class="leg2">
<div class="pone"></div>
<div class="ptwo"></div>
<div class="pthree"></div>
<div class="pfour"></div>
</div>
<div class="leg3">
<div class="pone"></div>
<div class="ptwo"></div>
<div class="pthree"></div>
<div class="pfour"></div>
</div>
<div class="unihorn"></div>
</div>
$(document).ready(function() {
$.get('http://crossorigin.me/http://php.net/', function(data) {
var $php = $(data), rcs = [], ver = 0, num = 0, i = 0, time;
$php.find('h2.newstitle > a').each(function() {
var txt = $(this).text();
var matches = /([\d.]+) (RC ([\d.]+))?/.exec(txt);
if(matches) {
time = $(this).parent().parent().find('time').text();
if(matches[2]) {
ver = matches[1];
if(matches[3] > num) num = matches[3];
} else {
$('#php').prepend($('<div style="white-space: pre;"></div>').html((i++ === 2 ? '<b>Current' : '<b>Old') + ' Stable Version:</b> ' + matches[1] + ' // Release Date: ' + time));
}
}
});
$('#php').append($('<div></div>').html('<b>Next Stable Version:</b> ' + ver + ' RC ' + num + ' \t\t// Release Date: ' + time));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="php"></div>
function DemoController($scope) {
$scope.items = [
{ access: 'TuChanca' },
{ access: 'SomethingElse' },
];
$scope.isRowDisabled = function(item) {
// Return true to apply 'off' class
return !validateItem(item);
};
$scope.onRowClick = function(item) {
if (validateItem(item)) {
alert('Row has been click');
}
};
function validateItem(item) {
// Return true if item is clickable
return item.access === 'TuChanca';
}
}
.row {
border: 1px solid #cccccc;
background: #fafafa;
color: rgba(0,0,0,0.87);
padding: 10px;
}
.row:not(.off):hover {
cursor: pointer;
background: rgba(0,0,0,0.07);
}
.row.off {
color: rgba(0,0,0,0.5);
cursor: not-allowed;
}
<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller='DemoController'>
<div class="row"
ng-repeat="item in items"
ng-class="{ 'off': isRowDisabled(item) }"
ng-click="onRowClick(item)">
{{ item.access }}
</div>
</body>
</html>
Sandbox the console separately?
console.log("Nice");
div {
background-color: #333;
background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
line-height: 15;
-webkit-animation: snow 15s linear infinite;
-moz-animation: snow 15s linear infinite;
-ms-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
max-height: 500px !important;
color: white;
}
@keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
@-moz-keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 400px 1000px, 200px 400px, 100px 300px;
}
}
@-webkit-keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
@-ms-keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
50% {
background-position: 500px 500px, 100px 200px, -100px 150px;
}
100% {
background-position: 500px 1000px, 200px 400px, -100px 300px;
}
}
Pacman snippet
var ghostInterval, gameInterval;
var pacman = (function () {
var names = ['inky', 'pinky', 'clyde', 'blinky'];
var directions = Object.freeze({
PAUZED: {
type: 'stopped',
sprite: 'pauzed',
x: 0,
y: 0
},
LEFT: {
type: 'horizontal',
sprite: 'left',
x: -1,
y: 0
},
UP: {
type: 'vertical',
sprite: 'top',
x: 0,
y: -1
},
RIGHT: {
type: 'horizontal',
sprite: 'right',
x: 1,
y: 0
},
DOWN: {
type: 'vertical',
sprite: 'down',
x: 0,
y: 1
}
});
var mapObjects = {
' ': 'blank',
'a': 'corner-left-top',
'b': 'corner-right-top',
'c': 'corner-right-bottom',
'd': 'corner-left-bottom',
'=': 'border-horizontal',
'|': 'border-vertical',
't': 'double-down',
'>': 'left-out',
'<': 'right-out',
'+': 'double-right',
'*': 'double-left',
'1': 'left-top',
'2': 'right-top',
'3': 'right-bottom',
'4': 'left-bottom',
'8': 'single-down',
'A': 'single-up',
'9': 'single-vertical',
'-': 'single-horizontal',
'_': 'ghost-gate',
'6': 'single-right',
'7': 'single-left',
'B': 'left-down',
'C': 'down-right',
'.': 'split-up',
'T': 'split-down',
'5': 'horizontal',
'X': 'port',
'o': 'point',
'%': 'superball'
};
var level1 = [
'a========t========b',
'|%ooooooo9ooooooo%|',
'|o12o152o9o152o12o|',
'|o43o453oAo453o43o|',
'|ooooooooooooooooo|',
'|o67o8 6-T-7o8o67o|',
'|%ooo9ooo9ooo9ooo%|',
'd==bo>-7oAo6-<oa==c',
' |o9ooooooo9o| ',
'===coAoa=_=boAod===',
'X o o| |o X',
'===bo8od===co8oa===',
' |o9ooooooo9o| ',
'a==coAo6-T-7 Aod==b',
'|%ooooooo9ooooooo%|',
'|o6Bo6-7oAo6-7oC7o|',
'|oo9oooooPooooo9oo|',
'+7 Ao8o6-T-7o8oAo6*',
'|oooo9ooo9ooo9oooo|',
'|o6--.-7 A 6-.--7o|',
'|%ooooooooooooooo%|',
'd=================c'];
var level2 = [
'6---T----T----T---7',
'X 9% 9 %9 X',
'8 8 9 12 9 12 9 8 8',
'9 9 A 43 A 43 A 9 9',
'9 A A 9',
'9 1---7 6---2 9',
'9 8 9 9 8 9',
'9 9 9 6-------< 9 9',
'9 9 9 9 9 9',
'9 9 4-------7 A 9 9',
'9 9 9 9',
'9 4-----7 6-----3 9',
'9 9',
'4-------2 1-------3',
' 9 9 ',
'1-------3 4-------2',
'9 P 9',
'9 8 8 12 8 12 8 8 9',
'A A 9 43 9 43 9 A A',
'X 9% 9 %9 X',
'6---.----.----.---7'];
var pacman = {
location: function (x, y) {
if (!(this instanceof pacman.location)) {
return new pacman.location(x, y);
}
this.x = x;
this.y = y;
pacman.location.prototype.increase = function (point) {
if (point.x === undefined || point.y === undefined) {
return;
}
this.x += point.x;
this.y += point.y;
};
pacman.location.prototype.next = function (point) {
return new pacman.location(this.x + point.x, this.y + point.y);
};
pacman.location.prototype.center = function () {
return {
x: this.x + 7.5,
y: this.y + 7.5
};
};
return this;
},
cube: function (row, col, field, element) {
if (!(this instanceof pacman.cube)) {
return new pacman.cube(row, col, field);
}
this.row = row;
this.col = col;
this.left = col * 15;
this.top = row * 15;
this.right = this.left + 15;
this.bottom = this.top + 15;
this.field = field;
this.element = element;
this.tester = function (x, y) {
var p = {
x: x,
y: y
};
return p.x >= this.left && p.x < this.right && p.y >= this.top && p.y < this.bottom;
};
pacman.cube.prototype.intersectsWith = function (left, right, top, bottom) {
return this.tester(left, top) || this.tester(left, bottom) || this.tester(right, top) || this.tester(right, bottom);
};
return this;
},
point: function (row, col, field, elem) {
if (!(this instanceof pacman.point)) {
return new pacman.point(row, col, field);
}
this.row = row;
this.col = col;
this.left = (col * 15) + 3;
this.top = (row * 15) + 3;
this.right = this.left + 8;
this.bottom = this.top + 8;
this.element = elem;
this.points = field === 'o' ? 50 : 100;
this.interval = undefined;
this.step = 0;
this.field = field;
this.isSuperball = field === '%';
if (field === '%') {
var local = this;
this.interval = setInterval(function () {
local.animate();
}, 250);
}
this.animate = function () {
if (!this.element) {
clearInterval(this.interval);
return;
}
this.element.className = 'superball-' + (this.step % 2);
this.step++;
if (this.step > 100) {
this.step = 0;
}
}
this.tester = function (x, y) {
var p = {
x: x,
y: y
};
return p.x >= this.left && p.x < this.right && p.y >= this.top && p.y < this.bottom;
};
pacman.point.prototype.isInside = function (location) {
var ctr = location.center();
return this.tester(ctr.x, ctr.y);
};
pacman.point.prototype.remove = function () {
if (this.interval !== undefined || this.element === undefined) {
clearInterval(this.interval);
}
if (this.element !== undefined) {
var fieldElement = document.getElementById('field');
if (fieldElement) {
fieldElement.removeChild(this.element);
this.element = undefined;
}
return this.points;
}
return 0;
};
return this;
},
ghost: function (x, y, element, name) {
// make sure this always returns an object
if (!(this instanceof pacman.ghost)) {
return new pacman.ghost(x, y, element, name);
}
this.scared = 0;
this.name = name;
this.position = new pacman.location(x, y);
this.direction = {
current: directions.RIGHT,
next: null
};
this.setDirection = function (new_direction) {
// gets moved in the next iteration of the game field (user can correct if he is fast enough)
this.direction.next = new_direction;
};
this.doMove = function (levelset, points) {
this.setPosition(this.position.next(this.direction.current), levelset);
};
this.canMove = function (pos, levelset) {
if (levelset === undefined)
{
return false;
}
var left = pos.x,
right = pos.x + 14,
top = pos.y,
bottom = pos.y + 14;
for (var x = 0; x < levelset.length; x++) {
var i = levelset[x];
debugger;
if (i.field == '_') {
continue;
}
if (i.intersectsWith(left, right, top, bottom)) {
return false;
}
}
return true;
}
this.getNextDirection = function (direction) {
var s = ['left', 'right', 'up', 'down'];
var next = Math.floor(Math.random() * s.length);
while (direction.type == directions[s[next].toUpperCase()].type) {
next = Math.floor(Math.random() * s.length);
}
return directions[s[next].toUpperCase()];
};
this.setPosition = function (pos, levelset) {
if (!this.canMove(this.position.next(this.direction.current), levelset)) {
this.direction.current = this.getNextDirection(this.direction.current);
this.direction.next = this.getNextDirection(this.direction.current);
return;
}
// no testing needed if it's not at a possible new block
if (pos.x % 15 == 0 || pos.y % 15 == 0) {
if (this.direction.next !== null && this.direction.next !== undefined) {
if (this.canMove(pos.next(this.direction.next), levelset)) {
this.direction.current = this.direction.next;
this.direction.next = this.getNextDirection(this.direction.current);
}
}
}
if (pos.x < 0) {
pos.x += 270;
}
if (pos.x > 270) {
pos.x -= 270;
}
this.position = pos;
this.playerElement.style.left = this.position.x + 'px';
this.playerElement.style.top = this.position.y + 'px';
};
this.redraw = function (levelset, points) {
var p = this;
p.doMove(levelset, points);
if (this.scared > 0) {
this.scared--;
p.playerElement.className = 'sprite gc ghost scared-' + (this.scared % 2);
}
else
{
p.playerElement.className = 'sprite gc ghost ' + p.name + '-' + p.direction.current.sprite;
}
if (pacman.currentPlayer.isInside(p.position))
{
if (this.scared > 0)
{
this.scared = 0;
this.position.x = 120; this.position.y = 150;
pacman.currentPlayer.addPoints(150);
}
else
{
var newGame = false;
pacman.currentPlayer.score.livesLeft--;
if (pacman.currentPlayer.score.livesLeft == 0)
{
newGame = true;
$('#txtLives').text(pacman.currentPlayer.score.livesLeft);
clearInterval(gameInterval);
clearInterval(ghostInterval);
alert('You have lost the game! After you click ok, the game will restart!');
pacman.currentPlayer = new pacman.player();
}
pacman.reset(levelset, points, newGame);
}
}
};
this.playerElement = element;
},
player: function () {
// make sure this always returns an object
if (!(this instanceof pacman.player)) {
return new pacman.player(arguments);
}
this.position = new pacman.location(185, 110);
this.direction = {
current: directions.PAUZED,
next: null
};
this.score = {
points: 0,
livesLeft: 3,
name: 'Player'
};
this.tester = function (x, y) {
var p = {
x: x,
y: y
};
return p.x >= this.position.x && p.x < this.position.x + 15 && p.y >= this.position.y && p.y < this.position.y + 15;
};
this.lastLife = 0;
this.interval = 5000;
pacman.player.prototype.isInside = function (location) {
var ctr = location.center();
return this.tester(ctr.x, ctr.y);
};
this.setDirection = function (new_direction) {
// gets moved in the next iteration of the game field (user can correct if he is fast enough)
this.direction.next = new_direction;
};
this.doMove = function (levelset, points) {
this.setPosition(this.position.next(this.direction.current), levelset);
// after this move, the position should be new, and we could check if there are points to be found around us :)
this.checkPoints(points);
};
this.addPoints = function(p) {
this.score.points += p;
if (this.score.points > this.lastLife + this.interval)
{
this.lastLife = this.score.points;
this.score.livesLeft++;
$('#txtLives').text(this.score.livesLeft);
}
$('#txtScore').text(this.score.points);
};
this.checkPoints = function (points) {
if (points === undefined)
{
return;
}
var removeAt = -1;
for (var x = 0; x < points.length; x++) {
var i = points[x];
if (i.isInside(this.position)) {
if (i.field === '%')
{
$(names).each(function() {
pacman[this].scared += 250;
});
}
this.addPoints(i.remove());
removeAt = x;
break;
}
}
if (removeAt >= 0) {
points.remove(removeAt);
if (points.length == 0) {
clearInterval(gameInterval);
clearInterval(ghostInterval);
//alert('Congratulations, you finished the level!\r\n\r\nPress F5 to restart');
pacman.reset();
}
}
};
this.lastIndex = {
row: -1,
col: -1
};
this.getIndex = function (position) {
return {
row: Math.floor(position.y / 15.0),
col: Math.floor(position.x / 15.0)
};
}
this.canMove = function (pos, levelset) {
if (levelset === undefined)
{
return false;
}
var left = pos.x,
right = pos.x + 14,
top = pos.y,
bottom = pos.y + 14;
for (var x = 0; x < levelset.length; x++) {
var i = levelset[x];
if (i.intersectsWith(left, right, top, bottom)) {
return false;
}
}
return true;
}
this.setPosition = function (pos, levelset) {
if (this.direction.current != directions.PAUZED) {
if (!this.canMove(this.position.next(this.direction.current), levelset)) {
this.direction.current = directions.PAUZED;
return;
}
}
// no testing needed if it's not at a possible new block
if (pos.x % 15 == 0 || pos.y % 15 == 0) {
if (this.direction.next !== null && this.direction.next !== undefined) {
if (this.direction.next == directions.PAUZED) {
this.direction.current = directions.PAUZED;
this.direction.next = null;
} else {
if (this.canMove(pos.next(this.direction.next), levelset)) {
this.direction.current = this.direction.next;
this.direction.next = null;
}
}
}
}
if (levelset === undefined)
{
return;
}
if (pos.x < 0) {
pos.x += 270;
}
if (pos.x > 270) {
pos.x -= 270;
}
this.position = pos;
this.playerElement.style.left = this.position.x + 'px';
this.playerElement.style.top = this.position.y + 'px';
};
var animation = 0,
adir = 0.1,
lastani = -1;
this.redraw = function (levelset, points) {
var p = this;
p.doMove(levelset, points);
var i = parseInt(animation) % 3;
if (i != lastani) {
lastani = i;
p.playerElement.className = 'sprite gc pacman-' + p.direction.current.sprite.toLowerCase() + '-' + i;
}
animation += adir;
if (animation == 2 || animation == 0) {
adir *= -1;
}
};
this.playerElement = document.getElementById('player');
},
level: function (description, points) {
var fieldElement = document.getElementById('field');
var height = description.length;
var arr = [],
pf = [];
for (var y = 0; y < height; y++) {
var row = description[y];
var width = row.length;
for (var x = 0; x < width; x++) {
var field = row.charAt(x);
if (field === 'P') {
pacman['currentPlayer'].setPosition(pacman.location(x * 15, y * 15), arr);
continue;
}
if (field === 'o' || field === '%') {
// point to eat or superball
if (points !== undefined && points.length > 0) {
continue;
}
var point = document.createElement('div');
point.className = mapObjects[field];
point.style.left = ((x * 15) + 3) + 'px';
point.style.top = ((y * 15) + 3) + 'px';
point.style.width = '8px';
point.style.height = '8px';
fieldElement.appendChild(point);
pf.push(new pacman.point(y, x, field, point));
continue;
}
var classname = mapObjects[field];
if (classname === "undefined" || classname === "null" || classname === "blank") {
continue;
}
var block = document.createElement('div');
block.className = 'sprite gc ' + classname;
block.style.left = (x * 15) + 'px';
block.style.top = (y * 15) + 'px';
block.style.width = '15px';
block.style.height = '15px';
fieldElement.appendChild(block);
if (field == 'X') {
// pacman can run through ports
continue;
}
arr.push(new pacman.cube(y, x, field, block));
}
}
return {
blocks: arr,
points: points !== undefined && points.length > 0 ? points : pf
};
},
onKeydown: function (e) {
var p = pacman['currentPlayer'];
var handled = true;
if (e.key !== undefined && e.key !== null) {
switch (e.key) {
case 'Up':
p.setDirection(directions.UP);
break;
case 'Down':
p.setDirection(directions.DOWN);
break;
case 'Left':
p.setDirection(directions.LEFT);
break;
case 'Right':
p.setDirection(directions.RIGHT);
break;
default:
handled = false;
break;
}
if (handled) {
return;
}
}
handled = true;
switch (e.keyCode) {
case 80:
p.direction.current = directions.PAUZED;
break;
case 82:
p.direction.current = directions.PAUZED;
break;
case 38:
p.setDirection(directions.UP);
break;
case 40:
p.setDirection(directions.DOWN);
break;
case 37:
p.setDirection(directions.LEFT);
break;
case 39:
p.setDirection(directions.RIGHT);
break;
default:
handled = false;
break;
}
},
start: function (points) {
var animation = 0,
direction = 1;
if (pacman['currentPlayer'] === undefined) {
pacman['currentPlayer'] = new pacman.player();
}
$('#txtScore').text(pacman.currentPlayer.score.points);
$('#txtLives').text(pacman.currentPlayer.score.livesLeft);
var levelset = pacman.level(level1, points);
gameInterval = setInterval(function () {
try {
if (levelset === undefined)
{
clearInterval(gameInterval);
return;
}
pacman.currentPlayer.redraw(levelset.blocks, levelset.points);
} catch (ex) { console.log(ex); }
}, 5);
for (var x = 0; x < 4; x++) {
var g = document.createElement('div');
g.className = 'sprite gc ghost ' + names[x] + '-right';
g.style.position = 'absolute';
g.style.left = '120px';
g.style.top = '150px';
g.style.width = '15px';
g.style.height = '15px';
var fe = document.getElementById('field');
fe.appendChild(g);
pacman[names[x]] = new pacman.ghost(120, 150, g, names[x]);
}
ghostInterval = setInterval(function () {
$(names).each(function () {
var p = pacman[this];
if (p === undefined)
{
clearInterval(ghostInterval);
return;
}
p.redraw(levelset.blocks, levelset.points);
});
}, 5);
},
reset: function(blocks, points, isNewGame) {
clearInterval(ghostInterval);
clearInterval(gameInterval);
var fd = document.getElementById('field');
$(blocks).each(function() {
fd.removeChild(this.element);
});
blocks.splice(0, blocks.length);
if (isNewGame)
{
$(points).each(function() {
fd.removeChild(this.element);
});
points.splice(0, points.length);
}
$('.ghost').each(function() {
fd.removeChild(this);
});
$(names).each(function() {
pacman[this] = undefined;
});
pacman.start(points);
}
};
return pacman;
})();
Array.prototype.remove = function (index) {
this.splice(index, 1);
}
$(function () {
$(document).keydown(pacman.onKeydown);
pacman.start();
});
html {
font-family:'Verdana';
font-size: 1em;
}
body {
background: #000000;
overflow: hidden;
margin: 0;
padding: 0;
}
h1 {
line-height: 1em;
font-size: 3em;
padding: 0;
margin: 0;
text-align: center;
color: yellow;
text-decoration: none;
}
small {
color: #777777;
font-style: italic;
text-align: center;
display: block;
margin: 0;
padding: 0;
}
#game {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#console {
color: #ffffff;
}
.sprite {
background-image: url('http://i50.tinypic.com/16c2nux.png');
width: 16px;
height: 16px;
}
.gc {
position: absolute;
display: inline-block;
/*background-color: #000000;*/
margin: 0;
padding: 0;
/*border: solid #cfcfcf 1px;*/
}
.console {
color: #ffffff;
}
.blank {
background: #000000;
}
.port {
background: #000000;
z-index: 4;
}
.border-vertical {
background-position: -1px -18px;
}
.corner-left-top {
background-position: -1px -1px;
}
.border-horizontal {
background-position: -19px -1px;
}
.corner-right-top {
background-position: -221px -1px;
}
.corner-right-bottom {
background-position: -41px -153px;
}
.corner-left-bottom {
background-position: -1px -245px;
}
.double-down {
background-position: -111px -1px;
}
.left-out {
background-position: -63px -80px;
}
.right-out {
background-position: -159px -80px;
}
.double-right {
background-position: -1px -200px;
}
.double-left {
background-position: -221px -200px;
}
.left-top {
background-position: -21px -23px;
}
.right-top {
background-position: -44px -23px;
}
.right-bottom {
background-position: -44px -38px;
}
.left-bottom {
background-position: -21px -38px;
}
.horizontal {
background-position: -30px -38px;
}
.single-down {
background-position: -63px -56px;
}
.single-up {
background-position: -63px -105px;
}
.single-vertical {
background-position: -63px -62px;
}
.single-horizontal {
background-position: -78px -80px;
}
.ghost-gate {
background-position: -111px -101px;
}
.single-right {
background-position: -134px -80px;
}
.single-left {
background-position: -92px -80px;
}
.left-down {
background-position: -39px -176px;
}
.down-right {
background-position: -183px -176px;
}
.split-up {
background-position: -63px -224px;
}
.split-down {
background-position: -111px -56px;
}
.ghost {
z-index: 3;
}
.inky-left {
background-position: -239px -9px;
}
.inky-right {
background-position: -290px -9px;
}
.inky-top {
background-position: -256px -9px;
}
.inky-down {
background-position: -273px -9px;
}
.clyde-left {
background-position: -239px -25px;
}
.clyde-right {
background-position: -290px -25px;
}
.clyde-top {
background-position: -256px -25px;
}
.clyde-down {
background-position: -273px -25px;
}
.pinky-left {
background-position: -239px -41px;
}
.pinky-right {
background-position: -290px -41px;
}
.pinky-top {
background-position: -256px -41px;
}
.pinky-down {
background-position: -273px -41px;
}
.scared-0 {
background-position: -256px -74px;
}
.scared-1 {
background-position: -273px -74px;
}
.blinky-left {
background-position: -239px -58px;
}
.blinky-right {
background-position: -290px -58px;
}
.blinky-top {
background-position: -256px -58px;
}
.blinky-down {
background-position: -273px -58px;
}
#field {
position: absolute;
left: 50%;
margin-left: -142.5px;
top: 50%;
margin-top: -172.5px;
width: 285px;
height: 345px;
}
#player {
z-index: 3;
}
.pacman, .pacman-left-0, .pacman-top-0, .pacman-down-0, .pacman-right-0, .pacman-pauzed-0, .pacman-pauzed-1, .pacman-pauzed-2 {
background-position: -269px -163px;
}
.pacman-left-1 {
background-position: -253px -163px;
}
.pacman-left-2 {
background-position: -237px -163px;
}
.pacman-top-1 {
background-position: -269px -147px;
}
.pacman-top-2 {
background-position: -268px -131px;
}
.pacman-right-1 {
background-position: -285px -163px;
}
.pacman-right-2 {
background-position: -301px -163px;
}
.pacman-down-1 {
background-position: -269px -179px;
}
.pacman-down-2 {
background-position: -269px -195px;
}
.point, .superball-0, .superball-1 {
width: 8px;
height: 8px;
background-image: url('http://i50.tinypic.com/16c2nux.png');
position: absolute;
}
.point, .superball, .superball-0 {
background-position: -291px -78px;
}
.superball-1 {
background-position: -300px -79px;
}
.scoreboard {
border-spacing: 1px 1px;
background-color: #000000;
font-family:'Helvetica';
font-variant: small-caps;
text-transform: lowercase;
width: 100%;
position: absolute;
top: -35px;
left: 0px;
right: 0px;
font-size: 12px;
letter-spacing: 1px;
}
.scoreboard td {
padding-top: 1px;
padding-bottom: 1px;
padding-left: 5px;
padding-right: 5px;
background-color: #999999;
color: #000000;
text-align: center;
width: 50%;
}
.scoreboard td.title {
font-weight: 800;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="game">
<h1>PACMAN</h1>
<small>Sprites © Super Goomba-Rio</small>
<div id="field">
<table class="scoreboard" id="scoreboard">
<tr><td class="title">SCORE:</td><td class="title">Lifes</td></tr>
<tr><td id="txtScore" align="right">0</td><td id="txtLives" align="center">3</td></tr>
</table>
<div id="player" class="sprite gc pacman"></div>
</div>
</div>
Kinda late, but I thought why not
Meta-iframes - iframes within iframes
You can go (at least) 4 7 10 13 levels deep.
Each iframe's complete document is included in the srcdoc
attribute. Double-quotes must be HTML-escaped as entities: "
-> "
. The next levels of nesting require the angle-brackets to be HTML-escaped as entities as well: <
-> <
, >
-> >
. Each successive level of inceptionnesting requires the ampersands from each HTML-escape to be themselves HTML-escaped:
"
->&quot;
->&amp;quot
-> ...<
->&lt;
->&amp;lt
-> ...>
->&gt;
->&amp;gt
-> ...
<h1 style="text-align: center">Snippet Iframe</h1>
<iframe width="100%" height="100%" style="text-align: center" srcdoc="
<h1 style="text-align: center">Inner Iframe 1</h1>
<iframe width="100%" height="100%" srcdoc="
<h1 style=&quot;text-align: center&quot;>Inner Iframe 2</h1>
<iframe width=&quot;100%&quot; height=&quot;100%&quot; srcdoc=&quot;
&lt;h1 style=&amp;quot;text-align: center&amp;quot;&gt;Inner Iframe 3&lt;/h1&gt;
&lt;iframe width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot; srcdoc=&amp;quot;
&amp;lt;h1 style=&amp;amp;quot;text-align: center;&amp;amp;quot;&amp;gt;Inner Iframe 4&amp;lt;/h1&amp;gt;
&amp;lt;iframe width=&amp;amp;quot;100%&amp;amp;quot; height=&amp;amp;quot;100%&amp;amp;quot; srcdoc=&amp;amp;quot;
&amp;amp;lt;h1 style=&amp;amp;amp;quot;text-align: center;&amp;amp;amp;quot;&amp;amp;gt;Inner Iframe 5&amp;amp;lt;/h1&amp;amp;gt;
&amp;amp;lt;iframe width=&amp;amp;amp;quot;100%&amp;amp;amp;quot; height=&amp;amp;amp;quot;100%&amp;amp;amp;quot; srcdoc=&amp;amp;amp;quot;
&amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;quot;&amp;amp;amp;gt;Inner Iframe 6&amp;amp;amp;lt;/h1&amp;amp;amp;gt;
&amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;quot;
&amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;Inner Iframe 7&amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;amp;quot;
&amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;Inner Iframe 8&amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;amp;amp;quot;
&amp;amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;Inner Iframe 9&amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;amp;amp;amp;quot;
&amp;amp;amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt;Inner Iframe 10&amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;amp;amp;amp;amp;quot;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Inner Iframe 11&amp;amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Inner Iframe 12&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;iframe width=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; height=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;100%&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot; srcdoc=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;h1 style=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;text-align: center;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Inner Iframe 13&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;lt;/iframe&amp;amp;amp;amp;gt;
&amp;amp;amp;amp;quot;&amp;amp;amp;gt;
&amp;amp;amp;lt;/iframe&amp;amp;amp;gt;
&amp;amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;/iframe&amp;amp;gt;
&amp;amp;quot;&amp;gt;
&amp;lt;/iframe&amp;gt;
&amp;quot;&gt;
&lt;/iframe&gt;
&quot;>
</iframe>
">
</iframe>
">
</iframe>
JavaScript art! (Warning: You want a better GPU if it looks laggy).
!function(){function o(w,v,i){return w.getAttribute(v)||i}function j(i){return document.getElementsByTagName(i)}function l(){var i=j("script"),w=i.length,v=i[w-1];return{l:w,z:o(v,"zIndex",-1),o:o(v,"opacity",1.0),c:o(v,"color","255,255,0"),n:o(v,"count",40)}}function k(){r=u.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,n=u.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function b(){e.clearRect(0,0,r,n);var w=[f].concat(t);var x,v,A,B,z,y;t.forEach(function(i){i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>r||i.x<0?-1:1,i.ya*=i.y>n||i.y<0?-1:1,e.fillStyle="rgba("+s.c+","+s.o+")",e.fillRect(i.x-0.5,i.y-0.5,1,1);for(v=0;v<w.length;v++){x=w[v];if(i!==x&&null!==x.x&&null!==x.y){B=i.x-x.x,z=i.y-x.y,y=B*B+z*z;y<x.max&&(x===f&&y>=x.max/2&&(i.x-=0.03*B,i.y-=0.03*z),A=(x.max-y)/x.max,e.beginPath(),e.lineWidth=A/2,e.strokeStyle="rgba("+s.c+","+(A+0.2)+")",e.moveTo(i.x,i.y),e.lineTo(x.x,x.y),e.stroke())}}w.splice(w.indexOf(i),1)}),m(b)}var u=document.createElement("canvas"),s=l(),c="c_n"+s.l,e=u.getContext("2d"),r,n,m=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(i){window.setTimeout(i,1000/45)},a=Math.random,f={x:null,y:null,max:20000};u.id=c;u.style.cssText="background-color:#000;position:fixed;top:0;left:0;z-index:"+s.z+";opacity:"+s.o;j("body")[0].appendChild(u);k(),window.onresize=k;window.onmousemove=function(i){i=i||window.event,f.x=i.clientX,f.y=i.clientY},window.onmouseout=function(){f.x=null,f.y=null};for(var t=[],p=0;s.n>p;p++){var h=a()*r,g=a()*n,q=2*a()-1,d=2*a()-1;t.push({x:h,y:g,xa:q,ya:d,max:6000})}setTimeout(function(){b()},100)}();
Get live active StackExchange posts using StackExchange websockets.
Note: you need to wait a bit for an active question.
var ws = new WebSocket("wss://qa.sockets.stackexchange.com/")
ws.onmessage = (function(data){
let data1 = JSON.parse(data.data)
let data12 = JSON.parse(data1.data)
document.getElementById("title").innerHTML = "<a href=\'" + data12.url + "\'>" + data12.titleEncodedFancy + "</a>"
document.getElementById("askedBy").innerHTML = "Asked by: <a href=\'" + data12.ownerUrl + "\'>" + data12.ownerDisplayName + "</a>"
document.getElementById("askedBy").innerHTML = "Site: <a href=\'https://" + data12.siteBaseHostAddress + "\'>" + data12.apiSiteParameter + " (" + data12.siteBaseHostAddress + ")</a>"
document.getElementById("content").innerHTML = data12.bodySummary
document.getElementById("tags").innerHTML = "Tags: " + data12.tags
})
ws.onopen = (function(){
ws.send("155-questions-active")
})
h1, h2, span, p {font-family: sans-serif}
<h1>StackExchange Active Questions</h1>
<div id="feed"><h2 id="title"></h2>
<span id="askedBy"></span><br>
<span id="site"></span><br>
<span id="tags"></span>
<p id="content"></p></div>
This is a leaderboard example for this question. If you want to suggest a leaderboard as a comment, here's a comment template:
May I suggest a leaderboard for this post? [Here's](https://meta.stackoverflow.com/questions/269754/stack-snippets-sandbox-try-it-out-here/384473#384473) an example, and [here's](https://xmikee1.github.io/ppcg-leaderboard/implement) how to implement the leaderboard.
Leaderboard
You can view the leaderboard for this post by expanding the widget/snippet below. In order for your post to be included in the rankings, you need a header (# header text
) with the following info:
The name of the language (end it with a comma
,
or dash-
), followed by...The byte count, as the last number to appear in your header.
For example, JavaScript (ES6), 72 bytes
is valid, but Fortran, 143 bytes (8-bit)
is invalid because the byte count is not the last number in the header (your answer will be recognized as 8 bytes - don't take advantage of this).
<iframe src="https://xmikee1.github.io/ppcg-leaderboard/?id=183544" width="100%" height="100%" style="border: none;">Oops, your browser is too old to view this content! Please upgrade to a newer version of your browser that supports HTML5.</iframe><style>html,body{margin:0;padding:0;height:100%;overflow:hidden}</style>
I'm debugging a Stack Snippet.
<iframe src="https://ppcg-leaderboard.xmikee.repl.co" width="100%" height="100%" style="border: none;">Oops, your browser is too old to view this content! Please upgrade to a newer version of your browser that supports HTML5.</iframe><style>html,body{margin:0;padding:0;height:100%;overflow:hidden}</style>
Test of animated demonstration of SQL joins using HTML canvas.
// Mulling the practicality of improving this and rewriting my
// answer here when this functionality becomes available...
// http://stackoverflow.com/questions/13997365/sql-joins-as-venn-diagram/14011879#14011879
//Relies on code from http://dbp-consulting.com/scripts/canvasutilities.js for the arrows
function DoInnerJoin() {
var predicate = function (a, b) { return a == b; };
foo(4, "SELECT A.Colour, B.Colour FROM A INNER JOIN B ON A.Colour = B.Colour", predicate, "inner")
}
function DoCrossJoin() {
var predicate = function (a, b) { return true; };
foo(16, "SELECT A.Colour, B.Colour FROM A CROSS JOIN B", predicate, "cross")
}
function DoLeftJoin() {
var predicate = function (a, b) { return a == b; };
foo(5, "SELECT A.Colour, B.Colour FROM A LEFT JOIN B ON A.Colour = B.Colour", predicate, "loj")
}
function foo(resultBlocks, caption, predicate, joinType) {
if (joinType != "inner" && joinType != "cross" && joinType != "loj" && joinType != "roj") {
alert("unexpected join type")
}
var isOuterJoin = (joinType == "loj" || joinType == "roj");
var canvas, context;
canvas = document.getElementById('imageView');
context = canvas.getContext('2d');
var lineWidth = 4;
var blockWidth = 50;
var blockHeight = 25;
var table1blockLeft = 50;
var table2blockLeft = 150;
var blockHeight = 25;
var canvasHeight = resultBlocks * blockHeight + 100;
canvas.height = canvasHeight;
var table1blockRight = table1blockLeft + blockWidth;
context.lineWidth = lineWidth;
context.strokeStyle = '#000000';
context.fillStyle = '#000000';
context.clearRect(0, 0, canvas.width, canvasHeight);
context.font = "bold 10pt Arial";
context.fillText(caption, 10, 10);
var leftTableValues = ['#ff0000', '#75923C', '#75923C', '#8DB4E3'];
var rightTableValues = ['#60497B', '#75923C', '#75923C', '#8DB4E3'];
context.font = "bold 16pt Arial";
context.fillText("A", 70, canvasHeight - 130);
for (var i = leftTableValues.length; i > 0; i--) {
drawBlock(table1blockLeft, leftTableValues[i - 1], i);
}
context.fillText("B", 170, canvasHeight - 130);
for (var i = rightTableValues.length; i > 0; i--) {
drawBlock(table2blockLeft, rightTableValues[i - 1], i);
}
var funcs = [];
var resultBlocksDrawn = 0;
for (var i = leftTableValues.length; i > 0; i--) {
var thisLeftItemMatched = false;
for (var j = rightTableValues.length; j > 0; j--) {
var matched = predicate(leftTableValues[i - 1], rightTableValues[j - 1]);
funcs[funcs.length] = function (i, j) {
return function () {
drawArrowBetweenBlocks(i, j);
};
} (i, j);
funcs[funcs.length] = function (matched) {
return function () {
context.font = "bold 16pt 'Arial Unicode MS'";
context.fillStyle = matched ? '#75923C' : '#ff0000';
context.fillText(matched ? "✔" : "✘", 120, canvasHeight - 130);
};
} (matched);
if (matched) {
thisLeftItemMatched = true;
resultBlocksDrawn++;
funcs[funcs.length] = function (i, j, resultBlocksDrawn) {
return function () {
drawBlock(300, leftTableValues[i - 1], resultBlocksDrawn);
drawBlock(350, rightTableValues[j - 1], resultBlocksDrawn);
};
} (i, j, resultBlocksDrawn);
}
if (isOuterJoin && !thisLeftItemMatched && j == 1) {
resultBlocksDrawn++;
funcs[funcs.length] = function () {
return function () {
context.font = "bold 10pt Arial";
context.fillStyle = '#000000'
context.fillText("No joining rows", 10, 50);
};
} ();
funcs[funcs.length] = function (i, j, resultBlocksDrawn) {
return function () {
drawBlock(300, leftTableValues[i - 1], resultBlocksDrawn);
drawBlock(350, '#ffffff', resultBlocksDrawn);
};
} (i, j, resultBlocksDrawn);
funcs[funcs.length] = function () {
return function () {
context.clearRect(10, 30, canvas.width, 25);
};
} ();
}
funcs[funcs.length] = function () {
return function () {
context.clearRect(100 + 2, 25, 50 - 4, canvasHeight - 25);
};
} ();
}
}
console.log(funcs.length)
ProcessQueueItem();
function ProcessQueueItem() {
var f = funcs.shift();
console.log(f)
f();
if (funcs.length > 0) {
window.setTimeout(ProcessQueueItem, 250)
}
}
function drawArrowBetweenBlocks(leftIndex, rightIndex) {
var leftMid = canvasHeight + blockHeight / 2 - (leftIndex * blockHeight) - lineWidth;
var rightMid = canvasHeight + blockHeight / 2 - (rightIndex * blockHeight) - lineWidth;
drawArrow2(context, table1blockRight, leftMid, table2blockLeft, rightMid);
}
function drawArrow2(ctx, x1, y1, x2, y2, style, which, angle, d) {
context.lineWidth = 2;
context.fillStyle = '#000000';
drawArrow(ctx, x1, y1, x2, y2, style, which, angle, d)
context.lineWidth = lineWidth;
}
function drawBlock(blockLeft, fillStyle, blocksRemaining) {
blockTop = canvasHeight - (blocksRemaining * blockHeight) - lineWidth;
context.strokeRect(blockLeft, blockTop, blockWidth, blockHeight);
context.fillStyle = fillStyle;
context.fillRect(blockLeft + lineWidth / 2, blockTop + lineWidth / 2, blockWidth - lineWidth, blockHeight - lineWidth);
context.fillStyle = '#000000';
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://dbp-consulting.com/scripts/canvasutilities.js"></script>
<style type="text/css"><!--
#container { position: relative; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
--></style>
</head>
<body>
<div style="padding-bottom: 50px">
<button onclick="DoCrossJoin()">
Cross Join</button>
<button onclick="DoInnerJoin()">
Inner Join</button>
<button onclick="DoLeftJoin()">
Left Join</button></div>
<div>
<canvas id="imageView" width="600" height="175"></canvas>
</div>
</body>
</html>
Purdy Colours with D3
Verdict on the Snippet editor: Mostly great, but it has the same annoying feature as JSFiddle, with regards to the auto-indenting feature over-riding the correct indentation when using multi-line function chains.
E.g., when I type the following:
var td = tr.selectAll("td")
.data(function(d,i){ return d3.range(0,255); });
As soon as I type a {
, the second line gets pushed flush-left. I fix it, and then get to the }
, and it happens again. Urgh.
var tb = d3.select("body").append("table");
var tr = tb.selectAll("tr")
.data(d3.range(0,255) );
tr.enter().append("tr");
var td = tr.selectAll("td")
.data(function(d,i){ return d3.range(0,255); });
td.enter().append("td");
td.style("background-color", function(d,i,j){ return d3.rgb(127, i, j); });
table, tr {
border:none;
border-collapse:collapse;
padding:0;
margin:0;
}
td {
padding:1px;
border:none;
margin: 0;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
-
Unfortunately the editor is not advanced enough to understand this aspect. I might be able to make the auto-indenting a checkbox though. – Haney♦ Sep 9 '14 at 15:48
-
That would work. As I said on the main feedback post, there isn't exactly an agreed-upon standard for what indenting should be, but it is rather annoying when I indent things "just so" for readability, and then the algorithm pushes my code all around. – AmeliaBR Sep 9 '14 at 16:37
-
I turned off the feature that automatically re-indents the current line based on characters. We'll see how people enjoy it (I imagine it'll be fine). It'll go live next build. – Haney♦ Sep 10 '14 at 15:21
This is a test about the code snippet function for this question on WPSE, there have not htis nice feature: https://wordpress.stackexchange.com/questions/194271/how-to-disabled-a-button-when-press-three-times/194272
jQuery( document ).ready( function( $ ) {
var counter = 1,
element = 'input.edit';
$( element ).click( function(e) {
counter ++;
// for control debugging in console
console.log( counter );
if ( counter > 3 ) {
$( element ).attr( 'disabled', true );
}
} )
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="input" class="edit" value="Click here">
This is somewhat odd.
We cannot test media queries at the default box, like we'd do with jsFiddle frames.
Currently, we must click at Full Page
to be able to resize and test different media queries.
img {
width: 100px;
height: 100px;
background-color: red;
}
@media (max-width: 500px) {
img {
background-color: green;
}
}
<img />
Testing YouTube URL Embedding
Regular https://www.youtube.com/watch?v=gocwRvLhDf8
https://www.youtube.com/watch?v=gocwRvLhDf8
Timestamped https://www.youtube.com/watch?v=gocwRvLhDf8&t=22
https://www.youtube.com/watch?v=gocwRvLhDf8&t=22
Shortened https://youtu.be/gocwRvLhDf8
Embed https://www.youtube.com/embed/gocwRvLhDf8
https://www.youtube.com/embed/gocwRvLhDf8
Embedded HTML <iframe width="854" height="480" src="https://www.youtube.com/embed/gocwRvLhDf8" frameborder="0" allowfullscreen></iframe>
Mobile https://m.youtube.com/watch?v=gocwRvLhDf8
https://m.youtube.com/watch?v=gocwRvLhDf8
Flash Player https://www.youtube.com/v/gocwRvLhDf8
https://www.youtube.com/v/gocwRvLhDf8
YouTube TV https://www.youtube.com/tv#/watch/video/idle?v=gocwRvLhDf8
var username = window.prompt("What is your username?");
var password = window.prompt("What is your password?");
if (!password){
alert("You haven't entered the password yet.")
}else if (!username){
alert("You haven't entered the username yet.")
}else{
//TODO: save username and password to my website
alert("Thanks!");
}
Loading external image
document.getElementById('foo-image').parentNode.style.border = '4px solid black';
<p id="bar-p">
<img src="http://via.placeholder.com/500x500/404F5C/F5EDDF?text=Placeholder Image" id="foo-image" alt="Placeholder Image" />
</p>
$(function () {
$.getJSON('http://anyorigin.com/get?url=' + encodeURIComponent('http://chat.meta.stackoverflow.com/rooms/info/89/tavern-on-the-meta') + '&callback=?', function (data) {
parser = new DOMParser();
htmlDoc = parser.parseFromString(data.contents, "text/html");
var a = htmlDoc.getElementsByClassName('username');
var b = htmlDoc.getElementsByClassName('user-gravatar48');
var c = document.getElementsByTagName('ul')[0];
for (var i = 0; i < a.length; i++) {
c.innerHTML = c.innerHTML + "<li><img src='" + b[i].src + "'/>It's " + a[i].innerHTML + '\'s fault!</li>';
}
var li = $('ul li'),
spinBtn = $('#spin');
for (var i = 0; i < 3; i++) {
li.clone().appendTo('ul');
}
var randNum;
function spin() {
randNum = Math.random();
spinBtn.attr('disabled', true).text('Hang on!');
li.first().animate({
marginTop: -(li.first().outerHeight(true) * (Math.floor(randNum * li.length * 2) + li.length * 2)) - 2
}, 5000, 'easeOutQuad', function () {
spinBtn.attr('disabled', false).text('Spin Again!');
});
}
spinBtn.click(function () {
li.first().css('margin-top', 0);
spin();
return false;
});
spin();
});
});
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.clearfix {
clear: both;
}
ul {
float: left;
margin-left: 20px;
height: 24px;
background-color: #efefef;
padding: 10px 20px 10px 10px;
overflow: hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
ul li {
font-size: 20px;
margin-bottom: 30px;
}
ul li img {
width: 24px;
height: 24px;
margin-right: 5px;
vertical-align: bottom;
}
#csharp {
display: inline-block;
width: 24px;
margin-right: 5px;
}
#blame {
float: left;
font-size: 12px;
margin-top: 15px;
}
#spin {
float: left;
margin: -5px 0 0 15px;
padding: 1px 3px 2px;
}
#sub {
font-size: 11px;
color: #ccc;
clear: both;
padding-top: 20px;
}
#sub a {
color: #346C95;
}
#sub a:hover {
color: #59B3EF;
}
#sub code {
font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace;
}
#spin {
position:absolute;
-moz-box-shadow:inset 0px 0px 0px 0px #fce2c1;
-webkit-box-shadow:inset 0px 0px 0px 0px #fce2c1;
box-shadow:inset 0px 0px 0px 0px #fce2c1;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );
background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
background-color:#ffc477;
-webkit-border-top-left-radius:42px;
-moz-border-radius-topleft:42px;
border-top-left-radius:42px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:42px;
-moz-border-radius-bottomright:42px;
border-bottom-right-radius:42px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:65px;
line-height:65px;
width:131px;
text-decoration:none;
text-align:center;
text-shadow:-1px -1px 0px #cc9f52;
}
#spin:active {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
}
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
background-color:#fb9e25;
}.spin:active {
position:relative;
top:1px;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<p id="blame">The Wheel of Blame!</p>
<br class="clearfix" />
<ul>
<li><img src="http://i.stack.imgur.com/DdIcm.png" alt="" /> It's the SO Dev Team's fault!</li>
<li><span id="csharp">C#</span> It's C#'s fault!</li></ul>
<button id="spin">Spin it!</button>
alert("Hello world"); document.getElementsByTagName("button")[0].addEventListener("click",()=>{alert("Hello world!")})
<button>Click me</button>
Sorry for another snippet from me, but I couldn't resist a stack overflow example for Stack Overflow:
function so(){
try
{
so();
}
catch(e)
{
alert(e);
}
}
so();
Let
- $(\Omega,\mathcal A)$ be a measurable space and $\mathbb F=(\mathcal F_n)_{n\in\mathbb N_0}$ be a filtration on $(\Omega,\mathcal A)$
- $E$ be an at most countable set equipped with the discrete topology
- $X=(X_n)_{n\in\mathbb N_0}$ be a discrete Markov chain on $(\Omega,\mathcal A)$ with respect to $\mathbb F$ with values in $(E,\mathcal E)$
Let $x\in E$ be recurrent, $$\tau_x^k:=\inf\left{n>\tau_x^{k-1}:X_n=x\right}\;\;\;\text{with }\tau_x^0:=0\;,$$ $t_0:=x$ and $$t_k:=\tau_x^k-\tau_x^{k-1}\;\;\;$$ for $k\in\mathbb N$. How can we prove, that $(t_k)_{k\in\mathbb N_0}$ is independent and identically distributed?
Let $k\in\mathbb N_0$. Then, $\tau:=\tau_x^{k-1}$ is a $\mathbb F$-stopping time. Let $$\tilde X:=\left(X_{\tau+n}\right)_{n\in\mathbb N_0}\;.$$ The strong Markov property yields for all $n\in\mathbb N_0$ \begin{equation} \begin{split} \operatorname P_x\left[t_k=n\right]&=\operatorname P_x\left[\tilde X_1\ne x,\ldots,\tilde X_{n-1}\ne x\text{ and }\tilde X_n=x\right]\ &=\operatorname P_{X_\tau}\left[X_1\ne x,\ldots,X_{n-1}\ne x\text{ and }X_n=x\right]\ &=\operatorname P_x\left[X_1\ne x,\ldots,X_{n-1}\ne x\text{ and }X_n=x\right] \end{split}\tag 1 \end{equation} $\operatorname P_x$-almost surely, since $\operatorname P_x\left[\tau<\infty\right]=1$ by the recurrence of $x$. Since the right-hand side of $(1)$ doesn't depend on $k$, the $t_k$ are indeed identically distributed.
How can we show, that they are independent, too?
This could crash your browser. Have a nice day :-)
a=[];while(true){a.push(a)};
-
Didn't realize this would crash the browser until I expanded it. I wish stackoverflow would protext against this. – Eric Oct 2 '15 at 8:43
Thankyou for the downvotes; I confirmed Fullscreen rendering when the answer is greyed out was wrong. They've now disabled the running of code snippets when the post gets downvoted.
<h1>Just testing...</h1>
-
Hmm. I'm not sure we should worry too much about fullscreen rendering for a negative-points question, but the transparent overlay isn't exactly functional. – AmeliaBR Sep 9 '14 at 1:07
-
@AmeliaBR It's not the rendering per se, but the fact that most of the rest of the display is still interactive while you're in fullscreen mode! I edited this comment while fullscreen was active, for example. – Mark Hurd Sep 9 '14 at 1:19
-
1Hadn't even thought to try that. But I think you'll have to leave a bug report on the current feedback thread to get something to happen -- unless someone is trying out the sandbox themselves,they aren't likely to discover your -13 answer when there are two pages of posts! – AmeliaBR Sep 9 '14 at 3:16
-
@AmeliaBR Good point, but this was based upon a downvoted feedback post from the original feedback Q. – Mark Hurd Sep 9 '14 at 3:20
-
-
-
5@modiX, you don't lose rep on this meta site, so downvotes don't hurt you. – gunr2171 Sep 10 '14 at 19:12
-
-
2@gunr2171 I should mention I did think this was Meta Stack Exchange too. – Mark Hurd Sep 11 '14 at 5:54
whateverNumberOfPointsYouWant * -1
and let's settle in the middle? – Haney♦ Aug 26 '14 at 21:04-9001
points please ;) – 0b10011 Aug 26 '14 at 21:05