The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

2 Pages V  1 2 >  
Reply to this topicStart new topic
> Center on area
jar17
post Aug 10 2020, 11:55 AM
Post #1


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



Hi
I'm quite new to HTML and javascript and I have problem that I cannot solve.

I have canvas where I draw some stuff and top of the canvas I wanted to show a message box like popup window with it's own HTML code. The problem is I can set this message box on top of the canvas by setting absolute position in the CSS (position: absolute;) but i do not know how to center the box on the canvas.

Because of the absolute position I don't know if this is even possible. I could write JS script where I count the proper X & Y coords for the box but I would prefer a more simpler/better HTML/CSS way for this to center (vertically/horizontally) the box if possible.

Here's the code for the message box and it's CSS style:

CODE

function createCustomWindow(winWidth,winHeight,elemns)
{

var win = "<div id = 'customWinId' class = 'customWin' style='width: " + winWidth + "px; height: " + winHeight + "px;' > ";

for(ele of elemns)
{
win += "<div class = 'winCenCtrls' id = '" + ele + "'></div> ";

}

win += "</div>";


document.getElementById("overlayControls").innerHTML += win;


}



CODE

.customWin {
    position: absolute;
    top: 110px;
    left: 15%;
    z-index: 10;

background-image: url('gfx\\winbg.jpg');
background-repeat: no-repeat;

background-size: 100% 100%;

  height: 200px;
  width: 50%;
}



Any tips?

thx! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 10 2020, 12:57 PM
Post #2


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



Depends. On a lot of things. We need to know more. What the HTML looks like for instance.

You say this "window" is positioned absolute. But what is the positioning context? CANVAS, the viewport, something else?

IF this window's containing block is the canvas (or a container for the canvas that has the same width as the canvas) and canvas (or the container) has a set width you can get the window centered by positioning it 50% from the left and then nudge it back with a negative left margin that's half of the window's own width. On the other hand, maybe it isn't necessary to make it position: absolute at all. Can't say.

Like so.

CODE
#outer   { width: 800px; height: 600px;
           background: red;
           position: relative }
#inner   { width: 400px; height: 200px;
           background: blue;
           position: absolute; top: 110px; left: 50%; margin-left: -200px }


HTML
<div id="outer">
<div id="inner"></div>
</div>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 01:33 AM
Post #3


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
Depends. On a lot of things. We need to know more. What the HTML looks like for instance.


Sorry I knew I forgot something.

Here's the HTML:


CODE
<p id = "topControls">  </p>

<p id = "canvasArea"></p>

<p id = "overlayControls"></p>

<p id = "bottomControls"></p>



canvas is in canvasArea and the box in overlayControls

This post has been edited by jar17: Aug 11 2020, 01:34 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 01:43 AM
Post #4


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



No, show us what you really have please. With corresponding CSS. Easiest is if you link to the page or paste it all in here.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 02:07 AM
Post #5


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
No, show us what you really have please. With corresponding CSS. Easiest is if you link to the page or paste it all in here.


I think I posted everything related. I am actually making a JS game have ton of JS files. But I did post the whole index.html body, it's just those 4 tags

Here's how I create the canvas though, if it matters:


CODE
var gameArea =
{

canvas : document.createElement("canvas"),

init : function()
{
this.canvas.width = 800;
this.canvas.height = 800;
this.canvas.middleX = this.canvas.width/2;
this.canvas.middleY = this.canvas.height/2;

gameCanvas = this.canvas;

this.context = this.canvas.getContext("2d");
document.body.insertBefore(gameCanvas, document.body.childNodes[0]);

document.getElementById("canvasArea").appendChild(this.canvas);


canvasCenter = {x : this.canvas.middleX, y : this.canvas.middleY };

if(testScript != "none")
{

return;
}
    

},

  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }

};


This post has been edited by jar17: Aug 11 2020, 02:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 02:33 AM
Post #6


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



I can't get that to produce anything I can see on the page.

But CANVAS has a width, 800px, which is good for what you want to do. If you wrap the 4 Ps in a DIV and give the DIV width: 800px and make it position: relative you have created a context so you can position things inside it absolute with the DIV as containing block. As far as I can see you now position it relative the view port which generally isn't a good idea.

I wouldn't use P for the 4 containers since the come with browser styling like margins (and semantically these aren't paragraphs). Use DIV instead. It has no margins or other default styling except that it's a block level element as P and thus breaks the line.

CODE
#container    { position: relative; with: 800px }


HTML
<div id="container">
<div id = "topControls"></div>
<div id = "canvasArea"></div>
<div id = "overlayControls"></div>
<div id = "bottomControls"></div>
</div>



Then what I suggested should work. Provided the outer DIV is 800px...

CODE
.customWin  { position: absolute; left: 50%; margin-left: -200px }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 03:01 AM
Post #7


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
that's because you are missing the background file "winbg.jpg"

No. I tried to style it.
QUOTE
I changed everything to what you suggested but now the box is rendered below the canvas and not inside it


