5
\$\begingroup\$

Your task today is to create a HTML page.

This page, when opened in a browser, behaves as if the browser has a problem (hanging, crashing, network error, virus, etc.)

  • You can use all the HTML(5), CSS(3) and JavaScript features you want.
  • You can't use Flash or other plugins.
  • You can't provoke a real problem in the browser (for example, you can't make the browser hang with an infinite loop, or crash with a bug exploit, etc.), just make it look like there is a problem.

Please post your source code and provide an URL to view your page, and precise on which browsers / devices it works (if specific).

I recommend http://www.c99.nl/ to host your page easily.

This is a popularity contest, so the most upvoted answer wins!

Thanks, and have fun!

\$\endgroup\$
  • \$\begingroup\$ I think this could have some interesting results, even though it's a very broad challenge. \$\endgroup\$ – nderscore Jul 24 '14 at 20:31
  • \$\begingroup\$ I do not see what is unclear at the moment, I voted for reopening. It is of course a broad challenge as @nderscore mentioned, all in all a rather creative task than a programming challenge and I think that this has to have its place here too. \$\endgroup\$ – flawr Jul 24 '14 at 20:49
  • 2
    \$\begingroup\$ it seems to me challenges like this are the exact reason the admins were so hesitant to allow popularity-contest on the site.. no real objective way to identify a "correct answer" \$\endgroup\$ – ardnew Jul 24 '14 at 23:05
  • \$\begingroup\$ @ardnew thats why its a popularity-contest, there is no right or wrong. the one with the most votes wins. \$\endgroup\$ – Teun Pronk Jul 25 '14 at 7:14
  • 1
    \$\begingroup\$ @TeunPronk No - A popularity-contest is a competition where the correct answer with the highest vote tally (upvotes minus downvotes) wins, usually the most creative answer. Each popularity-contest must give precise requirements such that we can judge if an answer is correct. \$\endgroup\$ – Howard Jul 25 '14 at 8:28

10 Answers 10

6
\$\begingroup\$
<html>
 <head>
  <title>Connecting...</title>
 </head>

 <body style="margin: 0px; overflow:hidden;">
  <div style="position: relative;">
   <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor:wait;"></div>
   <iframe src="http://www.wikipedia.com/" width="100%" height="100%" style="border: 0px;">
   </iframe>
  </div>
 </body>
</html>

http://c99.nl/f/64943.html

\$\endgroup\$
  • \$\begingroup\$ neat! you could get rid of double scrollbars with overflow:hidden on the body or something like that. And use an iframe instead of object (for semanticity) \$\endgroup\$ – xem Jul 25 '14 at 10:47
  • \$\begingroup\$ That doesn't hang for me. \$\endgroup\$ – Isiah Meadows Jul 27 '14 at 8:47
  • \$\begingroup\$ cursor: wait is the trick. \$\endgroup\$ – Jamie Jul 29 '14 at 23:25
  • \$\begingroup\$ @xem thanks, I changed it as you suggested! \$\endgroup\$ – vauge Jul 31 '14 at 9:30
  • \$\begingroup\$ @vauge Works now. \$\endgroup\$ – Isiah Meadows Aug 4 '14 at 5:28
4
\$\begingroup\$

Zombie Error

https://dl.dropboxusercontent.com/u/141246873/ZombieError/index.html

Note: It might take a few seconds to load due to the image file.

The webpage consists of the below html, css and javascript as well as an image file zombie.png (graphics by Clint Bellanger licensed CC-BY 3.0).

Tested in google chrome v36, but I expect it will work in most browsers.

Update:

26th Jul: Now removes zombies once they walk off the screen

28th Jul: You can now click on the zombies to blast them off the website

HTML:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Zombie Error</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
    <script src="zombie.js"></script>
</head>
<body style="margin: 0px;">
    <div style="position: relative;">
        <div style="margin: 0 auto; width:100%; height:100%;">
            <iframe src="https://godaddy.com/" style="width: 100%; height: 100%; margin: 0; border-width: 0px;"></iframe>
        </div>
    </div>
</body>
</html>

CSS:

