Autoscroll-Position (when Tab clicked) changeable?

Resolved AnimeSubways
(@animesubways)

9 years, 1 month 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://wordpress.org/plugins/tabby-responsive-tabs/

Viewing 1 replies (of 1 total)

Plugin Author cubecolour
(@numeeja)

9 years, 1 month ago
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="http://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.

Tags