You need top: something suitable too. I only messed with the horizontal centering. Start with top: 0 and take it from there.

This post has been edited by pandy: Aug 11 2020, 03:06 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 03:10 AM
Post #8


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
You need top: something suitable too. I only messed with the horizontal centering. Start with top: 0 and take it from there.


just realized that. and why is your post appearing with my user name? lol

anyway. putting:

left: 50%;
top: 50%;

doesn't make it centered...


This post has been edited by jar17: Aug 11 2020, 03:10 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 03:17 AM
Post #9


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



QUOTE(jar17 @ Aug 11 2020, 10:10 AM) *

QUOTE
You need top: something suitable too. I only messed with the horizontal centering. Start with top: 0 and take it from there.


just realized that. and why is your post appearing with my user name? lol


That's because I'm a clumsy moderator and accidentally pushed the EDIT button instead of REPLY. Good I quoted everything you said anyway. blush.gif


QUOTE
anyway. putting:

left: 50%;
top: 50%;

doesn't make it centered...


Did you also use margin-left: -200px?



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 03:20 AM
Post #10


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
Did you also use margin-left: -200px?


yes

you know the box dimensions are pretty dynamic, I create differen't sizes of them via JS


This post has been edited by jar17: Aug 11 2020, 03:21 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 03:34 AM
Post #11


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



I find it hard to relate to something I can't see. This mockup should correspond to your JavaScript generated HTML, right?
CODE

<div id="container">
   <div id="topControls"></div>
   <div id="canvasArea">
      <div class="customWin"></div>
   </div>
   <div id="overlayControls"></div>
   <div id="bottomControls"></div>
</div>


With this CSS .customWin is centered both horizontally and vertically. I didn't write out stuff you already had in your CSS. Now I've lumped it together.

CODE
#container   { width: 800px; height: 800px;
               position: relative;
               background: red }
.customWin   { position: absolute;
               width: 50%; height: 200px;
               left: 50%; margin-left: -200px;
               top: 50%; margin-top: -100px;
               background: blue }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 03:49 AM
Post #12


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
I find it hard to relate to something I can't see. This mockup should correspond to your JavaScript generated HTML, right?


the box is in overlayControls (That is where createCustomWindow places it)

Here's screenshot of the structure:

IPB Image

(Sorry for the bad quality)

I put there "mainContainer" like you suggested and edited CSS accordingly


This post has been edited by jar17: Aug 11 2020, 03:50 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 04:00 AM
Post #13


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



OK, I misread. But that shouldn't matter. The important thing is that customWin is inside the container.

Is #overlayControls also positioned? Does my mockup correspond to what you have, apart from where customWin is? Do you have more CSS floating around?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 04:13 AM
Post #14


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE
Is #overlayControls also positioned?


no I have very little CSS atm and nothing that should effect this (except "winCenCtrls" but that shouldn't matter)

QUOTE
Does my mockup correspond to what you have, apart from where customWin is?



yes

QUOTE
Do you have more CSS floating around?


no
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 04:29 AM
Post #15


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



Then just apply my mockup to what you have. You can see that it works, can't you? You can move the window thing to the right box without that affecting anything.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 04:34 AM
Post #16


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



QUOTE(pandy @ Aug 11 2020, 11:29 AM) *

Then just apply my mockup to what you have. You can see that it works, can't you? You can move the window thing to the right box without that affecting anything.

QUOTE
Then just apply my mockup to what you have. You can see that it works, can't you? You can move the window thing to the right box without that affecting anything.


hmm, nope it's not centered.

I removed all the CSS and put your CSS to make sure there's not conflict but it still doesn't work.

all I had was this which you gave me:

CODE

#mainContainer   { width: 800px; height: 800px;
               position: relative;
               background: red }
.customWin   { position: absolute;
               width: 50%; height: 200px;
               left: 50%; margin-left: -200px;
               top: 50%; margin-top: -100px;
               background: blue }

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 04:43 AM
Post #17


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



Well, then I don't know.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 04:44 AM
Post #18


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



Could you give me your test code please? maybe it's browser issue. I'm using chrome
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 11 2020, 04:51 AM
Post #19


Computer says no 🌟
********

Group: WDG Moderators
Posts: 19,399
Joined: 9-August 06
Member No.: 6



You already have it. It's just what I posted. It's fine in Chrome.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jar17
post Aug 11 2020, 05:00 AM
Post #20


Novice
**

Group: Members
Posts: 21
Joined: 10-August 20
Member No.: 27,482



Ok made a test page and still didn't get it centered:

CODE
<html>

<head>

<style>
#mainContainer   { width: 800px; height: 800px;
               position: relative;
               background: red }
.customWin   { position: absolute;
               width: 50%; height: 200px;
               left: 50%; margin-left: -200px;
               top: 50%; margin-top: -100px;
               background: blue }


</style>
</head>

<body>

<div id = "mainContainer">

<div class = "customWin" style="width:200px;height:200px">

</div>

</body>

</html>


result

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

2 Pages V  1 2 >
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th January 2021 - 08:45 AM