NAV Element

within the above four messages I identified and solved another three issues. Those where the remaining issues this MOD still had. It took me 4,5 Hours to do so. I think the Mod really turned out to be a very strong and cool nav in the end. I never had the intention to spend so much time though :wink: I hope my feedback will be useful for you ; ) There is still some work for you to do I guess, but you might be able to benefit from my investigations. I hope I was able to help you to spot the issues this mod still had. Also I hope I was able to help you improove your template Mod with my above suggestions :wink:

On this community-board I happen to hit the send-Button (for sending my messages) a bit too early (pretty often) :slight_smile:

Afterwards I usually re-edit my messages in order to further improove them!

My improoved messages are probably only visible Online on https://community.anymod.com

I guess the email forwarded to you via the community-tool might contain my initial version of my messages. And not my improoved message-content.
Improoved messages can be read online :wink:

It might always be best to read my messages online, instead of the Email you might receive via the community tool.

Is there anything I need to do for you Damion, to be able to access my latest nav-mod with ease? See:

http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html#something

Thanks for the feedback. I ended up removing that media query you were talking about to fix the highlighting on mobile, so thanks for finding that.

Regarding your updates you made to the mod here: https://anymod.com/mod/llorrn I wasn’t able to access it, you’ll have to clone it into a public project for me to see what you’re trying to do.

Glad to see you’re able to get it to work for your needs. Feel free to reach out if you run into any issues :+1:

Hi Damion,

actually I am not fully aware if you are a member of the core Anymod-Team. Or are you an external freelancer for anymod? Or if you are just another anymod-user?

I mean, up until now, I thought you might be a core-developer within the anymod Team. But I might be wrong.

AnyMod.com might have a desire to update the template-mod , also regarding the other two Issues I identified, those two are still open. And those issues are not just my issues solely. It is not about making it work for me alone. I already wrote those issues are general issues . They need to be fixed in the TEMPLATE I belive. And two of those general issues are still open.

I cloned the NAV into a public project for you to take a look at the code. As mentioned, you might have to improove my code before you can integrate the solution into your template-mod. I am pretty sure my solution needs some improovement with regard to the function highlightLinks() . I stopped working on it the very moment the solution started to work. Please refer to my above post if you need more information about what the problem was and how I solved it. I took the time to note all this down for you.

And , there is one other issue still not tackled. As I already stated that second issue is related to ALL! Iphones and Ipad Devices, (not just the old ones). Okay, so , I feel anymod might be interetsted in fixing that issue within the template-Mod as well, are you not? You might be aiming for a Template Mod that users will love. I feel it was some work for me to find those errors and to report them here. I would love in return to not develop the Fixes myself. If you cannot confirm the issue on your IOS device, I would be glad if you drop me a line after you tested this.

Below you will find the Link to the public mod , so I hope you will now be able to access my mod. After you improoved my solution further, you might be able to integrate it into your anymod-Template-Mod.
As mentioned the IOS Issue is not yet solved, but I already found out where it derives from. See my above suggestion. I researched and wrote it all down for you.

Please let me know if anymod is willing to fix those remaining two issues within the template mod, or if I shall try to develop the solutions on my own, as you suggested.

Best Stefan


and
https://anymod.com/projects/8P74P9/dashboard

Okay, actually I merely intended to invest some more time to find out IF I can maybe solve that issue on all IOS Devices ON MY OWN, but that only brought up further insufficiencies with this NAV!!

A: Closing an opened submenu ist almost impossible on my android phone

B: On Android (and probably also on ios) clicking on the dropdown-Icons next to the sbmenu-Headlines will drop down the submenu. BUT clicking on that link itself will unwantedly open the URL, instead of merely opening the dropdown . There is a workaround, which is to not provide a URL for that Href-attribute. That means I will only enter a hashtag as the href Attribute. But doing so will interfere with the highlighting again !!! At least the way I improoved the highlighting (for it will now disregard hashtags and only check if the Filename itself is identical )

I am so fed up with this NAV! ! ! ! !

My customer will go LIVE on Monday, and the Template NAV is still in no condition to be used . You promised to fix it some 30 days ago. What am I to do now?!

I feel I will go live with the current (old) Nav , including all insufficiencies.

And I will just let my client know Anymod.com did not deliver as they promised.

