*** SOLVED *** Menu with scrollspy does not work as expected
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
MUST READ:
http://www.wysiwygwebbuilder.com/links.html
*** SOLVED *** Menu with scrollspy does not work as expected
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.
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.
Last edited by Markus on Fri Aug 23, 2019 2:58 pm, edited 2 times in total.
Re: Menu with scrollspy does not work as expected
The link to the file does not work for me.
Re: Menu with scrollspy does not work as expected
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
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
Re: Menu with scrollspy does not work as expected
I'm sorry, but this download link does not work either.
All I get all kind of suspicious links to executables, bitcoins ads etc...
All I get all kind of suspicious links to executables, bitcoins ads etc...
Re: Menu with scrollspy does not work as expected
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
I put it on one of my servers again. Would you please try this again?
Link deleted
Thank you.
Markus
Last edited by Markus on Fri Aug 23, 2019 10:05 am, edited 1 time in total.
Re: Menu with scrollspy does not work as expected
When I click the link then the server responses with
"403 Forbidden"
"403 Forbidden"
Re: Menu with scrollspy does not work as expected
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
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
Re: Menu with scrollspy does not work as expected
The website is still not accessible for me.
It may be quicker to email the file: support@pablosoftwaresolutions.com
It may be quicker to email the file: support@pablosoftwaresolutions.com
Re: Menu with scrollspy does not work as expected
Ok, thank you. I sent you an email with the testproject.
Markus
Markus
Re: Menu with scrollspy does not work as expected
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
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
Re: Menu with scrollspy does not work as expected
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
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
Re: Menu with scrollspy does not work as expected
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?
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?
Re: Menu with scrollspy does not work as expected
I'm sorry, this feature was not designed to be used with master pages.
Maybe in a future release.
Maybe in a future release.
Re: Menu with scrollspy does not work as expected
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
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
-
- Posts: 5328
- Joined: Thu Aug 16, 2007 7:32 pm
Re: *** SOLVED *** Menu with scrollspy does not work as expected
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
viewforum.php?f=26
Re: *** SOLVED *** Menu with scrollspy does not work as expected
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
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
Re: *** SOLVED *** Menu with scrollspy does not work as expected
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.
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
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">
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