-
AuthorPosts
-
June 9, 2020 at 10:31 pm #1220986
Hello!
I would like to be able to have links to particular (opened) tabs such as https://impactualize.com/services/#csr.
However, I notice that the content within the link does not appear. What am I doing wrong?
I also found this thread that discusses anchors within the tabbed content. Do I need to something to my child functions?
https://kriesi.at/support/topic/link-to-a-tab-in-a-tab-section/Thank you!
LizJune 12, 2020 at 6:47 pm #1222149Hey losting,
Please refer to the solution posted here:
https://kriesi.at/support/topic/link-to-tab-in-tab-section/#post-763509Best regards,
VictoriaJune 12, 2020 at 8:57 pm #1222176Thanks for sharing that link. I added that bit of script to my child functions.
Still when I visit https://impactualize.com/services/?tabsort=2#strategy-and-planning
the page comes up with that second tab open however there is no content. Not sure what I’m doing wrong? Is there a different configuration of the link I should be looking for?Thanks,
LizJune 16, 2020 at 3:25 pm #1223069Hi losting,
It does not scroll to the tab on my end and content does not fade in.
Best regards,
VictoriaJune 16, 2020 at 3:31 pm #1223073I’m not sure what I’m doing incorrectly. Is the link configured correctly?
Is adding this script to the child functions.php the only edit I should need to make?
// auto trigger add_action('wp_footer', 'ava_custom_script'); function ava_custom_script() { ?> <script> (function($){ function getQueryParams(qs) { qs = qs.split("+").join(" "); var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g; while (tokens = re.exec(qs)) { params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); } return params; } var $_GET = getQueryParams(document.location.search); $(window).load(function() { switch($_GET['tabsort']) { case '1': $('a[data-av-tab-section-title="1"]').trigger('click'); break; case '2': $('a[data-av-tab-section-title="2"]').trigger('click'); break; case '3': $('a[data-av-tab-section-title="3"]').trigger('click'); break; case '4': $('a[data-av-tab-section-title="4"]').trigger('click'); break; } }); })(jQuery); </script> <?php }
June 16, 2020 at 3:33 pm #1223074case '1': $('a[data-av-tab-section-title="1"]').trigger('click'); break;
Does the number “1” need to be replaced with something specific to the site?
Thanks. Liz
June 16, 2020 at 5:46 pm #1223142Hi Liz,
Well, not, the code is ok.
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaJune 16, 2020 at 6:03 pm #1223156Just added it the login. Thanks so much.
June 18, 2020 at 4:46 pm #1223798Hi losting,
I cannot find id on the page that you’re adding to the links. Do you have them added somewhere?
Best regards,
VictoriaJune 18, 2020 at 6:36 pm #1223861I’m not sure what you mean, so probably I don’t.
June 19, 2020 at 7:39 pm #1224134Hi losting,
You have anchors like #strategy-and-planning and so there has to be an element on the page with that id.
Best regards,
VictoriaJune 19, 2020 at 8:00 pm #1224139Could it have been generated from the tab name? I frequently add anchors in Developer Settings but not this time.
June 24, 2020 at 6:45 pm #1225309Hi,
The script above only triggers the corresponding tab section title based on the tabsort parameter. You can’t append the anchor in the link or expect to go to a nested content within the tab section. If you want the page to automatically scroll to the tab section, try to use the scrollTo function in the script.
$([document.documentElement, document.body]).animate({ scrollTop: $("#av-tab-section-1").offset().top }, 1000);
Replace #av-tab-section-1 with the id the grid row element. Or try to replace the previous code with this:
add_action('wp_footer', function() { ?> <script> (function($){ function getQueryParams(qs) { qs = qs.split("+").join(" "); var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g; while (tokens = re.exec(qs)) { params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]); } return params; } $(document).ready(function() { var $_GET = getQueryParams(document.location.search); if($_GET['tabsort']) { $("a[data-av-tab-section-title='" + $_GET['tabsort'] + "']").click(function() { this.click(); }).click(); $([document.documentElement, document.body]).animate({ scrollTop: $("#av-tab-section-1").offset().top }, 1000); } }); })(jQuery); </script> <?php }, 9999);
The link to the page containing the tab section should look something like this:
http://site.com/sample-page/?tabsort=3
… without the anchor.
Best regards,
IsmaelJuly 1, 2020 at 5:44 pm #1227293This worked! Thanks so much!
July 1, 2020 at 7:07 pm #1227313Hi,
I’m glad this was resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Linking to an open tab’ is closed to new replies.