Is it possible to re-position the map & frame image within the interface?

teacherman
The built-in map and predefined frame image appear to be both centered in the interface, causing them to overlap, making them somewhat mutually exclusive features.

Is there a straightforward way of realigning these features of the interface?

Ideally, I would like the map and frame image to display side-by-side.

I (and the students I'm working with) would very much appreciate any feedback and support! :)

jaynabonne
You should be able to do it with some CSS, but I don't have the ability to work it out right now. I'll take a look when I get home (unless someone else jumps in!).

jaynabonne
I looked at it a little bit, but I didn't yet arrive at a working solution.

The map is in an HTML element with id "gridPanel". The room image is an HTML element with id "gamePanel". Playing with the CSS (using the built-in HTML Tools), I was able to get them side by side, but resizing the window didn't do the right thing.

I may give it a try again later, but I wanted to let you know where I got to anyway.

teacherman
jaynabonne wrote:I looked at it a little bit, but I didn't yet arrive at a working solution.

The map is in an HTML element with id "gridPanel". The room image is an HTML element with id "gamePanel". Playing with the CSS (using the built-in HTML Tools), I was able to get them side by side, but resizing the window didn't do the right thing.

I may give it a try again later, but I wanted to let you know where I got to anyway.


Thank you for looking in to this and thank you for the update!

jaynabonne
I was able to finally get something reasonable. The code you can drop into your game is this:

  <object name="PaneCssHolder">
<css type="string">
<![CDATA[
<style>
div#gamePanel img {
max-width: 100%;
max-height: 100%;
}
#newGamePanel {
position: fixed;
top: 32px;
height: 300px;
width: 700px;
}
</style>
]]>
</css>
</object>
<function name="InitUserInterface">
JS.eval("$('#gameBorder').append($('&lt;div&gt;', {id: 'newGamePanel'}))")
JS.eval("$('#newGamePanel').append($('#gamePanel'))")
JS.eval("$('#newGamePanel').append($('#gridPanel'))")

JS.eval("$('#gridCanvas')[0].width=340")
JS.eval("paper.view.viewSize.width = 340;")

JS.eval("$('div#gamePanel img').css('max-height', '100%')")
JS.eval("$('div#gamePanel img').css('max-height', '100%')")

JS.eval("$('div#gamePanel').css('margin-left', 'auto')")
JS.eval("$('div#gamePanel').css('left', '0px')")
JS.eval("$('div#gamePanel').css('top', '0px')")
JS.eval("$('div#gamePanel').css('width', '340px')")
JS.eval("$('div#gamePanel').css('height', '300px')")
JS.eval("$('div#gamePanel').css('position', 'absolute')")

JS.eval("$('div#gridPanel').css('margin-left', 'auto')")
JS.eval("$('div#gridPanel').css('top', '0px')")
JS.eval("$('div#gridPanel').css('right', '0px')")
JS.eval("$('div#gridPanel').css('width', '303px')")
JS.eval("$('div#gridPanel').css('height', '300px')")
JS.eval("$('div#gridPanel').css('position', 'absolute')")

OutputTextNoBr(PaneCssHolder.css)
</function>

I've also attached a sample game (without the image).

Let me know if you have any issues.

This topic is now closed. Topics are closed after 60 days of inactivity.

Support

Forums