Dynamically centering web container?

I have a container i want to embed dynamically and then once opened, keep centered on the web page.

This code on a button opens/embeds the container and centers it:

Dim c As New ContainerLogin
Dim posLeft As Integer

posLeft = Self.width/2 - c.Width/2
c.EmbedWithin(Self, posLeft, 200, c.Width, c.Height)

masterContainerLogin = c

And if I manually close the embed by :

If masterContainerLogin <> Nil Then
  masterContainerLogin.Close
End If

And then i resize the window and click the first button again it properly centers again.

Obviously this is not the way to do it. I need to get a pointer to the open/embedded container and use the resized event. Anyway, I’m stuck.

Thanks

posLeft = (Self.width - c.Width)/2

Instead of dimming C, you should make it a property of the webpage, so you can access it later, and put the repositioning code in the Resized event handler.

So “masterContainerLogin” is a property of the webpage with a type of “ContainerLogin” which is the actual container. So how exactly do I do what you are suggesting?

Thanks

I posted the corrected line from your code.

You can do that in Resized :

posLeft = (Self.width - masterContainerLogin.Width)/2

That’s great, Michael. I’m making progress, but not quite there yet.

The Page Open event:

Dim c As New ContainerLogin
Dim posLeft As Integer

masterContainerLogin = c

posLeft = (Self.width - masterContainerLogin.Width)/2
c.EmbedWithin(Self, posLeft, 200, c.Width, c.Height)

masterContainerLogin = c

The Resized event:

Dim posLeft As Integer
posLeft = (Self.width - masterContainerLogin.Width)/2
masterContainerLogin.Left = posLeft

When the page is launched, the container opens on the left side and then “jumps” (relocates) to the center. How can I get it centered from the get-go w/o the jumpiness?

Thanks much.

@Peter Greulich,

If you go back to the original code and just before you call embedWithin, you put

c.lockleft = False

It should stay centered and not need the resized event.

That seems to embed the container on the left side, not centered - if I followed your suggestion correctly?

Open event:


Dim c As New ContainerLogin
Dim posLeft As Integer

masterContainerLogin = c
posLeft = Self.width/2 - c.Width/2
c.lockleft = False
c.EmbedWithin(Self, posLeft, 200, c.Width, c.Height)

masterContainerLogin = c

Please put a breakpoint on the lockleft line, run it and find out what posLeft is.

posLeft = 0

I think you are stopping before assigning the value to posLeft.

Edit: I think that’s why Greg said to put the break on lockleft line.

Create a single container which is centered in your webpage and recenters upon resizing of the webpage then embed all your other containers in your first container (this is only worried about horizontal centering):

webpage (wp) shown:

cc = new containerCircleCalc
cc.embedWithin(wp, wp.width/2-cc.width/2, 0, cc.width, wp.height-25)

webpage resized:

cc.left = me.width/2-cc.width/2

Alberto, how, or what is causing, the code to stop before assigning posLeft?

John, that sounds like a clever solution. I’ll try it tomorrow.

Thanks all!

[quote=436437:@Peter Greulich]Alberto, how, or what is causing, the code to stop before assigning posLeft?
[/quote]
My guess is that when you put the red dot to break it stops before executing that line. I prefer to put the word Break just to be sure where the code is stopping:

posLeft = (Self.width - masterContainerLogin.Width)/2 Break
This way I’m sure it stops after posLeft gets the value.

Putting a breakpoint on a line means “stop before you execute this line”. In your image above you should have then clicked the Step Over button to go to the next line OR place the breakpoint on the next line like I asked.

I’d really like to know what leftPos is after it gets assigned.

Thanks for the clarification Alberto & Greg. posLeft = 50, which makes sense in a way. The page is set to 400 and the container to 300. It starts off using the defined values not the actual page size in the browser.

John S. I’m brand new to Xojo so I’m hitting a lot of road blocks with the proper syntax and methodology. But I finally got this working.

I built a new very simple project and it works very smoothly.

For any other newbies:

WebPage Shown event:

Dim ccRed As New CC_Red
Dim posLeft As Integer

posLeft = (CC1.width - ccRed.Width)/2
ccRed.EmbedWithin(CC1, posLeft, 0, ccRed.Width, ccRed.Height)

vCC_Red = ccRed

WebPage Resized event:

Dim posLeft As Integer
posLeft = (CC1.width - vCC_Red.Width)/2

Where:
CC is the parent container
CC1 is the hard-embedded and centered container in the WebPage
CC_Red is the container I wish to embed and dynamically center on the WebPage.
vCC_Red is a property of the WebPage.

Thanks so much!