Limelight Menu + Source Scroll Enabler: causing links to break on Android


My site uses smooth scroll for navigation. I am using the Source framework and am adding the Source smooth scroll enabler. I also am using the Limelight Menu for mobile navigation. When both of these are on the page and a link is clicked from within a Limelight (triggered by the LimeLight menu), the link is unresponsive on Android (when clicked the Limelight window simply closes without the page scrolling anywhere or going to the linked anchor on the page). The link does work on iOS.

When I remove the link from the Limelight Menu the issue resolves on Android. Also, when I remove the Source smooth scroll enabler the issue also resolves on Android (but obviously then there is no smooth scroll).

For reference, you can check out This page has been minimized…all javascript has been removed along with as many stacks as possible (the page only contains some Source stacks and the BWD Limelight Menu and Limelight stacks).

Is there any way to resolve this?

Many thanks for the assistance.

Can you tell us how this follows on from the previous post?

Do you believe that Android was never working after the previous resolution or is this something new?

1 Like

I’m not sure what might be going on with Android.

You could maybe try with an alternative smooth scrolling approach (e.g. this one works well - you just need to add the class of scroll into your link attributes along with the LL close class). If trying with this then remove the Smooth Scroll Enabler from the page and add the jQuery Enabler.

Note though that the Source Smooth Scroll Enabler does let you smooth scroll to anchors on different pages (which the method above does not). The last demo of your site used this I think?

@tav: This looks to be a different issue. With the original issue, the scroll was broken on the home page when the anchor link was clicked from another page (this happened on all OS’). This happened whether the anchor link was clicked inside Limelight or outside Limelight. Removing multiple instances of the Acuity Scheduling javascript embed from the home page resolved the issue.

With this issue, with the Source smooth scroll enabler on the page, on Android the anchor link (and, therefore, scroll) is broken on the home page when the link is clicked inside Limelight. It works when clicked outside of Limelight. In addition, when a home page anchor link is clicked from another page, the link works. The core issue seems to be the link breaking vs. the scroll breaking (I am guessing the scroll would still work if the link worked).

I hope this helps. Let me know if you have any further questions for clarification.

@habitualshaker: Thanks for the heads up on the alternative scroll javascript. On my dev site it does work on the home page and resolves the issue with broken links within Limelight (I still need to test this on my full test site but, unfortunately, haven’t been able to because my site went down). However, my site does have an additional page that has anchor links back to the home page. As you indicate the scroll doesn’t work in this scenario.

the anchor link (and, therefore, scroll) is broken on the home page when the link is clicked inside Limelight

Can you try adding the link inside the LL close element ( not sure whether you are using a launcher or just the class on another element):
in the simplest case, just put the link inside a stacks 1-col and add the limelight close class to the 1-col. When the link is clicked, the click event will still bubble up the DOM and hit the 1-col. The basic idea is that the link and the close class are not on the same element.

Given that this problem is only on Android I just wonder if it is the way that 2 events being bound to one element are handled by the smooth scroll js event handler.

I am currently finishing off the new non-foundation version of magicgellan which has its own custom smooth scroll. I’ve checked this on a friends Android phone and it works fine in both LL and the Facet menu system when the modals get closed. If you are still having problems then I will look at what is different that makes it work.

@tav: I removed the hbmenucontent-close class from the links and placed it on the Source containers (inner container) within which the links now sit. The issue persists. I think the easiest solution is to remove the Source smooth scroll enabler. For some reason I am not able to get the enabler to smooth scroll to the anchors on my home page from my additional page even when the pages are completely broken down and consist of nothing but links and containers. If this weren’t the case it would helpful to resolve the issue on the Limelight side as I haven’t been able to get smooth scroll to work in this scenario using other methods (and without smooth scroll in this scenario I am having issues in Firefox with the navbar Chroma background not displaying when the page loads at the anchor).

I appreciate you looking into this. I just don’t want you wasting time going down a rabbit hole when I can at least resolve this specific issue immediately. I imagine that ultimately the new Magellan will be the best all-around solution. I am trying to go live this month. Do you have any estimate for when you will be releasing it? Also, will it allow smooth scroll from external links?

@lion One more thing to try which may give us a clue is to put the limelight close class onto a link on the page that is not in a limelight.

I’m pretty sure from your above test that it is the fact that the links are inside a piece of content that is dynamically moved in the page structure (when in a lightbox) rather than the JS events that are bound to them.

Trying this will almost certainly mean that the link scrolls as normal but of course will not be a solution to your problem immediately - it may give me one last shot at fixing it though.

No estimate I’m afraid as we are currently packing up our house for a major move across the country. We haven’t found a new place yet so its all a big dive into the unknown.

Yes, it will allow smooth scroll from external links (the current MagicGellan does this already it is just that not many people realise it)

1 Like

@tav: On, I removed the hbmenucontent-close class from the links inside the Limelight and placed the class on the links outside the Limelight at the top of the page. On Android, with the Source scroll enabler on the page, the links outside of Limelight scroll and the ones inside Limelight behave the same (the links are broken).

OK, leave it with me. I’m back from house hunting on Monday and I’ll try something. I have an idea that may make it work.

@lion I’ve spent a couple of days playing with this and getting a friend to test it on his Android phone. Unfortunately I don’t think there is anything I can do. My idea was to change the way the click event was bound to the close class but that resulted in exactly the same behaviour.

@tav: Many thanks for taking the time to look into this. I really appreciate it, as always. I will be ok as removing the Source smooth scroll enabler resolves the immediate issue with the links and using the DooBox anchor stack works to replace the scroll function on both the same page and external pages (it is not possible to adjust the top offset via CSS, however, I figured out a workaround by using unique anchors for the different fixed navbar heights/breakpoints). I’ll look forward to the MagicGellan stack which should allow me to consolidate multiple functions and simplify my project.

Thanks again!

1 Like