Collapsing Header - simulate effect from Freeway #header #layer

I’ve just started playing around with XWay and have to say, I really like what I’ve seen so far. I worked through the tutorial and now I’m looking to make a simple site to understand better.

One aspect of the web as we know it today, that always puzzles me, is why page header so often completely disappear when we scroll down the page. It seems to break some branding golden rules, but also seems to me to gain nothing when it switches to a hamburger menu, as the space either side is often just empty.

I used a simple method in Freeway, using smoke and mirrors, to collapse a large header down to a small header when scrolling. It used layers, fixed in window position and absolute position. I’m having trouble seeing how to do this in Xway. I understand that layers are not possible, but it appears that everything must be inside the page-wrapper, so I can’t place one object on top of another… or can I??

Here is a test site using Freeway, which shows the technique I would like to emulate:
TestCollapsingHeader

Here are a couple of grabs of the file in Freeway:
CollapsingHeader1
CollapsingHeader2

Any pointers on how to achieve this will be much appreciated. :slightly_smiling_face:

Hi Grant,

Xway doesn’t use the term “layers”, but boxes that have Absolute or Fixed position are equivalent to layers in Freeway.

To create an absolute or fixed position box in Xway, insert a box and choose Absolute or Fixed from the Position menu in the Style section of the Box Inspector.

Boxes with absolute or fixed position need to be used with care, because they don’t respond to changes in the position or size of other items, but that’s less of a problem if you place them at the top of their parent item. If it works in Freeway, there’s no reason why it shouldn’t work in Xway.

Jeremy

Hi Jeremy,

thanks for the reply.

I’ve tried every variation I can think of, but whatever I do, the scrolling text is always visible in front (on top of) the fixed block. Is there a way to change the order in the way that you can with layers?

Since an image is worth a thousand words… here’s a screen-grab

and since a file is worth a thousand other words… here’s my test file


As an aside … during this test, I find myself trying to select and move/drag, or copy/paste boxes. It seems you can’t do this, either via the Site panel, nor via the actual items themselves?

Hi Grant,

Z-Index controls the front-to-back order of items. There’s more information on this in the manual, but if you set the z-index of the text box to be -1, it will be positioned behind the other boxes.

You can’t reorder boxes in the Site panel yet, but you can move/duplicate them in the Page view (since b2). Hold down Option to duplicate: this only works with inflow boxes (currently), but it’s easy to convert from absolute/fixed to inflow (relative/none) and back.

Copying and pasting boxes is on our to-do list.

Jeremy

Hold down Option to duplicate: this only works with inflow boxes (currently), but it’s easy to convert from absolute/fixed to inflow (relative/none) and back.

… although a simpler way of duplicating an absolute/fixed box is to choose Duplicate from the Edit menu (Command-D).

Jeremy

Thanks Jeremy!

There’s more information on this in the manual

I already looked online at Softpress.com for a manual… but of course, there is a menu called ‘Help’. Duhhh.


May I add, that with this initial brief foray into Xway, I think you are building a really really excellent app. I already like the Mac layout, with panels each side, as in Pages, but aside from that, I feel that I’m looking at an app, that has been really well worked out, with a lot of careful thought and a really nice UI, e.g., the button bars at the top are so incredibly simple compared to FW. I find myself just automatically going full-screen, which of course, works really well with the Xway help app Tiled narrow down one side. I think it is going to be easier to use than Freeway, by an order of magnitude. :sunglasses:

I’ve made something a bit similar to this in Xway: the bar at the top of the page is fixed in position while everything else scrolls. Beneath it in this case, although that’s just how I designed it. https://www.panoramaphotographer.com

k

I like it , very clean.

On Jul 1, 2020, at 3:45 AM, grantsymon email@hidden wrote:

Thanks Jeremy!

There’s more information on this in the manual
I already looked online at Softpress.com for a manual… but of course, there is a menu called ‘Help’. Duhhh.


May I add, that with this initial brief foray into Xway, I think you are building a really really excellent app. I already like the Mac layout, with panels each side, as in Pages, but aside from that, I feel that I’m looking at an app, that has been really well worked out, with a lot of careful thought and a really nice UI, e.g., the button bars at the top are so incredibly simple compared to FW. I find myself just automatically going full-screen, which of course, works really well with the Xway help app Tiled narrow down one side. I think it is going to be easier to use than Freeway, by an order of magnitude. :sunglasses: