*** SOLVED *** Menu with scrollspy does not work as expected

[Markus]

Hello,
I want to realize a menu with scrollspy function.

For this I created a small test project.
The page consists of four text elements and a menu with four buttons (navigation bar) which link to the four text elements. Hover style and scrollspy are activated in the menu.

Unfortunately all 4 buttons of the menu are already displayed in hover style. I actually expected that only the currently displayed section (Text1 ... Text4) is displayed in hover style in the menu.



The project is attached. Can someone tell me what I did wrong?

Markus

Testproject: [link deleted]

btw: I couldn't figure out how to upload files to the forum, so i had to link the project externally.

[Pablo]

The link to the file does not work for me.

[Markus]

Hmm, thats weird.
Please try this. I uploded the project to an external file hoster (and removed the link from my post).

https://www.file-upload.net/download-13 ... T.wbs.html

[Pablo]

I'm sorry, but this download link does not work either.
All I get all kind of suspicious links to executables, bitcoins ads etc...

[Markus]

Hmm, I don't understand that. All links are working for me without dubious advertising etc.
I put it on one of my servers again. Would you please try this again?

Link deleted

Thank you.
Markus

[Pablo]

When I click the link then the server responses with
"403 Forbidden"

[Markus]

Hello Pablo,

thanks for your patience.

You're not accessing the side from Germany. I suspect that the web server was not configured correctly because I was able to reproduce the problem via a proxy in the Netherlands.

Now I have configured the web server so that the problem doesn't occur anymore when using the proxy server.

Sorry for the inconvenience, but I hadn't noticed this incorrect configuration until now, because the accesses from Germany work perfectly.

The link above should now work (at least it does so via a Dutch proxy server).

Kind Regards
Markus

[Pablo]

The website is still not accessible for me.

It may be quicker to email the file: support@pablosoftwaresolutions.com

[Markus]

Ok, thank you. I sent you an email with the testproject.

Markus

[Pablo]

Thanks for sending the file.

The implementation is not correct.
The anchors should be on the same page. And although you have selected the current page in the link properties, for the browser this is another page.

1. Clear the link to the 'page2'
2. Now select the anchor without selecting a page.

Also, I think you will need to use bookmark objects.

Related tutorial:
http://wysiwygwebbuilder.com/affix_and_scrollspy.html

[Markus]

Thank you very much, Pablo.

It now works as expected in my test project.
Since other elements are also displayed as targets for the menu on the left, I assumed that I could also use them as bookmarks. Unfortunately I was wrong.

Will hope it also works with a menu on a masterframe using a content placeholder... I'll keep you informed.

Great support, thanks!

Markus

[Markus]

Oh man, it's not that easy.

If the menu is on a masterframe page, then I can select a bookmark without specifying a page name, but after closing the properties dialog of the menu an external link is created instead. When I reopen the property dialog ofn the menu it looks like this.



This works very well on the main page, but if I want to switch from a subpage back to the main page, then nothing happens, because the browser does not know which page to load.

If the mainpage is named "index.html" and the currently displayed page ist "impressum.html", then the link to the main page is named "impressum.html#Home", but it have to be "index.html#Home".

So, is this case solvable?

[Pablo]

I'm sorry, this feature was not designed to be used with master pages.
Maybe in a future release.

[Markus]

Okay, thank you for your efforts and your explanation, Pablo. As I said, excellent support, nowhere else I've got faster reactions and help. Chapeau!

I have now tried some constellations and come to the following solution.

Given is:
The masterframe menu is 120 pixels high.
The first (top) section to be displayed has a top padding of 60 pixels.



Above the section is the bookmark placed as target for the link.



To display the section correctly in both cases (jumping from the main page and jumping from a sub page) I had to set the following:

In the bookmark properties I have to set 183 pixels as offset, so that the section is displayed correctly when navigating within the main page.

I don't know why it has to be set to 183 pixels, because the menu height and padding of the first section is only 180 pixels in sum. But 180 px would be too few, because then you could scroll up 3 pixels manually after jumping to the bookmark.



In the bookmark HTML property I have to insert the "offset trick" BeaconFries put me up to in another thread. This is the solution to get the correct align if the bookmark is jumped from another sub page. But here I have also set the offset to 183 pixels to align the section exactly to the top of view.



I think I can live with this solution.
Thanks Pablo and BaconFries for you assistance.

If someone else came across this problem, I hope this thread and my explanations can help.

Markus

[BaconFries]

Thanks for the "Thanks" but the real support is from Pablo.. Maybe you could do a little tutorial on how you solved and post it to the following:
viewforum.php?f=26

[Markus]

Hello BaconFries,

thanks for the hint to the tutorial section, but before a tutorial makes sense, it has to work correctly and be comprehensible.

Now that I'm doing the whole thing in a real project, it seems pretty strange and arbitrary in terms of pixel spacing.

As I said, the menu is 120 pixels high and the padding of the first section is 60 pixels large. That's 180 pixels in sum, but I have to set an offset of +183 pixels in the bookmarks properties to position the section exactly below the menu.

To get the same orientation when coming from an external page, you have to specify an offset of -183 pixels in the corresponding HTML section.

The second section is directly below the first one and also has a top padding of 60 pixels. The second bookmark is directly between the first and the second section. But now I have to set -26 pixels as offset in the bookmarks properties to align the second section pixel exact under the menu.

In the HTML properties of the bookmark, I have to set an offset of +26 pixels to get the same alignment.

Thats all a bit confusing and incomprehensible.











Apart from the inverted signs, I cannot understand the different offsets.

Markus

[Markus]

I'm starting to find out more and more.
The values are now traceable and consistent (apart from 1 pixel difference).

I have to place the bookmarks as the first element within the respective LayoutGrid, then the offset values for the bookmark have to be calculated consistently (menu height = 120 pixels plus Top Padding of the LayoutGrid = 60 pixels). The only difference is that I don't have to enter the calculated 180 pixels as bookmark offset, but +179 pixels.



The following sections (LayoutGrids) are similar. Here I have to add the 120 pixels of the menu and the top padding of the LayoutGrid (20 pixels). That's 140 pixels, but I have to add +139 pixels to the bookmark. Great, that's consistent and comprehensible now. What remains are the reversed signs when extending the HTML object of the bookmark - here I have to enter minus 139 pixels. But as mentioned in another post, it is possible that the Offset property field for the bookmark generally assumes negative values.

Code: Select all

<style>
.offset139 a {
  position: relative;
  top: -139px;
  }
</style>

<div class="Offset139">

Markus

PS: Damn, I mixed up the threads. All my "Offset"-posts should be placed in this thread (sorry for the confusion):
*** SOLVED *** A link to the first element (anchor) does not set view fully to top