For some reason it is in conflict with any script I have found to be able to link to a tab directly,
These are the scripts I tried to use combined with the first script.
Also tried this:
Code:
$(function(){
var hash = document.location.hash;
if (hash) {
$('.navbar-nav a[href="' + hash + '"]').tab('show');
}
$('a[data-toggle="tab"]').on('click', function (e) {
history.pushState(null, null, $(this).attr('href'));
});
});
and this:
Code:
$('a[data-toggle="tab"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$('a[data-toggle="tab"]').on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href");
localStorage.setItem('selectedTab', id)
});
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null) {
$('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('show');
}
and this:
Code:
var hash = location.hash.replace(/^#/, '');
if (hash) {
$('.nav-tabs a[href="#' + hash + '"]').tab('show');
}
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
and this:
Code:
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
Is there a possibility to have these scripts work alongside, like best friends?
My aim is to have any navigation with target # to run smoothly (first script), alongside with the linking inside tab-content (four potential scripts provided but all conflict with the first).
Thanks.
The css should have been able to handle the smooth scroll back to the top. You just need a target id on the body or one of the first elements on the page so that you can link to it.
You mean that from another page you would like to link directly to one of the tabs and have it displayed automatically?
If so then youâd need to add the #linktotab to the url in your other page and then in the tab page itself youâd need to use some js to detect the hash and then open the tab.
JS isnât really my thing so hopefully a js guru will drop by and correct me if Iâm wrong but I believe something like this is needed.
var getTab = $(location.hash).filter("a[data-toggle='tab']");
if (getTab.length) {
$("a[href='" + location.hash + "']").click();
}
Thanks Paul.
Indeed the scrolling-to-top can be achieved by just adding a target id, but that shows the back-to-top-arrow immediately, as I just want the arrow to be seen after scrolling down the page a bit. How to achieve that with css, please?
I added #spices to a link on another page:
And added this to the main js:
var getTab = $(location.hash).filter("a[data-toggle='tab']");
if (getTab.length) {
$("a[href='" + location.hash + "']").click();
}
//Get the button
let mybutton = document.querySelector(".back-to-top");
// When the user scrolls down 50px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
mybutton.classList.add("show");
} else {
mybutton.classList.remove("show");
}
}
Ok I can see you have added it now but Iâm not sure why its not working as it works exactly the same in my demo above. It seems to be returning undefined so there must be a conflict somewhere.
Iâm just on my way out now so maybe a JS Guru could step in (@rpg_digital are you around?)
But still no luck.
I need the âbody onloadâ for the two-level search in the sidebar on certain pages (f.ex. recipes - but not all pages), so I removed it to see if the direct linking would work. But it still does not work, so the issue must be somewhere else.
To get these links to scroll and open the correct tab on the spices page I had to make a small amend to Paulâs jquery
$(document).ready(() => {
const hash = location.hash;
const getTab = $(location);
// setup the 'click' listeners first
$('a[data-toggle="tabnew"]')
.on('click', function () {
const hash = $(this).attr('href');
$(hash).tab('show');
})
if (getTab.length) {
$(`a[href='${hash}']`).click(); // â then this will work
}
})
A simple fix of setting up the click listeners first before firing click.
One other thing that did stand out to me was the âscroll to topâ button. I thought it was broken until I reaslised that I had to click on the small arrow inside the circle. I think an improvement would be to make the anchor the circle and not itâs container.
Thanks, RPG, but Paulâs script works perfectly. I implemented yours as a test and it doesnât seem to do the trick.
Regarding the âscroll to topâ, indeed it would be better to have the whole circle clickable.
I guess we have to take asynchronisity into account, but if getTab has length e.g. a usable hash then a click event is fired before this bit of code has been assigned to click
Then the spices tab opens.
Strange that you see it differently. Cache maybe? Or there is another script on the page that initiates what you mention in your code (it is a template, so I have not put the code together but added stuff like the menu)?
Maybe you can help out with the following:
how do I link from another page to for example sumac, which is part of spices
how do I link from one tab (sumac) to another tab (walnuts)
how to make the whole âscroll-to-topâ circle clickable
var getTab = $(location.hash).filter("a[data-toggle='tab']");
if (getTab.length === 1) {
$(getTab).click();
}
I made the mistake in the original of linking to the hidden tab rather than the anchor id.
Maybe @rpg_digital could offer some help as it seems to me that you would need to set up some sort of logic as you will first need to automatically click spices which allows the bootstrap to open and set up the tab and then you would need to automatically click the sumac link to travel to the destination.
Maybe you could add a data-parent="#spices-tab" attribute to the sublinks which supplies the id of the parent tabs anchor and then click that followed by clicking the sublink id. So for example if the has was #sumac youâd check whether it had a data-parent attribute and if so automatically click the value of the data attribute followed by clicking #sumac.
I think the above scenario may also work for that.
(
