I'm trying to overlay images of my NPCs on top of my background image, and I'm running into a strange problem- granted, the fact that I don't know Javascript well is probably a factor

I have a <div> named "#NPC_div" that I'd like to insert into '#gamePanel. I can place it after #gamePanel using JS.eval ("$('#NPC_div').insertAfter($('#gamePanel'))"), and it will appear where I'd expect it to.

However, when I try to use JS.eval ("$('#NPC_div').appendTo($('#gamePanel'))") to insert it into the #gamePanel <div>, my #NPC_div just sort of disappears.

Can anyone show me what I'm missing here?

What else is in #gamePanel at this point?
My first guess woould be that your content is overflowing outside the panel and being cropped; but I'm not sure off the top of my head how the CSS for the panel is set up.

Thanks for the response!

#gamePanel is where the image for the room is displayed when that is turned on- I think something in the system is overwriting it, so I can add things in front of it or behind it, but any changes I make to #gamePanel get overwritten.

I'm now going through the exercise of creating my own div to display my room scene and characters, and I'll write to that and switch off the #gamePanel entirely

EDIT: Actually, I'm now teasing apart your excellent code sample from this thread to figure out how to move the room's picture to my new DIV.

I know what the panel is. I asked what was in it at the point your code is running.
My first guesses are that there's already an image in it, meaning that your appended block gets added below it and is cropped off by the bottom of the panel (try running JS.setPanelHeight() after adding stuff); or that it's empty and hidden (in which case you would need to show the panel before adding stuff to it).

My second thought, after looking at the code again, is to ask when you are trying to add this element. If you're doing it in a room's before enter script, it would be immediately replaced as the panel contents is set back to the room's picture.

I was adding it in the room's Before Enter script, and just as you described it was getting overwritten immediately.

I wound up solving it in a slightly roundabout way- I hid #gamePanel and added a script to the game object on room entry that pulls the image out and puts it in my own div block - another script that runs every turn looks at what NPCs are in the room and overlays them on top of the room view. I'm sure there's a cleaner solution, but it works so far