Question

I created a JQuery plugin to display a map (xy) that is draggable.

On Firefox it works flawless but on any other browsers there is a bug.

Bug:
Normaly the map should be displayed when the site loads.
But on all browser except firefox there is only a black screen until you drag the map, then
it works.

I have no clue how i can fix that.

Example: http://jsfiddle.net/X42Wf/

I hope you understand what i mean, if not look at the example (not with firefox), run it and then drag the black output.

Answer 1

The innerDiv.css('left') is set to auto on initialization (means before a first drag). So in the getVisibleTiles function, mapX equals to NaN so the double for loop is not executed

You just have to edit this:

jQuery('<div/>', {
    id: 'GameMap',
    height: o.InnerDivHeight,
    width: o.InnerDivWidth
}).appendTo(obj);

with this:

jQuery('<div/>', {
    id: 'GameMap',
    height: o.InnerDivHeight,
    width: o.InnerDivWidth,
    css: {
        left: 0,
        top: 0
    }
}).appendTo(obj);

---

Also, if you want to avoid side effects on IE, you should remove trailing comma at the end of objects declaration, like in those 2 examples:

jQuery('<div/>', {
    id: tileName,
    style: "some CSS string", // <----- remove this comma or it will break on IE
}).appendTo(innerDiv).text(tileName);

jQuery('<div/>', {
    id: 'GameMap',
    height: o.InnerDivHeight,
    width: o.InnerDivWidth, // <----- this one too
}).appendTo(obj);