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.
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.
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
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)
So cool of you to share your work, thank you
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:
- Open my document in Blocs 5 (noting that it has been migrated to BS5)
- Preview in Blocs.
- Click on each of the 3 tabs on that ā1480ā page to prove to yourself they all work fine when manually clicked.
- Get out of Preview.
- Scroll to the very bottom of the page and look at the gray section named IMPORTANT ā PLEASE READ.
- 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.
- Preview in Blocs.
- 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.
- 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 Norm hasnāt added the bric builder to the iPhone version
I probably added too many features to it. So itās taking longer.
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);
});