Home/ Questions/Q 8875895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T19:05:48+00:00

I’m writing a Canvas game in HTML 5 and i want to float a

  • 0

I’m writing a Canvas game in HTML 5 and i want to float a div over the canvas so the user can enter their name into a box and the game capture it.

I’ve got this working but i have no idea how to actually change the size of the text, font and length of the box the user types in.

My JS is as follows:

$("#menuBox").dialog({
    resizable : false,
    position  : [30,30],
    minHeight : 100,
    minWidth  : 10,
    height    : 200,
    width     : 500
});

In the body

<body>
  <div id="wrapper">
  <div id="container">
  <div id="menuBox" style="display:none">
    <form action="POST"> <input type="text" /></form>
  </div>

  </div>
</body>

and the CSS

#wrapper{
  position: relative;
  left:10px;
  top:10px;
}

#container{
  position: absolute;
  left: 0px;
  top: 0px;
  background-image: url("Main.jpg");
  height: 540px;
  width: 900px;
}

div.ui-dialog div.ui-widget-header { 
  border: none; 
  display: none;
}

.ui-dialog .ui-dialog-content  { 
   border: none; 
   padding: 0;
}

.ui-dialog {
   width: 500px;
   padding: 0;
}

So the idea is the only thing the user sees is the long text box and it just appears over my formatted canvas environment.

I’m new to JQuery (which is why the first bits are still non-JQuery), so i’m not even sure what i want is possible. If I wanted to make the font size 20 and Tomoha and the input box 300px long, i can’t see where i would enter this or even if i could make it happen, as using the parameters in .dialog doesn’t seem to alter that input field. Any advice?

Thanks for reading.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If problem is only updating styles for dialog box content, you can mention specific parent ID or class like below.

    If this didn’t solve, it would be better to provide quick solution if you can show me the dialog box html code generated by jQuery.

    #menuBox .ui-dialog-content {
  font-size:20px;
  font-family:Tomoha;   
}
#menuBox .ui-dialog-content input {
    max-width: 320px;
    width: 300px;
}
    • 0