And Yes: I have totally NO INTENTION to use any of your other NAV-Modules, because I fear those will almost certainly be just as flawed as this one.

I have had it!

The website will go live with your insufficient Mod on Monday

That is what will happen.

I am not happy about it at all

Hi Stefan, very sorry to hear you are having difficulties with this nav. We are still not able to access your mod since it is private (@damion is a member of the core team). This would help a lot in troubleshooting on our end.

In our testing of the parent mod (https://anymod.com/mod/navbar-shapely-mladdn?preview=true) on an Android phone, clicking anywhere other than the expanded dropdown will close it. For your concern about (B), we will plan to simplify the configuration so that it’s not in the JavaScript and doesn’t nest multiple levels deep. That seems to be causing a lot of the problems. Can you also let us know what device(s) you’re using so that we can try to replicate more of these issues?

This navbar is more complex than a lot of the other ones, so it is more complicated to configure and make changes to, and most of the configuration is in the JavaScript. In your opinion for future navs, would you rather we keep them simpler and easier to configure, or would you rather we have some that are more complex, assuming all the bugs have been worked out?

it was like this:

NOW I added this

is the project public now?

otherwise pls provide your emailadress again, I will add you as an admin to this project

Hi Stefan, yes we can see it now. Thank you!

We are reworking the entire mod to simplify it and will verify that it works properly on all devices.

Hi Stefan, we have significantly re-written this mod into a new mod and will replace the old one shortly.

Here is the new one: we think it solves all of the issues. It has been tested extensively on desktop, iOS, and Android:

first impression:
the new nav is working much more stable than the old one. It seems to work very well on ios and android and on Desktop during my first testrun. Also the SCSS now looks a lot cleaner to me, this is great, because it will be much easier for me to customize and maintain!

deeper Analysis:
I summed up my test-experience below. Some things still might need to be fixed. I took a deeper look. PLS see below URLs also:

https://anymod.com/projects/8P74P9/

http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html#latest-version
user: sky
pass: power

Furhter feedback:

A: FEEDBACK about HIGHLIGHTING :
There is no highlighting in either of the above cases. A quick peak into the JS-Code suggests you might have rewritten the old Function called highlightLinks() inside of the new code. The reason for the ERROR seems to be your use of this string: window.location.hash , am I right? I might be wrong though…:slight_smile: I am not sure about the logic you intend to use here. I will be grateful for any Update you might be able to provide. I used to align the BOLG-Link with the Test-Page-document-filename for this URL
{ name: “current! Link”, link: “anymod-test.html”, target: “_blank” },
But calling this URL does not highlight the BLOG-Link. But it SHOULD happen in each of the three below cases:
http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html#hashtag
http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html?questionmark
http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html

B: SCROLLING Hides the Menu undesiredly ON MOBILE when scrolling minimal height:
While I tried to open the submenu on a Mobile device, I happend to accidentially scroll down the page just 1px in height. That caused the entire Menu to close. In general, this is great. And it indeed is the desired behaviour. I just think it would be much better if the menu only closes once the user scrolled down for more than 15pixels. That would prevent the menu from disappearing undesiredly.

C: PERSONAL PREFERENCES AND GENERAL FEEDBACK

1: - On MOBILE devices I would love the NAV to be positioned FIXED, but that is just a personal preference. Along with the fixed Position the following solution might further improove the Menu: The NAV might be visible on scroll UP and not be visible on scroll DOWN. I integrated this functionality into my MOD in the below URL via jquery:
http://skysails-power.com.w00edd9f.kasserver.com/advantages.html
Also, on that page the mobile-NAV will always be visible IF the user has reached the bottom of the page. Other than at the bottom of the page: The nav-Element itself will disappear on scroll(down), and reappear on Scroll(up). A lot of cool NAV-Elements behave this way on Mobile today. This might be considered as a nice to have (as already mentioned). I think it is very cool to have! Once the user is somewhere at the lowest 50 pixels of the document, the NAV will always show up (no matter if we scroll up or down). This enables the user to easily access the NAV once he has reached the end of the Document (the end of the page). See example URL to watch the result inside of my live-Mod

3: - we might add an Alt-attribute to all Links ?

4: - The below url documents an Issue which is unrelated to the mod-template: that error only exists inside of my customized version. That means you do not need to look into it. It is an issue I created and therefore I will solve it on my own. https://i.snipboard.io/jeE34B.jpg

I peaked into some cross-browser testing. My test was by no means complete. I almost instantly ran into the following finding: The entire Menu is not visible at all with some Browsers/devices. See detailed findings below (you are welcome)

The highlighting did not work while I was testing your latest solution. Please see my test-environment (links can be found within my above Post-message). I did not change anything. I merely entered filelnames as the href -attribute-Values (instead of the Hashtags you used within your template demo).

Can you confirm your solution does not work if Filenames are used instead of Hashtags? Please confirm.

Please look into it one last time. Please provide a hint as to why the highlighting does not work.

My above description might help you get started. My impression is your Nav-Mod still is probably not production ready. It cannot be used the way it currently is.

Should I attempt to fix the issue your Template-Mod still has , or may I ask you one last time to improove your Template-Mod?

Sorry for beeing so very pushy, but I need a soultion here soon. The page is supposed to be live by the end of the week, and once your template-mod is ready to be used, I still have to modify it and customize it (again) in order to integrate it into that new webpage (again). Thus, Time is pretty pressious. I would not bother you, but after all, I feel it is a Template issue and you might want your template to be ready for production use for other users too. If this issue was relevant for me alone, I would certainly not bother you.

Hi Stefan, there is a lot of information here, and it’s not clear what issues remain and what issues you had but then were non-issues. We’re developing a template to help report issues so that we can streamline fixes. Can you list some simple bullet point(s) about the problem(s) you’re still seeing?

Also please make sure anything you share is accessible for our team – the links above were all password protected. Thanks!

Hi Tyler,

below please find a dense version of the remaining issues.

https://anymod.com/projects/8P74P9/

http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html#latest-version
user: sky
pass: power

PS: the bulletpoint number one is the most important point (Highlighting). The bulletpoint number two (Scrolling) might be a quick fix for you. And bulletpoint three (fixed mobile menu) is merely and enrichment-opportunity with further potential functionalities, but nothing needs to be fixed here.

Hi Stefan, 1 and 2 should both be resolved now:

We will leave the 3rd bullet point to you since it’s personal preference and should be a straightforward CSS rule. Thanks again for reporting!

Hi Tyler,

Thank you for the time and efford you invested into fixing this Mod !

I tested your fix. The highlighting works, IF only the filename.html is requested.

The new Mod also works if the filename.html?someExtraInfo is requested.

But if a Hashtag is used in addition to that filename, then the Highlighting-Function will fail :

http://skysails-power.de.w00edd9f.kasserver.com/anymod-test.html#WithAdditionalHashtag

I will use the fixed Version as it is although it still cannot handle filename.html#Hashtags.

I am grateful for the Mod beeing fixed.

thank you for this fix again.
Have a fabulous Day.

Because this issue was so very time-intensive I would like to say thank you again for your ongoing support.

http://skysails-power.de.w00edd9f.kasserver.com/mobile.html
user: sky
pass: power

Yesterday I finally managed to implement your template on my clients webpage successfully. Integrating and customising took almost 2 hours, but it was a smooth and frictionless process. I am glad about it.

Additionally I decided to position the Nav fixed, when on Mobile, and to have the Nav-Header vanish on scroll down and re-appear on scroll up (plus always appear at the bottom of the Document).

I think this Nav-Element now became a fully fledged error-free beautiful and functional Element.

Again, thank you for the template!

PS: If hashtags are used within the URL, the Highlighting will no longer work. But as my client does not intend to use Hashtags on this webpage, I decided to drop that issue and ignore this potential weakness of the Mod. For my usecase the highlighting is working well enough. I feel this highlighting-Function is so valuable, it might be worth integrating it within all NAV-Mods :wink: (in the anymod-Template-libary)
filename.html#HashTagsWillInterfereWithHighlightingCurrentLink

The navbar and page look great! Nice work :+1:

Not matching the hash was intentional, as there are a few scenarios where you wouldn’t want that: a “Home” link would always remain highlighted on pages with scrollable sections, and also many modern apps use the # for routing. It is always a trade off for use cases!

I can see your arguments, understood :wink: That is true, it is always a trade off ; ) Okay, And thanks for the Feedback! I also think the navbar is indeed nice, but the website itself is lacking beautiful Images, but that is my clients responsibility :wink: