If the content has moved, I should get a 30x redirect. If the server has a way of guessing what I wanted, I should get 300 Multiple Choices. If the server knows that what I'm looking for isn't anywhere, I should get 410 Gone. 404 is supposed to mean that the server has no idea what I'm looking for, no idea how to find it, no idea where to look.

In that case, I don't want a page to load. I don't want a tab to open. I definitely don't want to download a Flash game, or a 500kb JPEG, or infinity many Lemming images. I just want my browser to mark that link as dead and let me know in as unobtrusive a way as possible, "Hey, you clicked on some bullshit!" Let me either search the domain or click something else.

Not to rag on creative 404s, and I know it's a bit of a pipe dream. Just a peeve of mine.

e.g. http://www.philipithomas.com/does_not_exist

    MutationObserver(function(event) {
      $(event[0].addedNodes[0]).mouseover();
    }).observe($('body')[0], {childList: true});
    $('img').mouseover();

I guess you could call that a workaround :-)

  new WebKitMutationObserver(function(event) {
    $(event[0].addedNodes[0]).mouseover();
  }).observe(document.body, {childList: true});

    $('img').each(function() { $(this).mouseover(); });

    setInterval( function() {$('img').trigger('mouseenter'); }, 100 );

$('img').trigger('mouseenter')

Edit: Corrected the 50X error information thanks to the responses below.

It would not be correct for a request for a page named "error" to return 404 Not Found if the page named "error" was retrieved successfully.

It would also not be correct for a request for a page that does not exist to return the page named "error" with a 200 OK status.

2) I made an assumption, based on the context, that this page was serving a role that is used when the server is overloaded or otherwise unavailable. In that case, this page should not be serving a 200 status, it should be serving a 50X response.

Now, it's possible that this page is just a demonstration of the error that would normally be produced when the website is unavailable. In that case, sure, 200 status is proper since it's not meant to actually be the literal error page which is served when the site has gone down. It's also possible the page has logic in it to serve 200 error when requested directly and 50X when the server is down.

In really, I bet this page is served as-is when the website is unavailable and sends a 200 error. It's difficult to know whether or not this is true until we see a real problem with the server.

It's a fun page but horribly executed. The customer has no idea what's actually happening. Is this a server problem or is the page actually missing?

503 (Unavailable) is more suitable for that I guess.

http://homestarrunner.com/lkjsdflkjsdlkjklfjsdf.html

Wow. I guess the income from the swag (and their 15 minutes) ran out.

    var ims = document.getElementsByTagName('img');
    var event = document.createEvent("MouseEvent");
    event.initMouseEvent("mouseover", true, true, window);
    for(var i=0;i<ims.length; i++){
        ims[i].dispatchEvent(event);
    }

    $("img").mouseover()

    window.setInterval(function() { 
      $('img').mouseover(); 
    }, 500);

    var evt = document.createEvent("MouseEvent");
    evt.initMouseEvent("mouseover", true, true, window,
      0, 0, 0, 0, 0, false, false, false, false, 0, null);

    function isALemming(node) {
      return node.nodeName === 'IMG';
    }
    function fakeMouseover(node) {
      node.dispatchEvent(evt);
    }
    
    function saveLemmings(possibleLemmings) {
      possibleLemmings.filter(isALemming).forEach(fakeMouseover);
    }
    
    var observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(record) {
        saveLemmings(Array.prototype.slice.call(record.addedNodes || []));
      });
    });
    saveLemmings(Array.prototype.slice.call(document.getElementsByTagName('img')));
    observer.observe(document.body, { childList: true });

Same, but nicer, listens to mouseover events on img elements that may not exist yet. Then again, this will - if I understand correctly - cause the event to bubble up in the DOM until it reaches the root element, where jquery's live callback handler will check what element the event took place on and invoke that callback.

$(document).on('mouseover', 'img', function() {});

You want to trigger the mouseover event, not bind to it. And you want to trigger it after the image has been inserted. Unfortunately there's no jquery event for dom insertions. But on firefox you can use a MutationObserver:

    MutationObserver(function(event) {
      $(event[0].addedNodes[0]).mouseover();
    }).observe($('body')[0], {childList: true});

    var event = document.createEvent("MouseEvent");
    event.initMouseEvent("mouseover", true, true, window);

    function save_them_prontos(){
        var ims = document.getElementsByTagName('img');

        for(var i=0;i<ims.length; i++){
            if(ims[i].id == ''){
               ims[i].id = i;
               ims[i].dispatchEvent(event);
            }
        }
        time_dem();
    }


    function time_dem(){
        window.setTimeout(function(){
            save_them_prontos();
        },100)
    }

    save_them_prontos();

double :(

I read it as the first, and had this immediate reaction:

- I'd rather write the 1 line of jQuery over the 6 in vanilla javascript

- I'd rather read the 1 line of jQuery to understand what is going on instead of the 6 in vanilla javascript

- jQuery didn't actually impact your experience much... as you didn't realize it might even be available.

Code is pretty neat. I thought you'd need more lines than this. http://www.romainbrasier.fr/js/lemmings.js

Why is he using eval here?

MDN says: >> If the argument of eval() is not a string, eval() returns the argument unchanged.

I copied the code and tried it both ways, saw no apparent difference. I don't think it does anything.. I could be wrong...

And background info / blogpost, written seven years later by the author: http://crisp.tweakblogs.net/blog/3881/dhtml-lemmings-primer....

[edit] format

  var savedCount = 0;
  var saveFromDeathInterval = setInterval(function(){
  	for(var i=0;i<tabLemmings.length;i++){
            var lem = tabLemmings[i];
            if(lem.etat == 'tombe'){
               lem.etat = 'para';
               lem.paraOpen();
               savedCount++;
            }
  	}
        if(savedCount == 404)
        {
           clearInterval(saveFromDeathInterval);
        }
  },2000);

var saveTheirSouls = function() { $('img').trigger('mouseover'); setTimeout( function() { if ($('img').length > 1) { return saveTheirSouls() } else { return false; } }, 1000); }; saveTheirSouls();

winCount = count = 404; while ($('img').length > 0) { $('img').remove(); }