body {
    font-family: 'Segoe UI', sans-serif;
}

span {
    font-style: italic;
}

.zombie{
    width: 78px;
    height: 78px;
    background-image: url('https://dl.dropboxusercontent.com/u/141246873/ZombieError/zombie.png');
    background-position: left;
    background-position-x: 0px;
    background-position-y: 0px;
    position: absolute;
    left: 10px;
    top: 10px;
}

body{
    overflow: hidden;
}

Javascript:

var directionWest = 0;
var directionNorth = 6;
var directionEast = 4;
var directionSouth = 2;

var stateWalking = 0;
var stateDying = 1;
var stateDead = 2;

var animWalk = {
    speed: 0.15,
    numFrames: 8,
    frames: [4, 5, 6, 7, 8, 9, 10, 11]
}

var animDying = {
    speed: 0.10,
    numFrames: 8,
    frames: [28, 29, 30, 31, 32, 33, 34, 35]
}

var spriteWidth = 128;
var spriteHeight = 128;

var spriteOffsetX = 25;
var spriteOffsetY = 25;

var spritesheetWidth = 4608;

function Zombie(_id, _x, _y, _direction) {
    this.direction = _direction
    this.id = _id;
    this.pos = { x: _x, y: _y }
    this.anim = animWalk;
    this.animFrame = 0;
    this.animDelta = 0;
    this.speed = 30;
    this.state = stateWalking;
    this.corpseDelta = 0;
    return this;
}

Zombie.prototype.Update = function (delta) {
    if (this.state == stateDead)
        return;

    //update the animation frame
    this.animDelta += delta;
    if (this.animDelta >= this.anim.speed) {
        this.animDelta -= this.anim.speed;
        this.animFrame++;
        if (this.animFrame >= this.anim.numFrames)
            this.animFrame = 0;
    }

    //background-position-x
    var div = document.getElementById(this.id);
    div.style.backgroundPositionX = ((spritesheetWidth - (spriteWidth * this.anim.frames[this.animFrame])) - spriteOffsetX) + "px";
    div.style.backgroundPositionY = ((spriteHeight * this.direction) - spriteOffsetY) + "px";

    if (this.state == stateWalking) {
        //update position
        if (this.direction == directionEast)
            this.pos.x += (this.speed * delta);
        if (this.direction == directionWest)
            this.pos.x -= (this.speed * delta);
        if (this.direction == directionNorth)
            this.pos.y -= (this.speed * delta);
        if (this.direction == directionSouth)
            this.pos.y += (this.speed * delta);
        div.style.left = Math.floor(this.pos.x) + "px";
        div.style.top = Math.floor(this.pos.y) + "px";
    }
    else if (this.state == stateDying && this.animFrame == (this.anim.numFrames - 1)) {
        this.state = stateDead;
    }
}

var zombies = []

var nextZombieID = 0;

function GetZombie(zombieID)
{
    return zombies.filter(function (z) { return z.id == zombieID })[0];
}

function ZombieClick(div)
{
    var zombie = GetZombie(div.srcElement.id);

    if (zombie.state == stateWalking) {
        zombie.state = stateDying;
        zombie.animFrame = 0;
        zombie.animDelta = 0;
        zombie.anim = animDying;
    }
}

function NewZombie()
{
    var x = 0;
    var y = 0;
    var direction = 0;

    var rand = Math.random();
    if (rand < 0.25)
    {
        //spawn from left of screen
        x = spriteWidth * -1;
        y = (Math.random() * screen.height) - spriteHeight;
        direction = directionEast;
    }
    else if (rand < 0.5) {
        //spawn from right of screen
        x = screen.width;
        y = (Math.random() * screen.height) - spriteHeight;
        direction = directionWest;
    }
    else if (rand < 0.75) {
        //spawn from top of screen
        x = (Math.random() * screen.width) - spriteWidth;
        y = spriteWidth * -1;
        direction = directionSouth;
    }
    else {
        //spawn from bottom
        x = (Math.random() * screen.width) - spriteWidth;
        y = screen.height;
        direction = directionNorth;
    }

    //generate an id
    var id = nextZombieID;
    nextZombieID++;

    //create a div
    var div = document.createElement("div");
    div.id = id;
    div.classList.add("zombie");
    div.onclick = ZombieClick;
    document.body.appendChild(div);

    //create a zombie
    zombies.push(new Zombie(id, x, y, direction));
}

