Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 10 of 16 total
Thread sticky elements and visual inheritance
Fri, Jun 22 2018 8:18 AMPermanent Link

ooptimum

Is it possible in EWB to make sticky elements, as sticky navbar in this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky ?

Traditionally this is done through tracking the vertical displacement of the viewport. To do this I created scroll event handlers on my intentionally long (by Y axis) form, both via window.addEventListener and form's onScroll, just to watch on Application.ViewPort.ScrollTop and window.pageYOffset values, but their values do not change and always remain zero, although the handlers themselves are definitely called (I count number of calls too). How can I track vertical position of the viewport?

How to create visual inheritance of forms? For example, the menu bar and the bottom panel should be present on all pages of the site whilst the inner part will differ. I don't want to repeat these parts on every form (page). It's waste of resources IMO. Is it possible to visually edit the inner parts as independent forms and then insert it into the template form as needed?

I really want to try EWB in creating a new project, but unfortunately, I drastically short of time now, so I have to decide whether I use it this time or not, and I can't find the answers to these questions myself. So please help me.
Fri, Jun 22 2018 8:53 AMPermanent Link

Alan Questell

Richmond Community College

Don't know if this is exactly what you are looking for, but see this page built with EWB exclusively:

http://engineering.richmondcc.edu/rcc/cr/rccsacs.html

I used a TBrowser as the document viewport on a form and it scrolls independently.  

Maybe that will give you an idea.

ooptimum wrote:

Is it possible in EWB to make sticky elements, as sticky navbar in this example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky ?

Traditionally this is done through tracking the vertical displacement of the viewport. To do this I created scroll event handlers on my intentionally long (by Y axis) form, both via window.addEventListener and form's onScroll, just to watch on Application.ViewPort.ScrollTop and window.pageYOffset values, but their values do not change and always remain zero, although the handlers themselves are definitely called (I count number of calls too). How can I track vertical position of the viewport?

How to create visual inheritance of forms? For example, the menu bar and the bottom panel should be present on all pages of the site whilst the inner part will differ. I don't want to repeat these parts on every form (page). It's waste of resources IMO. Is it possible to visually edit the inner parts as independent forms and then insert it into the template form as needed?

I really want to try EWB in creating a new project, but unfortunately, I drastically short of time now, so I have to decide whether I use it this time or not, and I can't find the answers to these questions myself. So please help me.
Fri, Jun 22 2018 9:13 AMPermanent Link

Uli Becker

>... but their values do not change and always remain zero, although the handlers themselves are definitely called (I count number of calls too). How can I track vertical position of the viewport?

Most likely you are scrolling the form and not the viewport.
In order to change that you would have to set the height of the form depending on its content, setting its "SrollBars" property to sbNone and using

      Application.ViewPort.OverFlowY := otAuto;
   Application.Surface.Constraints.Min.Height:= MyForm.Height;

You can also use the built in Viewport.OnScroll event.

>
> How to create visual inheritance of forms? For example, the menu bar and the bottom panel should be present on all pages of the site whilst the inner part will differ. I don't want to repeat these parts on every form (page). It's waste of resources IMO. Is it possible to visually edit the inner parts as independent forms and then insert it into the template form as needed?

Just put a menu bar, a BasicPanel (for the inner part) and the bottom panel on your main form.
Then

MyPageForm1.Parent := MainForm.InnerPanel
or
MyPageForm2.Parent := MainForm.InnerPanel;

Setting the inner panel's property Autosize.height will make sure there is enough space for the embedded form. (Don't forget to set the Layout.Consumption property of the embedded form.)
Using EWB's fantastic layout functionality will control the bottom panel's position.

Uli
Fri, Jun 22 2018 9:15 AMPermanent Link

Walter Matte

Tactical Business Corporation


To follow on to Uli comments... see Uli's BasicDemo ....

https://www.elevatesoft.com/forums?action=view&category=ewb&id=ewb_demos&page=1&msg=236#236


Walter
Fri, Jun 22 2018 9:18 AMPermanent Link

Uli Becker

Hi Walter,

> To follow on to Uli comments... see Uli's BasicDemo ....

Completely forgot that. <vbg>

Uli
Fri, Jun 22 2018 11:03 AMPermanent Link

ooptimum

> Maybe that will give you an idea.

Alan, I know about TBrowser. It's not exactly what I looking for. Thank you for your suggestion, anyway.

> Most likely you are scrolling the form and not the viewport.

Sure I scroll the form. I'm amazed at how this is done internally in such a way that the browser does not even suspect that something is scrolling inside it. I need to dig into the sources to answer this, but I have no free time for the moment.

> In order to change that you would have to... You can also use the built in Viewport.OnScroll event.

I have not tried your advice yet, but I suspect that this way I will make the browser see the very fact of scrolling content? To me, in effect, it does not matter if the browser sees it or not. It is important for me to know, in principle, is it possible to make such a sticky panel this or that way or not?

Thank you, Uli, for your advices and demo. Walter, thank you too.
Fri, Jun 22 2018 11:32 AMPermanent Link

Uli Becker

> Sure I scroll the form. I'm amazed at how this is done internally in such a way that the browser does not even suspect that something is scrolling inside it.

I always prefer to scroll the viewport with the vertical scrollbar at the right side of the screen, so that you can use the mouse wheel outside the form (if the form is smaller than the screen).

If you scroll the form you should use the form's "OnScroll" event and the form's "ScrollTop" property, not the ViewPort events/properties.

Uli

