I’m posting this in sheer desperation, since my posts about it in another thread failed to obtain a solution.
This is about Blocs Tabbed Content Bric.
This Fiddle shows exactly what I want to achieve in Blocs. Exactly! Focus your brain on the bottom right corner content, click on Home or Profile or Settings, then scroll up and click the “Go to Messages tab” text link. Boom! It scrolls you down to the tabs AND it selects the Messages tab AND it shows you the content for that Messages tab. Perfect! Beautiful! Stunning! But why is this impossible in Blocs?
Here’s a 1 page document I made showing the problem. (Sorry about the file size, but Blocs still refuses to eliminate embedded graphics that are unlinked and unused when I strip down a full website to a single page – I really wish that could be fixed.) Do this:
Preview my document in Blocs.
Click on each of the 3 tabs so you can see their content.
Ensure that either FEATURES or OPTIONS is selected, then click on “TEST LINK” at the bottom. When you do that, you see the content of “PDFs” appear under FEATURES or OPTIONS (whichever you had open). That’s silly and wrong. How do we fixed that? Clearly, we need the “PDFs” tab to be selected when its content is displayed, not FEATURES or OPTIONS.
If you had FEATURES selected before, now click OPTIONS.
Click “TEST LINK.” Note that NOTHING HAPPENS! Blasted! This is yet another problem.
So not under does the right content appear under the wrong tab, but TEXT LINK only works 1 time.
Here’s the code I use in Page Settings > Add Code > Footer…
<script>
$('a.spitoon').on('shown.bs.tab', function (e) {
$('#nav-28583-tab-3 .active').removeClass('active');
$('a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
var that = this;
$('html, body').animate({
scrollTop: $( $(that).attr('href') ).offset().top
}, 500);
});
</script>
If anyone could help resolve this problem, it would benefit more Blocs users than just me.
Folks, it’s been 8 days. Many of you are “working” from home, yet no solutions are flowing. Do I need to get down on my knees and beg?
OK, I am. With tears streaming down. Please, folks! Let’s hear some solutions. I cannot possibly be the lone Blocs user on this planet who wants to open a tab by clicking on a text link.
@Norm, I haven’t the right words to express how grateful I am for your tremendous kindness in creating that amazingly helpful document! Please accept my most sincere and humble thanks!
I’ve implemented your wonderful solution into my website, and it’s great to see that Scroll To works as well! GREAT!
QUESTION#1: I’m guessing this is impossible, but I need to ask anyway. Is there any code I can add to the Footer, such that when I click my link, not only will it open the designated tab, but it will also scroll to specific content within the tab? Right now, I have Scroll To working, which scrolls to the BLOC containing the tabbed content. I still want that. But what I want to know is, can I also scroll to specific content within that tab? For desktop computers, it doesn’t matter so much, but on an iPhone, the tabbed content becomes every long. Right now, clicking my link will scroll to the TOP of the tabbed content, but it won’t scroll to specific items inside that same tab. Why is this important? So that when a user clicks the link they are not presented with strange info unrelated to the link they clicked. I don’t want them to ask, “why was I taken here, when I should have been taken to content much lower inside this tab?”
QUESTION#2: Is there a way for an external link (i.e., a link on a totally different web page in my site or another website) to not only open my web page but also open a designated tab and then scroll to that tab?
Hi Norm – Gratitude for this file, I’ve been wanting this, too.
Question: in an alert note in the file, you mention:
“Also the page footer has some additional code added, this is required to make it all work. When a click event is triggered on a link containing the class opentab-link the script gets the target tab ID from the data attribute data-target-tab and it then performs a click event on it to activate and enable the target tab.”
How can I access the ‘footer’ to see the code within blocs, so that I can make use of this code in other projects? I don’t see a ‘footer’ bloc in the file?? Thanks
I already showed you I had a solution for that. I am just making it a custom bric, which will have some options such as scroll speed, and support for accordions. I also had to solve an issue with the Page Transitions bric that was causing it to not work.
Hey Malachiman…did you mean to say you are creating a custom bric that will do this, and that it will be available for users to purchase in the Bloc Store? I’d buy that!
@PeteSharp
It’s been 25 days since your last post in this thread. I wanted to follow up with you about your Bric in light of how monumentally important it is for us to click a text link on a page that will in turn open a different web page and scroll to content within a designated tab.
Sorry it hasn’t been a priority. I haven’t looked at it for a while. I’ve been working throughout the lockdown, I have other paid work that’s not always web related. And the paid work comes first
I will send you an experimental bric though @JDW. if it works on your website, it will work anywhere