var spawnRate = 1;
var spawnDelta = 0;

function spawnZombies(delta)
{
    spawnDelta += delta;
    if (spawnDelta >= spawnRate) {
        spawnDelta -= spawnRate;
        NewZombie();
    }
}

var corpseDuration = 3;

function cleanupZombies(delta)
{
    for (var i = zombies.length - 1; i >= 0 ; i--) {
        //if the zombie has walked off the screen, remove them
        if (zombies[i].pos.x < (spriteWidth * -2)
            || zombies[i].pos.x > screen.width + spriteWidth
            || zombies[i].pos.y < (spriteHeight * -2)
            || zombies[i].pos.y > screen.height + spriteHeight)
        {
            var element = document.getElementById(zombies[i].id);
            element.parentNode.removeChild(element);
            zombies.splice(i, 1);
        }

    }

    for (var i = zombies.length - 1; i >= 0 ; i--) {
        //if the zombie has died, remove their corpse after some time
        if (zombies[i].state == stateDead) {
            zombies[i].corpseDelta += delta;

            if (zombies[i].corpseDelta > corpseDuration) {
                var element = document.getElementById(zombies[i].id);
                element.parentNode.removeChild(element);
                zombies.splice(i, 1);
            }
        }
    }

}

var started = false;

var main = function () {
    var now = Date.now();
    var delta = now - then;
    if (started) {    
        cleanupZombies(delta / 1000);

        spawnZombies(delta / 1000);

        for (var i in zombies)
            zombies[i].Update(delta / 1000);
    }

    then = now;

    setTimeout(main, 30);
};

var then = Date.now();
setTimeout(main, 30);

setTimeout(function () {
    alert("Error 8102: Unexpected zombie attack. Please stand by...");
    started = true;
}, 2000)
\$\endgroup\$
4
\$\begingroup\$

Better don't mess with Bond villains

Enter Blofelds secret ambush...


And in case you want to see the code: jsfiddle

After 3 seconds there will pop up a message, that the script isn't responding, but that's only an alert popup and not a real message from a hanging page. After 15 seconds there will be additional greetings from Blofeld.

\$\endgroup\$
  • 2
    \$\begingroup\$ I like it, but I get a notification of an unresponsive script which is something that shouldn't happen I believe. even though you seem to generate that yourself. \$\endgroup\$ – Teun Pronk Jul 25 '14 at 8:34
  • \$\begingroup\$ @TeunPronk No, that's supposed to happen. \$\endgroup\$ – undergroundmonorail Jul 25 '14 at 8:35
  • \$\begingroup\$ @TeunPronk I got you! That's exactly what should happen, but it's not a real warning only an alert. \$\endgroup\$ – izlin Jul 25 '14 at 9:19
  • \$\begingroup\$ I haven't used javascript in forever, but can't you use something like window.location appended with some javascript filename to make the domain appear to match? \$\endgroup\$ – millinon Jul 25 '14 at 23:38
3
\$\begingroup\$