Fri, Jun 22 2018 11:58 AMPermanent Link

ooptimum

> I always prefer to scroll the viewport with the vertical scrollbar at the right side of the screen, so that you can use the mouse wheel outside the form (if the form is smaller than the screen).

I do not quite understand why this might be necessary. Anyway, I have a vertical scrollbar. As I see it, it is drawn by the application, not by browser.

> If you scroll the form you should use the form's "OnScroll" event and the form's "ScrollTop" property, not the ViewPort events/properties.

Bingo! That works for me. It's a pity that there is no autocompletion yet, to see all the methods and properties. Otherwise I could find it myself.

Anyway, it seems that I contradict myself. In fact the browser sees the scrolling, because it generates an event, yet the viewport does not shift at all. Maybe this event is generated inside virtual DOM? Is virtual or shadow DOM used here?
Fri, Jun 22 2018 3:08 PMPermanent Link

Uli Becker



>I do not quite understand why this might be necessary. Anyway, I have a vertical scrollbar. As I see it, it is drawn by the application, not by browser.

I didn't explain it well:

If you scroll the form, you use the form's scrollbars, if you scroll the viewport, you use the browser's scrollbars.
With the latter you are able to scroll by using the mouse wheel anywhere in the browser.

I'll try to post a sample tomorrow since that seems to be of general interest.

Uli
Fri, Jun 22 2018 3:44 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

<< Is it possible in EWB to make sticky elements, as sticky navbar in this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky ? >>

I've attached an example of how to do this.  The relevant code is:

procedure TForm1.ScrollPanel1Scroll(Sender: TObject);
begin
  if (ScrollPanel1.ScrollTop > LastScrollTop) then
     begin
     if (ScrollPanel1.ScrollTop >= (BasicPanel1.Height-HeaderPanel1.Height)) then
        begin
        BeginUpdate;
        try
           with HeaderPanel1 do
              begin
              Parent:=Form1;
              Layout.Position:=lpTopLeft;
              Layout.Stretch:=lsNone;
              Width:=BasicPanel1.Width;
              end;
        finally
           EndUpdate;
        end;
        end;
     end
  else if (ScrollPanel1.ScrollTop < LastScrollTop) then
     begin
     if (ScrollPanel1.ScrollTop <= (BasicPanel1.Height-HeaderPanel1.Height)) then
        begin
        BeginUpdate;
        try
           with HeaderPanel1 do
              begin
              Parent:=BasicPanel1;
              Layout.Position:=lpBottomLeft;
              Layout.Stretch:=lsRight;
              end;
        finally
           EndUpdate;
        end;
        end;
     end;
  LastScrollTop:=ScrollPanel1.ScrollTop;
end;

procedure TForm1.Form1Size(Sender: TObject);
begin
  if (HeaderPanel1.Parent=Self) then
     HeaderPanel1.Width:=BasicPanel1.Width;
end;

The key takeaways are:

1) You need a tracker variable for the last scroll position in order to determine scroll direction (note to self, add a "direction" parameter to the scroll events).

2) You need a panel that is part of the normal flow that "reserves" space so that the scroll bars are always accurate and don't jump around.  Initially, the nav bar is placed on this panel.

3) Once you scroll down past the height of the space on the panel that isn't the nav bar, the nav bar is removed from the panel that is part of the scrolling content and "floated" on the actual form (doesn't consume any space), using the width of the panel to make sure that the you size the width of the nav bar so that it matches the width of the panel with the scroll bar visible.

4) When you scroll up past the height of the space on the panel that isn't the nav bar, the nav bar is re-parented with the panel and the nav bar layout is adjusted so that it stretches right again, etc.

If you want to put panels, etc. underneath the panel at the top of the scroll panel, just make sure to specify the Layout.Consumption property for the panel so that everything under it shifts accordingly.

<< Traditionally this is done through tracking the vertical displacement of the viewport. To do this I created scroll event handlers on my intentionally long (by Y axis) form, both via window.addEventListener and form's onScroll, just to watch on Application.ViewPort.ScrollTop and window.pageYOffset values, but their values do not change and always remain zero, although the handlers themselves are definitely called (I count number of calls too).
How can I track vertical position of the viewport? >>

You're mixing JS with EWB code, and that's a recipe for problems with EWB.  EWB maintains a UI layer *over* the underlying DOM in order to optimize DOM updates and provide an easier-to-use interface to the underlying platform.

If you want to track scrolling of the browser viewport, you can simply use this event:

https://www.elevatesoft.com/manual?action=viewevent&id=ewb2&comp=TViewport&event=OnScroll

like this:

Application.Viewport.OnScroll:=MyScrollHandler;

and you can set it up in the your main form's OnCreate, etc.

<< How to create visual inheritance of forms? For example, the menu bar and the bottom panel should be present on all pages of the site whilst the inner part will differ. I don't want to repeat these parts on every form (page). It's waste of resources IMO. Is it possible to visually edit the inner parts as independent forms and then insert it into the template form as needed? >>

You can't use visual inheritance with EWB, at least not yet.  However, you *can* parent any form into any other container control, and that includes other forms, so you can have a main form with a container on it, and simply add other forms into the container by doing this:

MyOtherForm.Parent:=MyPanel;

So, you can create your forms as you normally would, and just make sure that they are all set so that Visible:=False.

Tim Young
Elevate Software
www.elevatesoft.com



Attachments: navbarscroll.zip
Page 1 of 2Next Page »
Jump to Page:  1 2
Image