I’m currently using @willwood’s Switcher in quite a few sites. My client loves the look and feel of it, and I love how customizable it is. However, it has one very annoying feature that I’m wondering if there is way to fix using some code? On a mobile device, I have it set to an accordion - when a visitor clicks the title, the content jumps way up high, forcing the viewer to scroll (and scroll and scroll) to get to the beginning of the content. Is there anything I can do to prevent this from happening?
You can see it in action using a mobile phone here: scdiag.com Click Menu >> Locations >> Anderson…then scroll down until the switcher titles come into view ("Why choose us? / Pricing / etc.) Tap on any one of them. Very annoyingly, you’ll have to scroll up to get back to where you should be.
I can see the issue, but you must have something set up incorrectly because this is not how Switcher works in accordion mode on mobile. Look at Wills own example page on mobile Switcher | Stacks4Stacks and you’ll see the header remains static while the content opens up below. I don’t have the stack so cant help any more but Will is an excellent developer so i’m sure he’ll help.
I notice you have the first tab set to be open by default and this seems to be the issue - particularly as it has a mass of information. If you leave it open and scroll down, when selecting another tab, the first one closes causing a huge scroll. If it is closed to start with the others work fine. Why not take that information out of Switcher altogether if you want it on permanent display?
Great suggestion - many thanks! Unfortunately, setting Switcher to “start at 0” didn’t help, as seen here (pw= SCDIAG). The first panel still shows up even when set to zero (great), but the issue is still there.
And, you’re right, there is a lot of center-specific information that is shown upon landing on the page…all of it pertinent to a first time visitor. But, I want that information to be hidden when the visitor is looking for other types of information (e.g., pricing, ways to pay their bill, Google reviews, etc.) - hence, the entire reason for using a Switcher-type stack. Hopefully, @willwood will weigh in with a solution.
I think when you set it to “0” that means it opens the first tab. You need to add “a large number” such as “999” for no tabs to open, as per directions for Swticher. Also, the item posted in a tab does drop down below the tab when opening the tab.
Indeed. @willwood - in your example, shown below, the header of your content remains visible when each of the accordions is clicked. Is there something that @Rovertek and I are perhaps doing wrong that is making the top of our content scroll way up and out of view? Maybe it’s the “type” of content that we have inside the accordion, and hence nothing can be done about it? Thanks for any assistance you can offer.
@dave I don’t seem to be in receipt of any email from you or @Rovertek about this issue.
Are you using a free trial version of the stack? If this is a trial version or a Beta copy you picked up from the Discord chatroom, then it might be worthwhile investing in the normal version if you don’t have it yet. Especially if you want me to lend more time helping you with this matter or dealing with urgent problems at weekends.
In your Stack settings (under the HTML tab), please make sure you have meta tags and comments enabled. Otherwise we can’t tell what version you are using or run the full set of diagnostic tools on your website.
I don’t see any Switcher stack in scdiag.com and the example on Enter the passcode to login seems to be opening and closing okay in the Firefox mobile simulator.
Have you tried any basic troubleshooting yourself? Such things can include clearing the browser cache or any caching services your website is loaded through like Cloudflare. Is there any change with another theme or if you deconstruct the page to remove other stacks? Reducing “noise” and recreating a simplified test page can greatly help with isolating problems.
One thing that does concern me is that https://www.scdiag.com/ has a large number of HTML validation errors and practically zero accessibility. If it were me, I personally would not “sign it off” to go on a public-facing website, in that current state. Especially as the website relates to the medical sector, and there are probably very stringent accessibility laws you need to be complying with.
I know this may come across as a scathing reply and it does not give me any pleasure to tell you this. However it’s an important factor in trying to determine why Switcher works for the rest of us, but not on your website. It’s entirely possible the problem(s) is related to a certain combination of addons you are using or any one of these HTML validation errors.
Errors like duplicate IDs and a mismatch in opening and closing tags might seem trivial to you or other developers, however, they can have a huge impact on things like scrolling the page to specific anchors or the running of animation effects.
Will, I haven’t mentioned this issue before, because I thought that nobody else was experiencing it and, therefore, something in my project outside of Switcher might be causing it. BTW, I use the Source framework and a licensed copy of Switcher, not a trial one. Also, caching doesn’t apply here.
If this could help diagnose, in my case, the amount of content in each Switcher Item exceeds the hight of viewport (needs scrolling).
Thanks for getting back to me, Will. Actually, I only use paid-for items in my websites. I most likely purchased Switcher using my corporate email account many years ago- as you can see, it’s in my Paddle locker.
Yes- I tried trouble-shooting, including replacing the Switcher stack with a new version (to ensure all settings were fresh) and placing it on a subdomain that is not on Cloudflare.
And, actually, the same thing does happen on your site, I just hadn’t noticed it until now. Using a mobile device, scroll down until the multi-colored section “Sustainability…Making Progress” is in about the middle of the page. Now, click the Biodiversity title. It will zoom up and off the screen. There simply isn’t as much information in the section, so it isn’t as noticeable.
No big deal - I was just hoping there was an easy solution.
Consider that Switcher is built on jQuery UI, originally a SeyDoggy stack. The codebase is very complicated. Not much I can change to improve scrolling.
Whereas the three listed above were coded natively for RapidWeaver. MouseReveal is the newest released at the end of last year with a lot of emphasis placed on accessibility, which, dare I say, you need to look at improving in your website. So three more options for you to experiment with there.
I was not familiar with MouseReveal - I will have a look at it. Thanks for the tip. Your advice regarding accessibility is duly noted - thanks for the advice.
@willwood MouseReveal looks very nice. But it seems a lot of @dave 's instances are text with some images. It seems MouseReveal only works with media. Is there a way to add text/markdown or regular stacks material to a section? (I realize text can be added as wanted to the image/media, but don’t see how to add as the focal point of a section).
No, you evidently don’t quite understand how MouseReveal works. Allow me to explain…
Each item gets added as an HTML list item (this is great for accessibility and SEO). The text of the list item is used as the title shown on the button. The content you want to be triggered by MouseReveal is stored in HTML data- attributes.
So when you click or mouseover a MouseReveal button, the Javascript instantly takes your data- attribute and renders the desired image or video file in the main panel. This also conveniently solves the problem of starting and stopping playing media. And restoring mouse focus back to the page (super important for accessibility).
In the case of images, you can mix both images and caption content together. Many style options are provided to facilitate this need.
It would be nigh-on-impossible to take the contents of a %slice% in the Stacks API and move the whole lot into a data- attribute. For starters, the first instance of a quote mark in the code that Stacks generates would end the data- attribute prematurely and result in completely corrupted output. You would also lose all your formatting.
You really should not be hiding and revealing whole sections of mixed page content with Javascript. Many accessibility and usability experts will agree with me on that point. Instead, make use of subpages. These are more easily navigable and carry the advantage of having unique URLs that people can actually share or bookmark.
The person I originally made MouseReveal for is currently building a website that will be seen and used by Joe Biden and other senior members of the White House administration, to highlight pressing health and social care issues in the US. So if it’s good enough for the American president, it should be good enough for you too! But like all stacks, you have to be using the correct ones for the right jobs.
If you do want me to make you a custom toggle stack that can hide and reveal whole pages from a sidebar dynamically with Javascript, please email me for a quote. It would need to be implemented entirly differently to how MouseReveal works.
2- @dave had the problem of “jumping content,” and a similar circumstance for MouseReveal, in mobile, on your demo page, the example of “Sparrows on YouTube,” when selected, that example gets revealed out of frame, ie, the sparrows aren’t visible unless I first scroll up. Is there a way for that content to appear just above the button? Without first scrolling?
3-What would happen if there was a specific URL assigned to “Sparrows on YouTube?”
Reported the same problem here back in 2019 and still no solution to date. Unfortunately I’m not technical enough to solve this, that’s why I made my website with Rapidweaver.