Redirect to about:crash, which shows the default crash screen on Chrome [won't work on modern versions of Chrome, Firefox, or other browsers]:

enter image description here

<meta http-equiv="refresh" content="0; url=about:crash">

It probably doesn't qualify as a "full HTML page", but it will be rendered correctly by Chrome.
To try it, type this into the Chrome address bar:

data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDsgdXJsPWFib3V0OmNyYXNoIj4=

I couldn't test this answer because I don't have a Chrome install handy, please remove this notice once you test it.

\$\endgroup\$
  • \$\begingroup\$ I tried putting that text in the address bar of Chromium (mostly the same as Chrome), but it just resulted in a page with the contents PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDsgdXJsPWFib3V0OmNyYXNoIj4= \$\endgroup\$ – Ian D. Scott Jul 25 '14 at 18:26
  • \$\begingroup\$ @IanD.Scott Whoops! I accidentally typed content rather than base64. I edited my answer. \$\endgroup\$ – Giulio Muscarello Jul 26 '14 at 15:19
  • 3
    \$\begingroup\$ Your base64 just redirects me to about:blank. \$\endgroup\$ – Doorknob Jul 29 '14 at 0:20
1
\$\begingroup\$

Glitchy scroll

No, that's not bad image compression. Unintended side effect from something else I was trying.

Try it out with the link in the title; The page starts looking weird while you scroll, and the scroll should become very jittery after a while. I think you need font smoothing of some sort activated, but everyone has this nowadays, right? The screenshot is from Chrome on OS X.

Imgur

The jQuery code:

$( window ).scroll(function() {
    $('#main').clone().prependTo('body');
});
\$\endgroup\$
1
\$\begingroup\$

HTML + CSS + JavaScript/jQuery/jQuery UI

This simulates a Windows error dialog. (It drags, too!) Like all good error messages, it fulfills two main requirements:

  1. It displays a cryptic error message meaning nothing to all but a few.
  2. The buttons seem to do nothing when clicked except show the wait cursor.

See it in action at http://codepen.io/anon/pen/onbAi. (JSFiddle was not loading jQuery UI well.) It should display reasonably well on all browsers.

<!DOCTYPE html><html>
<head><style>
body {
  font: 11px sans-serif;
}
#window {
  background-color: #ECE9D8;
  padding: 3px;
  width: 574px;
  margin: 20px auto 0 auto;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
header {
  background-color: #1E74EF;
  background-image: -moz-linear-gradient(left, #003ac9 0%, #4492e5 100%);
  background-image: -webkit-linear-gradient(left, #003ac9 0%, #4492e5 100%);
  background-image: linear-gradient(to right, #003ac9 0%, #4492e5 100%);
  clear: both;
  padding: 3px;
}
p {
  margin-left: 60px;
}
h1 {
  font: bold 13px sans-serif;
  color: white;
  margin: 1px;
}
button {
  background-color: #ECE9D8;
  outline: none;
  cursor: inherit;
}
#close {
  float: right;
  font-size: 16px;
  font-weight: bold;
  padding: 0 2px;
  margin: 0;
  text-align: center;
  height: 18px;
  line-height: 16px;
}
#ok {
  width: 75px;
  height: 23px;
  margin: 0 auto;
  margin-bottom: 13px;
  display: block;
}
</style></head><body>
<div id="window">
  <header>
    <button id="close" title="Close">×</button>
    <h1><span id="browser"></span>Application Error</h1>
  </header>
  <p>The instruction at "</span>" referenced memory at "<span class="hex"></span>". The memory could not be "read".</p>
  <p>Click on OK to terminate the program</p>
  <button id="ok">OK</button>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js'></script>

$('#window').draggable({handle:'header'});

function randomHex(){
  return '0x'+(Math.floor(Math.random()*0xffffffff)).toString(16);
}

$('.hex').each(function(){
  $(this).text(randomHex());
});

var reg = /(opera|chrome|safari|firefox|msie)/i,
    browser = navigator.userAgent.match(reg)[0].toLowerCase();
if(!browser){
  browser = 'firefox';
} else if(browser == 'msie'){
  browser = 'ie';
}
$('#browser').text(browser + '.exe - ');

$('button').click(function(){
  $('html, body').css('cursor','wait');
});
</script>
</body></html>
\$\endgroup\$
0
\$\begingroup\$
data:text/html, <meta http-equiv="refresh" content="0"><script>document.write("Error Code : " + (Math.floor(Math.random() * 10000)  % 1000) + ". Description: Network connection error.")</script>

The error code keeps changing, and the computer goes noisy.

\$\endgroup\$
0
\$\begingroup\$

Simulates an lagging loading spinner

http://c99.nl/f/104794.html

Sourcecode: http://jsfiddle.net/3QURA/2/

HTML:

<div id="loader" style="">
<br/>
<div id="spinner">&nbsp;</div>
<br/>
<br/>
Loading...
</div>

CSS:

body,html {
    width:100%;
    height:100%;
    margin:0;
    color:white;
}
#spinner {
    background:transparent;
    width:100px;
    height:100px;
    left:calc(50% - 100px / 2);
    position:relative;
    -webkit-animation: load infinite 1s;
    -webkit-border-radius: 100%;
    border-right:white 8px solid;
}
@-webkit-keyframes load {
    0% { -webkit-transform:rotate(0deg) }
    100% { -webkit-transform:rotate(360deg) }
}
.paused {
    -webkit-animation-play-state:paused;
}
#loader {
    font-family:Helvetica Light, Helvetica Neue, Helvetica, Arial, sans-serif;
    left:0%;
    position:fixed;
    text-align:center;
    background:rgba(55,55,55,0.5);
    width:100%;
    height:100%;
}

