Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How to make a Javascript call
#1
Here's what I want to do:

When my application starts and whenever the end user resizes the browser window, I want it to center horizontally in the browser window (if the visible window is wider than my region) or left-justify (if the window is narrower than my region).  I tried adding Div [margin: auto;] to my css but that did nothing, so I found a centering example in the IntraWeb Downloads page.  

Unfortunately, the example uses Parent.Width, which is effectively WebApplication.FormWidth, which is not the correct number.  For example, if my browser width is 1920 pixels and my region is 1000 pixels wide, it correctly reports a width of 1920 and centers at left position 460.  But if the user then resizes the window to 800 pixels wide, FormWidth is reported as 1460 (the previous left + width of my region) instead of 800, and so instead of setting left = 0, it erroneously sets left = 230.

I've looked online and have found live examples that display the correct visible browser dimensions whenever the screen resizes - one such example is here at https://usefulangle.com/post/190/javascr...dth-height

It appears that the solution is very simple in Javascript - all I need is window.Innerwidth.  My difficulty is that (a) I don't know Javascript, and (b) I don't know how to call Javascript from IntraWeb and get back a value, and that's my question: Can anyone please help me and show me how to make a Javascript call from Delphi + IntraWeb and then either (a) position my region via Javascript or (b) pass back the value of window.Innerwidth to Delphi so I can position things via Delphi code.

Many, many thanks in advance for any help you can provide - I have a feeling this is should be a really simple thing, but I simply don't know how to make the necessary call.

Kind regards,

George
Reply
#2
You are overcomplicating it. Look at the anchor and align properties. Look at the Guess demo.. its centered. This is the same behavior you seek correct?
Reply
#3
I suppose you are referring to this demo?

https://github.com/Atozed/IntraWeb/tree/...lCentering

I tried it and it works correctly. If I set the region width to 1000 pixels and resize my browser window to 800 pixels wide, it correctly sets the position of the inner region (see attached image).

   

You don't have to deal with the size of the form after resizing it (at server side). IntraWeb JS code will handle the resize of the region for you as long as you have correctly set the Anchors property of the region

   
Reply
#4
(05-14-2022, 09:23 PM)Alexandre Machado Wrote: I suppose you are referring to this demo?

https://github.com/Atozed/IntraWeb/tree/...lCentering

Hi Alexandre,

Yes, I have tried that demo and it works under certain circumstances and fails under others.  Here is what I did:

I downloaded the demo, then widened IWRegion1 to 800 pixels, moved it to position left = 24 (same as IWMemo1), and then added two TIWLabels to it to mark the top left and bottom right corners.  I made no other changes, and got the following results:

1. In the first screenshot, I ran it with my browser window maximized.  Everything is properly centered.

2. In the second screenshot, I have resized my browser window to its minimum width (500 pixels).  IWRegion1 is still centered, but as you can see the left side is cut off even though the window is scrolled all the way to the left.  There is no way to scroll left to see that part of the IWRegion1, and so this obviously is useless.

So at this point I modified the CenterControlInParent procedure by adding the line "if x < 24 then x := 24;" prior to the AControl.SetBounds call.  Theoretically, this should set the left position of IWRegion1 to 24 any time the browser window is less than 848 pixels wide, but it does not do this at all.  Here is what happens:

3. If the initial size of the browser window is sufficiently large (848 pixels or wider), everything behaves exactly as in 1. and 2. above.  In other words, IWRegion1 will stay centered, but oddly, if the browser window is shrunk smaller than IWRegion1 (say, to 500 pixels), IWRegion1 does NOT anchor at left position 24, but instead gets cut off at the left with no way to scroll to it.

4. If the initial size of the browser window is sufficiently small (less that 848 pixels wide), we get the results shown in the third screenshot (500 pixels wide).  Clearly, IWRegion1 is NOT centered, nor is is positioned at the (expected) left position of 24 pixels.  If we then maximize the browser window as seen in the fourth screenshot, you can see that IWRegion1 moves even further right - obviously not centered, nor what we want or expect.

