Hello all,
I take advantage of the beneath code to forestall hyperlinks from leaping:
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
.not('[href="#intro"]')
.not('[href="#ingredients"]')
.not('[href="#sweets"]')
.not('[href="#drinks"]')
.not('[href="#traditional"]')
.click on(operate(occasion) {
if (
location.pathname.change(/^//, '') == this.pathname.change(/^//, '')
&&
location.hostname == this.hostname
)
var goal = $(this.hash);
goal = goal.size ? goal : $('[name=" + this.hash.slice(1) + "]');
if (goal.size)
occasion.preventDefault();
$('html, physique').animate(
scrollTop: goal.offset().high
, 1000, operate()
var $goal = $(goal);
$goal.focus();
if ($goal.is(":focus"))
return false;
else
$goal.attr('tabindex','-1');
$goal.focus();
;
);
});
For some cause it’s in battle with any script I’ve discovered to have the ability to hyperlink to a tab immediately,
These are the scripts I attempted to make use of mixed with the primary script.
Additionally tried this:
Code:
$(operate()
var hash = doc.location.hash;
if (hash)
$('.navbar-nav a[href="' + hash + '"]').tab('present');
$('a[data-toggle="tab"]').on('click on', operate (e)
historical past.pushState(null, null, $(this).attr('href'));
);
);
and this:
Code:
$('a[data-toggle="tab"]').click on(operate (e)
e.preventDefault();
$(this).tab('present');
);
$('a[data-toggle="tab"]').on("proven.bs.tab", operate (e)
var id = $(e.goal).attr("href");
localStorage.setItem('selectedTab', id)
);
var selectedTab = localStorage.getItem('selectedTab');
if (selectedTab != null)
$('a[data-toggle="tab"][href="' + selectedTab + '"]').tab('present');
and this:
Code:
var hash = location.hash.change(/^#/, '');
if (hash)
$('.nav-tabs a[href="#' + hash + '"]').tab('present');
$('.nav-tabs a').on('proven.bs.tab', operate (e)
window.location.hash = e.goal.hash;
)
and this:
Code:
// Javascript to allow hyperlink to tab
var hash = doc.location.hash;
var prefix = "tab_";
if (hash)
$('.nav-tabs a[href="'+hash.replace(prefix,"")+'"]').tab('present');
// Change hash for page-reload
$('.nav-tabs a').on('proven', operate (e)
window.location.hash = e.goal.hash.change("#", "#" + prefix);
);
Is there a risk to have these scripts work alongside, like greatest pals?
My goal is to have any navigation with goal # to run easily (first script), alongside with the linking inside tab-content (4 potential scripts offered however all battle with the primary).
Thanks.
I don’t know if that is of any use however we had a similar question within the discussion board which resulted on this demo.
The graceful scrolling is finished with css (no want for js in any respect). The js opens the tab solely,
It could be one thing you’ll be able to work with.
Thanks, Paul.
I changed this to css for clean scrolling:
scroll-behavior: clean;
And this to jss for the back-to-top:
$(doc).on('click on', '.back-to-top', operate ()
$("html,physique").animate(
scrollTop: 0
, 20);
);
$(window).on("scroll", operate() {
var ScrollTop = $('.back-to-top');
if ($(window).scrollTop() > 500)
ScrollTop.fadeIn(1000);
else
ScrollTop.fadeOut(1000);
On this page, I would really like to have the ability to hyperlink from one other web page to
- spices, herbs, fruits, and so forth
- saffron, raisins, pistachios, and so forth
How do I try this, please?
The css ought to have been in a position to deal with the graceful scroll again to the highest. You simply want a goal id on the physique or one of many first components on the web page in an effort to hyperlink to it.
You imply that from one other web page you wish to hyperlink on to one of many tabs and have it displayed routinely?
In that case then you definitely’d want so as to add the #linktotab to the url in your different web page after which within the tab web page itself you’d want to make use of some js to detect the hash after which open the tab.
JS isn’t actually my factor so hopefully a js guru will drop by and proper me if I’m unsuitable however I consider one thing like that is wanted.
var getTab = $(location.hash).filter("a[data-toggle="tab"]");
if (getTab.size)
$("a[href="" + location.hash + ""]").click on();
I added it to my codepen and it appears to work.
1 Like
Thanks Paul.
Certainly the scrolling-to-top will be achieved by simply including a goal id, however that exhibits the back-to-top-arrow instantly, as I simply need the arrow to be seen after scrolling down the web page a bit. Methods to obtain that with css, please?
I added #spices to a hyperlink on one other web page:
And added this to the principle js:
var getTab = $(location.hash).filter("a[data-toggle="tab"]");
if (getTab.size)
$("a[href="" + location.hash + ""]").click on();
Nevertheless it doesn’t appear to work.
I don’t see the code anyplace here in main.js?
I assume you added the js to the vacation spot web page? (I’m positive you probably did however simply checking ;))
You would wish js the place checking on scrolling is worried. First add this CSS after your authentic code:
.back-to-top
opacity: 0;
transition: opacity 0.5s ease;
.back-to-top.present
opacity: 1;
Then do one thing like this within the JS.
//Get the button
let mybutton = doc.querySelector(".back-to-top");
// When the consumer scrolls down 50px from the highest of the doc, present the button
window.onscroll = operate ()
scrollFunction();
;
operate scrollFunction() doc.documentElement.scrollTop > 50)
mybutton.classList.add("present");
else
mybutton.classList.take away("present");
Tough demo:
Thanks Paul.
The back-to-top works like a allure, nice!
Relating to the tabs: I had added your code in foremost.js, however because it was not working, I had eliminated it.
However so the be clear: all I’ve to do for it to work is:
1/ add this to foremost.js:
-> underneath $(doc).prepared(operate () {
var getTab = $(location.hash).filter("a[data-toggle="tab"]");
if (getTab.size)
$("a[href="" + location.hash + ""]").click on();
2/ change the hyperlink on anther web page
I’ve executed the above, however it doesn’t work.
Please click on here on “spices and flavourings” to see (ought to soar to second tab “spices”).
Okay I can see you will have added it now however I’m unsure why its not working as it really works precisely the identical in my demo above. It appears to be returning undefined so there have to be a battle someplace.
I’m simply on my method out now so possibly a JS Guru may step in 
(@rpg_digital are you round?)
Simply having a short look, if you happen to open your console in chrome(f12), you’ll see an error being thrown
Uncaught TypeError: $(…).niceSelect will not be a operate
The precise code is on line 113 (or thereabouts)
/*--------------------------------------------------
choose onput
---------------------------------------------------*/
$(doc).prepared(operate()
$('choose').niceSelect(); ←
);
Could be an thought to deal with that or remark it out while you’re employed on implementing Paul’s script.
There may be additionally one other error in about.php
Uncaught TypeError: Can not learn properties of undefined (studying ‘firstlevel’)
<physique onload="initListGroup('chainedmenu', doc.listmenu0.firstlevel, doc.listmenu0.secondlevel, 'saveme')">
doc.listmenu0 is undefined
I can’t be certain, however possibly these bugs are hindering issues.
1 Like
Thanks RPG.
Simply deleted this from foremost.js
$(doc).prepared(operate()
$('choose').niceSelect(); ←
);
However nonetheless no luck.
I would like the “physique onload” for the two-level search within the sidebar on sure pages (f.ex. recipes – however not all pages), so I eliminated it to see if the direct linking would work. Nevertheless it nonetheless doesn’t work, so the difficulty have to be some other place.
I believe this may occasionally resolve the issue however will want some html changes.
Add an ID to the anchor tab hyperlinks like so.
<ul class="nav nav-tabs">
<li><a id="intro-tab" class="lively" data-toggle="tab" href="#intro">intro</a></li>
<li><a id="spices-tab" data-toggle="tab" href="#spices">spices</a></li>
<li><a id="herbs-tab" data-toggle="tab" href="#herbs">herbs</a></li>
<li><a id="fruits-tab" data-toggle="tab" href="#fruits">fruits</a></li>
<li><a id="nuts-tab" data-toggle="tab" href="#nuts">nuts</a></li>
<li><a id="map-tab" data-toggle="tab" href="#map">origin map</a></li>
</ul>
Then use this js in your doc prepared.
var getTab = $(location.hash).filter("a[data-toggle="tab"]");
if (getTab.size === 1)
$(getTab).click on();
On the opposite web page you now hyperlink to the id referenced in these anchors.
e.g. #spices-tab
Not #spices
That appears to work so far as I can inform from right here
Sure sure sure, works completely! Thanks!
Now subsequent steps:
- how do I hyperlink from one other web page to for instance sumac, that’s a part of spices
- how do I hyperlink from one tab to a different tab
Sorry simply on my approach to mattress:)
I’ll be again tomorrow afternoon however hopefully another person could have jumped in by then
Glad we bought the primary half working anyway.
