link to heading on a different page

[zawadil]

Hi Acorn,
as I already wrote within my last thread, I am not able to make links to headings between different pages working.
The small sample has just two pages, ea. 960px and 480px. Link to a heading on the same page works, but a link to a different page, just shows the top of the linked page and doesn´t move to the related heading.

I think I can remember, that I have seen it partially working in the past, which means it worked for the desktop version (>=960px) but not for the mobile version (480px) at the same time. This time, with my sample it neither works for the desktop version nor for the mobile version.

In general it would make my work easier with bigger web sites to handle all links for both versions (desktop and mobile) .

Thank you in advance for your assistance.

Best regards
Erwin

a short add:
Playing around with my sample, I see different 3 different behaviors
a) works: positioning is fine, the heading is visible
b) partially works: positioning is not correct, as below the heading / the heading is not visible
c) does not work: just jumps to the top of the related page as I mentioned above

[Acorn]

Erwin, I Previewed your pages and all Heading Links across Main and Variant work properly.
I even added a repeating Sticky Table of Contents and its Links also jumped between pages.

All I can imagine is your Browser is getting clogged up with prior revisions.
You can try pressing Ctrl+F5 to clear the browser cache.

What also works for me is closing and re-opening the Xara application.
This way, the built-in server path is changed and so there should be no prior cache to clear.

Acorn

[zawadil]

Acorn, this is very strange.
Instead of proper working I only can see the 3 different bahaviors as I already described

a) works: positioning is fine, the heading is visible, this happens rarely, mostly only after using the browser back button in combination wiith Ctrl+F5

b) partially works: positioning is not correct, as below the heading / the heading is not visible - for me it seems the positioning adds 120px (60+60px desktop version) and 140px (80+60px mobile version)

c) does not work: just jumps only to the top of the related page

I have placed my sample to a separate sub directory of the public available website at

https://www.astco.com/eval/index.htm

to avoid any influence, maybe caused by my local test enviroment.

I want to ask you to try the above address.

Thank you in advance for your assistance.

Best regards
Erwin

[Egg Bramhill]

Hi Erwin I can see the issue you're having and it's being caused by the sticky bits at the top. Whilst on the Home page clicking on either 'overall' or 'terms' does scroll down correctly to that section allowing room for the stickies. However when you go to Page 1 and click to link back to 'overall' or 'terms' on the Home page Xara doesn't allow the gap for the stickies when rendering the page thus the anchor is at the very top with no allowance for the stickies.

To check, remove the stickies from your draft page on all pages and the links work correctly.

The only way I can see around this is to add additional return links but it starts to become a dogs-dinner very quickly.

example xar attached.

VIDEO

[Acorn]

@Egg, thank you for spotting what I missed.
Any jump to an Anchor places the Anchor at the top of the page, here, under the menu bars.

There is a CSS solution that appears to work for this example design.

The deepest top menu is on the Variant and is 140px; Main is 120px.
Having two different height complicates matters so I settled on the largest.

Add this CSS to Website Page (code):

<style>
[id*="HeadingAnchor"] { 
  scroll-margin-top: 140px;
} 
</style>

[zawadil]

Hello Egg, hello Acorn,

1st of all thank you for your support.
Espacially @Egg, preparing a video to explain, is impressive and finally brought me to the track.

But let me explain,
1) it was already my initial suspicion, that the sticky objects cause the problem
2) Playing around with Egg´s .xar I found no major improvement, which means it works sometimes, but not all the time
3) I used Acorn´s CSS in my own sample and have seen the same result
4) That was the point, where I´am started to go around circles. From Egg´s video I had in mind, that he used Firefox, whereas I always use Chrome. I tried it it with Firefox too and ´BINGO´.
5) I added the CSS to my own sample file, which can be found again at

https://www.astco.com/eval/index.htm

You can use both browsers side by side and see, that with Chrome it sometimes work but all the time with Firefox.

Although the CSS from Acorn is genious to fix it, I will not be able to use this function, with this cross-browser incompatibility

In general and for my understanding, link to heading on a different page faulty effected by sticky objects on the top of a page is basically a fault of Xara Designer Pro X and should be reported to the developers.
Whereas the need to have same sized sticky objects for desktops and mobile is actually also a weakness.

Thank you both again for your engagement.

Best regards
Erwin

[Acorn]

Erwin, we must have vastly different environments.
I have the exact same performance and presentation from Edge, Opera, Firefox and Chrome.

The coding is valid for all these since late 2019 with Firefox having 40 updates since then to date with all working.
https://caniuse.com/?search=scroll-padding-top.
Browser coverage is over 95% (removing IE and niche Android browsers).

As your page heights are quite short, you may appear to be getting a fail as the Terms anchor cannot reach the top of the page.

Consequently, I have not seen any browser differences.

As I said before, hitting an anchor puts the anchored text or shape at the top of the page.
The Sticky objects will therefore hide the anchor. This is how HTML works.

What I said about handling differences in the top sticky objects' height was that needed to be factored in.
The way to detect a width change to a Variant is the html or body classname increments into a Variant and decrements in the other direction. To my mind, setting a common height for the stickies was a fair compromise. Why would I go to all the trouble of coding something that might not be needed?
Instead, you might considering looking at adjusting the vertical page offset on the Variant by the 20px difference. Changing the page origin is a whole new mind game.

Acorn

[zawadil]

Acorn, it is strange, that you see no differences between Chrome and Firefox. I will check my local enviroment, ie. chrome Browser setting and maybe I can clear it up.
Thank you for your time.
Erwin

[Egg Bramhill]

Erwin I concur with Acorn. There is no difference beween all 3 major browsers on your eval page:

VIDEO

[Acorn]

Hi Erwin, rounding off this interesting Thread.

What you can do is change the origin point of Main and Variant separately.
You place your Sticky objects touching and above the top of the page. They must be Sticky but Stick at Top also works.
You display Rulers and drag the top-left origin cross to the top of your menubar.
Perversely, Text or Text Inside boxes need to touch the top of the page from below; they then appear on and over the menubar.

Any clicked Heading Anchor now scrolls to the top of the page, which remains just under your menubars and visible at all times.

No CSS code, no cross-browser mismatch, just Xara developers getting it right (with the exception of text).

Acorn