Dynamically centering web container?

  1. 6 days ago

    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

  2. Michel B

    May 14 Pre-Release Testers RubberViews.com
    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.

  3. 5 days ago

    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

  4. Michel B

    May 14 Pre-Release Testers RubberViews.com

    I posted the corrected line from your code.

    You can do that in Resized :

    posLeft = (Self.width - masterContainerLogin.Width)/2
  5. 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.

  6. Greg O

    May 14 Xojo Inc

    @Peter G,

    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.

  7. 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
  8. Greg O

    May 14 Xojo Inc

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

  9. posLeft = 0

    -image-

  10. Alberto D

    May 14 Pre-Release Testers
    Edited 5 days ago

    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.

  11. John S

    May 14 Pre-Release Testers, Xojo Pro

    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

  12. 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!

  13. Alberto D

    May 14 Pre-Release Testers

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

    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.

  14. Greg O

    May 15 Xojo Inc

    @Peter G Alberto, how, or what is causing, the code to stop before assigning posLeft

    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.

  15. 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.

  16. 4 days ago
    Edited 4 days ago

    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!

or Sign Up to reply!