I create a training module for an educational company where I create 25 animal sprites (a canvas with an image in it) and put them in a farm (div with a background image). Then I reorder their z-index according to their location in the background, so that the closer sprites will be on top of the others (both background DIV and sprites : absolute; ).
This is the function that reorders sprites:
Array.prototype.sortIndices = function (func) { var i = j = this.length, that = this; while (i--) { this[i] = { k: i, v: this[i] }; } this.sort(function (a, b) { return func ? func.call(that, av, bv) : av < bv ? -1 : av > bv ? 1 : 0; }); while (j--) { this[j] = this[j].k; } } function rearrangeSprites() { var zSprites = new Array(); for (var i = 0; i < sprites.length; i++) { var a = $('#sprite_'+i).css('bottom'); a = a.substr(0, a.length - 2); zSprites[i] = { b : -a*1 }; } zSprites.sortIndices(function(a,b) { return ab - bb; }); for (var i = 0; i < zSprites.length; i++) { spriteObjects[zSprites[i]].style.zIndex = (1001 + i) + ''; } }
It works fine in IE and Firefox, but Chrome doesn't follow the z-index order.
any ideas?
Answer to the answers:
justspamjustin: I tried negative z-indices, as it seemed at some point in the article. also tried reordering objects using this code:
$('.sprite').detach(); for (var i = 0; i < zSprites.length; i++) { $('#Stage_udi_meadow').append(spriteObjects[zSprites[i]]); spriteObjects[zSprites[i]].style.zIndex = (i + 1000) + ''; }
nada!
Francis: It would be nice to replace the canvases with, say ... DIVs, since a lot of code is built around the possibilities of the canvas. I also need these to be canvases because I use transparency, PNG shadows and perform drag and drop tests that won't work with a simple DIV, so I will keep this delicious option for the latter.
apsillers: CSS (on request):
for sprites:
element.style { width: 60.674351585014406px; height: 60.674351585014406px; left: 204.55043227665706px; top: 22.550432276657062px; cursor: pointer; z-index: 1003; } .sprite { background-repeat: no-repeat; margin: 0px; padding: 0px; overflow: hidden; position: absolute; z-index: 140; } .EDGE-122375087, .EDGE-122375087 * { -webkit-transform: translateX(0px); }
for background:
element.style { position: absolute; margin: 0px; left: 0px; top: 177px; width: 566px; height: 347px; right: auto; bottom: auto; background-size: 100%; background-image: url(http://localhost:9090/cet_html5/publish/images/udi_meadow.png); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; background-position: 0px 0px; background-repeat: no-repeat no-repeat; } #Stage_udi_meadow { } .EDGE-122375087, .EDGE-122375087 * { -webkit-transform: translateX(0px); } user agent stylesheetdiv { display: block; } Inherited from body Style Attribute { cursor: auto; }