Jump to a tab on another page using a link.

Yes, I can see the issue. I was wondering, is the solution from Pete working for you?

Hi again @JDW,

I did some looking around on the web and even asked chatGPT about this. It appears in the case you identified youā€™d need to use absolute Urls in the links. This would include http/https, domain name, and needed path info. Using absolute Urls ensures that the browser loads the entire URL, including the fragment identifier of the section to be evaluated and scrolled to. As we found out, use of relative Urls does not do this.

I did test the example Blocs file using absolute Urls and the links did now work. Hopefully this approach would be acceptable for you. If not, maybe Pete has a better solution.

Thx.

pruthe

I appreciate the guidance about that. The down side, of course, is that it would not longer be possible to Preview your work in Blocs, nor could you just preview in the browser. You would need to generate HTML files, upload to your webserver, then check to verify all is well. If you do a lot of linking and checking, that will be a time consuming process.

He is working on a BS5-compatible, feature-expanded solution at the moment. I simply wanted to provide you with feedback regarding your solution.

Whatever solution is used needs to account for clicking the link on a different page than the page with tabs, and when clicking a link on the same page as the tabs.

It could be your absolute URL solution works, but I didnā€™t make time yet to export files and upload to my web server.

1 Like

Isnā€™t that ā€˜absolute urlā€™ description the same as I mentioned in July 11, or is it different?

What Iā€™m working on will work for tabs and accordions, same page and linked pages.

Taking what I originally built a few years back, and making it much better. It will be Bootstrap 5 only.

It will add accessibility and convert links to button tags if required.

Hoping to at least get the beta to James before I head overseas. :grimacing:

3 Likes

You are overseas (ducks and runs for coverā€¦)

Is that similar to Whitfieldā€™s Tab Anything?

No. Itā€™s not used to make tabs.

Tab Anything is a fantastic bric though

1 Like

Hi again @JDW,

Just to let you know I created a 3rd version of my sample Blocs file (attached) that opens tabbed content on another page. This version should not need the absolute URLs for the links. You can try out the sample file to see how it works and how itā€™s configured in Blocs.

This updated version seems to work for all the test links in the sample file. Hopefully, this would work for you too. Please let me know if you try it and it works, or if you run into any problems. And if you decide to use another (Peteā€™s) solution, thatā€™s fine too. I might want to try/use that myself when it becomes available.

Take care.

pruthe

Tab Links Other Page-bs5-v3.bloc (239.5 KB)

2 Likes

So cool of you to share your work, thank you :grinning:

Thank you for your kindness in sharing your ongoing quest for perfection!

@PeteSharp hasnā€™t finished his modified software yet, so I continue to truck-along using BS4. Even so, I am open to testing all solutions, including yours.

I was able to get your example document to work, but when I created a stripped-down version of my website (for sharing with you), and then after I moved your content to that document, I am not getting it to work.

Hereā€™s a stripped-down version of my site which has what I think is your code embedded properly:

JDW_CutDownSite-for-pruthe-testingBS5.zip (1.4 MB)

When you open that document, it will look cluttered because I wanted to keep that ā€œ1480ā€ web page looking and feeling exactly as the actual page works. But just under the big pic at top, you will see 3 tabs. Those are the only tabs on the page. And I only moved your script and Custom Attributes to that page. Previously, I had Peteā€™s TabScroller added to that page, but I removed all that to ensure a clean slate for testing your solution. But again, itā€™s not working for me.

Hereā€™s how to test:

  1. Open my document in Blocs 5 (noting that it has been migrated to BS5)
  2. Preview in Blocs.
  3. Click on each of the 3 tabs on that ā€œ1480ā€ page to prove to yourself they all work fine when manually clicked.
  4. Get out of Preview.
  5. Scroll to the very bottom of the page and look at the gray section named IMPORTANT ā€” PLEASE READ.
  6. Take a close look at the paragraph: ā€œ1. VISION 1480 Products connect to your car by wayā€¦ā€ Specifically, click on the ā€œCompatibility PDFsā€ link and note how I have it setup. That is the trigger that, when clicked, should scroll up and open the third (rightmost) tab.
  7. Preview in Blocs.
  8. Scroll down to the bottom and find that ā€œCompatibility PDFsā€ text link and then click on it. When happens next is you will be jumped to the very top of the page, not to row ID ā€œfirst-sectionā€ as you would expect. It jumps and doesnā€™t smooth scroll either. So thatā€™s the first problem. But you can see the 2nd problem too. The third tab named ā€œCompatible Carsā€ is not chosen. In other words, itā€™s not working.
  9. Now, while still in Blocs Preview, scroll down and click ā€œCompatibility PDFsā€ a second time. Note that nothing happens at all this time. Thatā€™s the second problem.