JavaScript and jQuery:

window.setInterval(update, 1000/2);
function update() {
window.setTimeout(function () {
    $("#spinner").addClass("paused");
},1000);
window.setTimeout(function () {
    $("#spinner").removeClass("paused");
},1200);
}
\$\endgroup\$
0
\$\begingroup\$

Chrome Crash Page

Actual Link: chrome://crash/

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCCAQAAABJXchjAAAAjklEQVR4Xu3ZgQbAIAAG4d7/pbeJxJCOWf26DozSh0RWrg0aAESIEEEtxJ6E6ICZUXrTc7MQZID5pyFEiPiwAMQPNYiIpyBEAwIoWBOEAACwJhHhmfCeEEH17++DEPwRlI/giRAhoow7ANE2gchkBN8c4GMQNI6JRHhjiqitAOyEWPsXqkq2QSxNhAgR4269KKbHaOQ5OgAAAABJRU5ErkJggg==" alt="Crash">
  <div>Aw, Shit!</div>
  <p>This page is really fucked up, run for the hills.</p>
  <button>Reload</button>
  <p>If it doesn't work, it's all your fault.</p>
</body>
</html>

CSS

html, button {
  user-select: none;
  cursor: wait;
  font-family: Calibri, Sans-serif;
  text-align: center; 
}
body {
  padding-top: 120px;
  background: #212e3d; 
  font-size: 80%;
  color: white;  
}
button {
  font-family: Calibri, Sans-serif;
  padding: 5px 10px;
}
div {
  font-size: 140%;
}
\$\endgroup\$
0
\$\begingroup\$

I've tested this on my smartphone. I can't get it to load properly on c99.nl, though. Must be that obscure.

It makes your browser look possessed with some sort of obscure virus affecting the loading bar.

<!DOCTYPE html>
<script>
window.location.href = document.location.href;
</script>
<title>Redirecting...</title>
<h3>Redirecting...</h3>

Notes:

  1. This can easily be tested locally by copying it into a plain text file, and the name or place doesn't matter beyond file extension. It is valid HTML5 + JavaScript (you can see for yourself here...only warning is missing <meta charset=utf-8 />).

  2. Make sure that if you test it, especially on a mobile device, stop the loading loop first (same as cancelling a page load) before you exit, or it may crash. (I learned this the hard way...)

In case you hadn't noticed, it's continually redirecting to the same page. window.location.href and document.location.href are synonymous, so it's assigning the current location to its synonym. It could look like server lag or a browser hang, depending on the browser and largely it's caching mechanism.

That last line is just for theme.

\$\endgroup\$
  • \$\begingroup\$ Actually, it is valid HTML5, barring the missing <title> tag (which is fixed). \$\endgroup\$ – Isiah Meadows Jul 31 '14 at 4:30
  • \$\begingroup\$ @Sieg You can omit the <html>, <head>, <body>, and <meta charset="utf-8" /> tags in HTML5. You can also omit 99% of the otherwise-important stuff in the <!DOCTYPE> tag, permitting the iconic <!DOCTYPE html> declaration for HTML5 instead of the lengthy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> for HTML 4.01 Strict. \$\endgroup\$ – Isiah Meadows Jul 31 '14 at 4:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.