Autoscroll-Position (when Tab clicked) changeable?

  • Resolved AnimeSubways

    (@animesubways)


    9 years, 8 months ago

    Okay, first off…I want to say that Tabby is a really good plugin and works perfectly!

    I just wanted to ask something and here is the scenario:
    – The first tab is opened
    – I click on another tab
    – The tab opens and scrolls to the top of the page
    – So you can see the tab-name and the content in it perfectly

    Here is the problem:
    – Tabby doesn’t recognize that I have fixed Main-Menu
    – So when I hit another tab you can’t see the tab-name because the fixed Main-Menu is laying over it…

    So here is my question:
    Is the Scroll-Position changeable?

    And why not jump to the opened tab when you have the target in the url?
    I’ve put it in your Tabby.js and it works! ??

    Here is the JS-Snippet:(not so nice coding..but I don’t care! XD) 

    function getUrlParameter(sParam){
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++){
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam){
return sParameterName[1];
}
}
}
//target-text in URL
var targetTabText = getUrlParameter('target');
var tabTextString = $(".responsive-tabs__heading--active").text();

var tabTextStringArr = tabTextString.toLowerCase().split(' ');
var activeTabText = tabTextStringArr[0] + '-' + tabTextStringArr[1];

//check if targettext is active tab text
if (targetTabText === activeTabText){
//scroll to opened tab postion
window.scrollTo(0, $(".responsive-tabs__heading--active").position().top);
}

    https://www.ads-software.com/plugins/tabby-responsive-tabs/

Viewing 1 replies (of 1 total)
  • Plugin Author cubecolour

    (@numeeja)

    I wouldn’t approach getting this functionality like that.

    The target url parameter can be used with a link to an anchor using the id of that anchor. You can add an invisible anchor before the tabgroup. Also add an ‘offset’ class to this.

    <a id="mytabs" class="offset150"></a>

    Then when you link to the page you add the target url parameter, plus the anchor:

    <a href="https://example.com/tabspage/?target=my-target-tab#mytabs>Link to My Target Tab</a>

    To get an offset so the tabgroup is not overlaid by the fixed main menu you can target the added ‘offset’ class with a CSS rule in your child theme (or custom CSS plugin):

    .offset160:before {
display: block;
content: " ";
   height: 160px;
   margin-top: -160px;
   visibility: hidden;
}

    The value for the height of this pseudo element and the negative value of the margin-top should match and be equivalent to or slightly greater than the height of your fixed menu.

Viewing 1 replies (of 1 total)
  • The topic ‘Autoscroll-Position (when Tab clicked) changeable?’ is closed to new replies.