How to correctly display a panel in HTML?

Question

I'm building a HTML5 game consisting of a full window canvas. I want to occasionally display a panel over the canvas, for displaying settings etc.

One way of achieving this would be to have a <div id="panel"> which is hidden by default and absolutely positioned on top of the canvas. When the user want the panel to be displayed then I can simply use jQuery to show the panel.

I also want the server to be able to open this panel maybe using the fragment identifier.

Please could somebody explain (one of the) best ways of displaying and hiding panels.

Answer 1

Thinking of what you want to achieve I would go with one of those approaches:

AJAX

• create a JavaScript object that handles everything within your panel
• create a handle that can show/hide the panel based on the user's action (e.g. onclick)
• set an interval in which you check whether something on the server has changed
  • if true use the response of this call (could be a JSON-object) to update the show the panel

HTML5 WebSockets

Another possibility is to use HTML5 WebSockets. With a WebSocket you can establish a full-duplex connection between your server and the browser:

WebSocket is a web technology providing full-duplex communications channels over a single TCP connection. […] WebSocket is designed to be implemented in web browsers and web servers, but it can be used by any client or server application. The WebSocket Protocol is an independent TCP-based protocol. Its only relationship to HTTP is that its handshake is interpreted by HTTP servers as an Upgrade request.[1] The WebSocket protocol makes possible more interaction between a browser and a web site, facilitating live content and the creation of real-time games. […]

From Wikipedia.org "WebSocket"

You can find a lot of good examples and informations in this post:
What are good resources for learning HTML5 WebSocket?