The only thing I have been able to determine is that it looks to me like perhaps AControl.Parent.Width does NOT report the true width of the browser window itself, but rather the width that Delphi thinks the form should be.  So if IWRegion1 is 800 pixels wide and is sitting at left = 24 and the browser window then opens with a width of 500 pixels,  AControl.Parent.Width reports back a width of 824 instead of 500, which of course would throw off the centering math, yet even that doesn't match up with the observed behavior.

Perhaps you can replicate this on your end?  I'm stumped.  It seems like this should be so simple......

Thanks for your help!!!

George


Attached Files Thumbnail(s)
               
Reply
#5
In some other thread I saw that you are using IW version 14. What's the exact IW version that you are using to test this project? I must be sure that we are talking about the same version
Reply
#6
Quote:1. In the first screenshot, I ran it with my browser window maximized.  Everything is properly centered.

Correct

Quote:2. In the second screenshot, I have resized my browser window to its minimum width (500 pixels).  IWRegion1 is still centered, but as you can see the left side is cut off even though the window is scrolled all the way to the left.  There is no way to scroll left to see that part of the IWRegion1, and so this obviously is useless.

This is questionable. It may not be the result that you expect but the region is definitely centered within the available browser window. The fact that you have a horizontal scrollbar gives you access to the right (hidden) part of the region, but not to the left, is because the scroll can't scroll to positions with negative coordinates.
Maybe that's not the result that you would expect, but that's how it is supposed to work.

Quote:So at this point I modified the CenterControlInParent procedure by adding the line "if x < 24 then x := 24;" prior to the AControl.SetBounds call.  Theoretically, this should set the left position of IWRegion1 to 24 any time the browser window is less than 848 pixels wide, but it does not do this at all.  Here is what happens:

This won't work on the server side because the server doesn't actually know that the IWRegion has been repositioned on the browser side.

Quote:3. If the initial size of the browser window is sufficiently large (848 pixels or wider), everything behaves exactly as in 1. and 2. above.  In other words, IWRegion1 will stay centered, but oddly, if the browser window is shrunk smaller than IWRegion1 (say, to 500 pixels), IWRegion1 does NOT anchor at left position 24, but instead gets cut off at the left with no way to scroll to it.

That's basically the same behavior as (2) above.

Quote:4. If the initial size of the browser window is sufficiently small (less that 848 pixels wide), we get the results shown in the third screenshot (500 pixels wide).  Clearly, IWRegion1 is NOT centered, nor is is positioned at the (expected) left position of 24 pixels.  If we then maximize the browser window as seen in the fourth screenshot, you can see that IWRegion1 moves even further right - obviously not centered, nor what we want or expect.

This is not what I'm getting here. I see from the first screen shot that you have an "/$/" in your URL, which shows me that you are using IW 14, not 15.

A gazillion of stuff changed in rendering from 14 to 15 and this is not how it behaves in 15.

However, in IW 15 you will get precisely the same behavior as (2) above.

Quote:The only thing I have been able to determine is that it looks to me like perhaps AControl.Parent.Width does NOT report the true width of the browser window itself, but rather the width that Delphi thinks the form should be.  So if IWRegion1 is 800 pixels wide and is sitting at left = 24 and the browser window then opens with a width of 500 pixels,  AControl.Parent.Width reports back a width of 824 instead of 500, which of course would throw off the centering math, yet even that doesn't match up with the observed behavior.

Again I think this is a difference in behavior of IW 14.

However, you must have in mind that IW reports the form width to be the document's ScrollWidth property which is not the same as the browser window width (similarly with the height).

So, whenever there is a scrollbar visible, the hidden region of the scroll area is also considered as being part of the form (otherwise it wouldn't know how to render outside the visible area).

See how IW 15 behaves when I start the application when the browser window is smaller than my region (attached). In that case I have some code at server size that resizes the region before rendering it.

   

I can see if we can slightly change the behavior in case (2), which I personally agree that is not optimal, but unfortunately nothing that we change can be back ported to IW 14 which has been discontinued. Is moving to IW 15 viable?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)