I have used Webdialogs for lots of things without any issues but I now have a long scrolling Webpage and have a scrolling issue.
I want to use a Webdialog for some “popup” help. If the Webpage has been scrolled when the dialog is shown then the underlying Webpage always scrolls back to the top.
Is there a way to stop this behavior?
I confirm. Sheet and Modal Dialog do scroll the page back to zero. I believe it is due to the underlying code that creates these dialogs, so I do not see how a workaround could be possible.
However, Palette dialog does not do that. However, it displays relative to the webpage. So if it is scrolled, the palette will be pushed over the top.
You can get the scroll position with JavaScript document.body.scrollTop to manage the offset.
I was testing a workaround to capture the TOP value of the “HELP” button that causes the dialog to be shown and then return the underlying Webpage to the approximate same position with WebPage.SCROLLTO(x,y).
I will play some with Palettes to see if that is better.
Thanks.
[quote=242468:@Mark Strickland]I was testing a workaround to capture the TOP value of the “HELP” button that causes the dialog to be shown and then return the underlying Webpage to the approximate same position with WebPage.SCROLLTO(x,y).
I will play some with Palettes to see if that is better.
[/quote]
You can also use a styled WebContainer. But yet, the same need to position it relative to the current scroll position occurs.
It appears that if I capture the TOP on the button that invokes the PALETTE it “sort of” works if I use that to relocate the PALETTE TOP to somewhere near that value.
If I can get the document.body.scrollTop working then it appears I can do what I need and it will be pleasing.
Ahhhh it seems sometimes … “What Should Be Hard is Easy” and “What Should Be Easy is Hard”.
Here is the WebContainer solution, with a dash of JavaScript :
[code]
Sub Open()
me.ZIndex = 35000
dim js as string
js = js + “var myDialog = document.getElementById(’”+me.controlID+"’); "
js = js + "myDialog.style.position = ‘fixed’ ; "
js = js + "myDialog.style.top = ‘0px’; "
js = js + "myDialog.style.left = ‘400px’; "
self.ExecuteJavaScript(js)
End Sub[/code]
Use a style to have an opaque background, and do something like this to show :
dim d as new myDialog
d.EmbedWithin(self, (self.width-d.width)/2, 0, d.width, d.height)
The WebContainer will appear on top of everything, and it will not scroll. Its position is relative to the window, not the webpage. Note that the values in embedwithin are not the actual ones, which are in fact set by the javascript.
There is one issue, though : Xojo does not seem to know how to close it. But you can use visible = false instead.
If you want the grey shadow, I believe you could obtain something similar to sheet and modal dialog by displaying a large semi transparent WebContainer covering the entire page, with in its center the opaque small control (maybe a rectangle) that is the dialog.
I have worked a bit more on a custom dialog that does not modify the underlying page scrollposition.
Now it works like the real thing, including the option to show the grey overlay over the webpage, and it closes just normally.
I shall release it soon.
Does it fix the Resized event too?
Can you tell me more about that issue ?
You filed it. I ran into it recently with a customer.
<https://xojo.com/issue/39623>
I wrote a browser-side javascript to handle what your timer workaround does. Being entirely browser side it saves the traffic and server processing.
Sorry, I tend to forget once I have a workaround. Of course I bumped into it with RubberViewsWE.
My WebDialog is based on WebContainer, and not a subclass of the Xojo dialog. So it does not have the same issues, notoriously labels disappearing and resized firing only once, or reporting the size of the overlay black mask (the size of the window).
Cool beans!