I am guessing that I either forgot to move something over from your document to mine, or maybe some of the other code used on my page is conflicting with yours. Not sure which, but perhaps you can let me know so I can try again.

Once that problem is solved, then I will test links to other pages too.

Thanks!

P.S. If youā€™d like to see how the same thing works on my live site, which currently is BS4 and is using Peteā€™s older version TabScroller solution, hereā€™s the link:

Scroll down, click on the ā€œCompatibility PDFsā€ text link, then watch it smooth-scroll to the right section AND open the 3rd tab. It all works so wonderfully, but TabScroller is not compatible with BS5.

You had some typos in the configuration of the ā€œCompatibility PDFsā€ link. I fixed that in attached updated zip. Also configured the link on the FAQ page to show that works.

I did find a quirk in my openTab function and switched scroll code to be after the tab activate. That seemed to fix the quirk.

Please try your updated site code. Hopefully this will work for you too and you can try on your full site. Iā€™ve attached your updated zip file and my updated 3rd version of sample code.

Thx.

pruthe

JDW_CutDownSite-for-pruthe-testingBS5-2.zip (1.4 MB)

Tab Links Other Page-bs5-v3a.bloc (240.4 KB)

Iā€™m overseas at present. Only checked in, for any support request DMs for my brics. Basically to reply that I canā€™t help right now :joy: Norm hasnā€™t added the bric builder to the iPhone version :joy:

I probably added too many features to it. So itā€™s taking longer.

1 Like

Hi @JDW,

I made one final minor change to my sample blocs file (attached). I added a short time delay in the script event listener before the tab activate + scroll occurs. This short delay only occurs when linking to and activating a tab on another page.

I tested this change on one of my existing projects and it seemed to work OK. The added delay when switching pages seemed to help the page to stabilize before the tab activate + scroll occurred.

You can try using this updated version on your project. If you have any problems, please let me know. Of course, when Pete makes his new bric available, you could use that, whichever works best for you.

Good Luck!.

pruthe

Tab Links Other Page-bs5-v3b.bloc (240.3 KB)

More features require more patience, and Iā€™m excited to patiently wait and see what you produce!

I applaud your determination to keep on improving your code.

I tested your document, but found that ā€œshort time delayā€ to be so long that a person visiting the page may start clicking around before that timer expires. It seems to be longer than 2 seconds, which is quite long indeed.

When first clicking a link in your document that leads to a different page, that page opens instantly, but then your 2+ second timer starts. It does eventually work (in your document, I didnā€™t try it in my document), but the waiting time is really the sticking point.

Itā€™s not a matter of what I am willing to wait. Itā€™s a matter of knowing how others might react when visiting a web page which has such a timer. Clicking on something usually produces a result instantly or near instantly, and anything beyond a couple seconds is usually accompanied by a spinner or progress bar or other visual indication that things are take time to process.

All said, I donā€™t want to discourage your work at all. Not at all. But this timer is extremely long, and I honestly thing it would create problems in the end.

Yeah you do need this, the element needs to exist before opening and scrolling. Basically just waiting for the DOM to load then run.

Hi @JDW,

Yes, there is the short 2 sec delay before scrolling begins in the sample file. I read somewhere that the scroll function used (scrollIntoView) could potentially conflict with other code or cause unintended effects on a newly entered web page. I could see some quirky things happening in the testing on one of my projects without the delay. Once I added the delay, things seemed to work OK, except for the perceived delay before the scroll occurred. And I tested it on multiple browsers/devices.

You can try lowering the delay in the event listener to see if it works better for your project. On my one project, the delay was very close to the 2 secs, which I didnā€™t think was too bad from a user perspective. Yes, the scroll isnā€™t immediate, but Iā€™m doubtful the user has time to make any other page requests in a 2 second period.

If I can think of another way to implement this capability that eliminates the delay, Iā€™ll let you know here. Fyi, Iā€™m not really experienced in web programming. Norm and others here (Pete, ā€¦ ?) are the real experts, but sometimes I like to try things out to see if I can get them to work, and this is just such a case.

Take care.

pruthe

As above.

It would be best to wait for the page to load than have a fixed time delay.

Hi Pete,

In the sample blocs file, thereā€™s an event listener script of the form as listed below, so I was thinking the page should already be loaded? Itā€™s just that I added an additional fixed delay because I was under the impression that the scrollIntoView function could have some additional conflicts after the page is loaded. The delay seemed to help.

Please let me know if you think a different approach is needed. You can see the full script in the footer section of one of the otherx.html pages of the sample blocs file.

Thx.

pruthe


document.addEventListener('DOMContentLoaded', function() {

	setTimeout(function() {

		// Code to run after the 2 sec delay

		var hash = window.location.hash;

		openTab(hash);

	}, 2000);

});