Comments (25)
The following solved the issue for me:
Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;
Barba.Pjax.preventCheck = function(evt, element) {
if ($(element).attr('href') && $(element).attr('href').indexOf('#') > -1)
return true;
else
return Barba.Pjax.originalPreventCheck(evt, element)
};
from barba.
so the easiest workaround for this is editing barba.js on line 1341
from:
//Ignore case when a hash is being tacked on the current URL
if (href.indexOf('#') > -1)
return false;
to:
//Ignore case only for same page hash urls, not for different page hash urls
if (location.href.indexOf(href) > -1 && href.indexOf('#') > -1)
return false;
you might want to consider adding an option or replacing it with this, as using hashes for triggering other functions such as filters etc. is pretty common.
from barba.
hi @luruke,
yes it works perfectly fine. perhaps url.split('#')[0];
instead of url.replace(/#.*/, '');
is a better option performance wise, but im not sure about that.
the reason of my workaround is another one tho.
e.g.
In my project i have an anchor in index.html which links me to "shop.html#gold", the reason i'm doing this is, because #gold triggers a filter function, which only show me products of the "gold" collection. However with
if (href.indexOf('#') > -1)
return false;
the href="shop.html#gold" is ignored by barba.js
While i think its good to ignore urls with a hash on the same page (for scrolling to anchors) it should not ignore hrefs that link to another page with a hash.
Thats why i changed it, so it only returns flase, if the href contain a hash AND links to the same page
you get my point?
awesome module btw 🔥
from barba.
Here's a non-jQuery fix based off @AlexandraKlein 's code:
Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;
Barba.Pjax.preventCheck = function(evt, element) {
if (
element.getAttribute("href") &&
element.getAttribute("href").indexOf("#") > -1
)
return true;
else return Barba.Pjax.originalPreventCheck(evt, element);
};
from barba.
I worked around with a little function. So because href="/#myanchor" doesn´t work with barba.js as described above, I only link to / and then scroll to anchor after timeout.
<a href="/" onclick="pageScroll('myanchor')">
function pageScroll(x) {
setTimeout(function () {
$('html, body').animate({
scrollTop: $('#'+x).offset().top
}, 1000);
}, 1000);
}
from barba.
@AlexandraKlein solution works sweet for me, then i manage by my own the scrollTo if there is a hash in the URL, thank you so much
from barba.
Hi @jdoubleu, I'm in vacation at the moment.
I'll try to reply in the next few days
from barba.
👍 +1 noticed this as well
from barba.
did anybody already write a workaround for this? Otherwise I'll give it a try. Saving the Hash, then removing it and apply it after transition sounds like a straight forward idea.
from barba.
Hello @max-schu
Actually it should already ignore link of the same page:
//In case you're trying to load the same page
if (Utils.cleanLink(href) == Utils.cleanLink(location.href))
return false;
.cleanLink
it removes the hash from an url.
Does it works for you?
from barba.
+1 for this issue (and for the awesome module comment)
from barba.
@max-schu Sorry for the late reply, I've been very busy.
Yes, it makes sense.
But if you are using standard Fragment identifier the browser will not scroll to the specified element if the transition is made with PJAX.
In your case I guess you're detecting the filter on the page shop.html
via JS, right?
If so, it would make more sense using a get parameter? no?
from barba.
totally makes sense. didnt see it that way. I'm sure there a way to use get parameters, im just not quite familliar with these so i decided to use hashes. However maybe it's an option to manually execute scrolling to an anchor after the page transition is done and url contains a hash. After all this would be a rather specific improvment, i'm sure anyone facing this issue, can make his way through with a workaround.
from barba.
Yep, scrolling to the element could be a solution.
But I would like to go through the specification to understand better how needs to work in specific cases (for example what if the element is hidden and etc.).
I will face this thing on the new release :)
Thank you again
from barba.
+1 with Isotope filtering.
<a href="/work#filter=.filter-item--vfx" tabindex="0">More VFX</a>
Anchor to go to work page filtered already by items that are only "VFX".
Barba ignores this and reloads the page.
from barba.
Is there any update or new ideas on this issue..? I tried all posted proposals and nothing worked for me!
Thanks
from barba.
+1 noticed this as well
from barba.
Same here
from barba.
@HectorLS would you be able to share your solution Hector? Getting this working right and finding the right solution is proving a little illusive to me!
from barba.
@deanc Solution works great, but I was getting errors when element
was null
. As such, I made a slight tweak that checked for element
in order to clean up any errors while still preserving the overall fix.
Barba.Pjax.originalPreventCheck = Barba.Pjax.preventCheck;
Barba.Pjax.preventCheck = function(evt, element) {
if (
element &&
element.getAttribute('href') &&
element.getAttribute('href').indexOf('#') > -1
)
return true;
else return Barba.Pjax.originalPreventCheck(evt, element);
};
from barba.
Here is what I do ( barba2 )
barba.hooks.beforeEnter((data) => {
// Also update menu here
updateHardReloadLinks(data.next.href);
});
/**
* Updates links that point to the current page
*/
function updateHardReloadLinks(url) {
const currentUrl = url || window.location.href;
Array.from(
document.querySelectorAll('[data-barba-prevent]')
).forEach((link) => link.removeAttribute('data-barba-prevent'));
Array.from(document.querySelectorAll('a')).forEach((link) => {
if (barba.url.clean(link.href) === barba.url.clean(currentUrl))
link.setAttribute('data-barba-prevent', true);
});
}
/**
* Prevent Barba hard reload
*/
document.addEventListener('click', (event) => {
if (event.target.closest('[data-barba-prevent]')) {
event.preventDefault();
}
});
updateHardReloadLinks()
from barba.
this seems to still not be working. none of these workarounds seem to function either. are there any other, similar libraries for this stuff i can use instead?
from barba.
from barba.
I had the same (or similar) issue and the solution was to timeout the changing of the url#hash.
// without setTimeout it throws an error
setTimeout(function () {
// set the hash
if (storedHash) location.hash = storedHash;
}, 100 );
See error below:
Uncaught RangeError: Maximum call stack size exceeded.
at t.e.force (barba.umd.js:1)
at t.e.go (barba.umd.js:1)
at t.e.D (barba.umd.js:1)
at t.e.force (barba.umd.js:1)
at t.e.go (barba.umd.js:1)
at t.e.D (barba.umd.js:1)
at t.e.force (barba.umd.js:1)
at t.e.go (barba.umd.js:1)
at t.e.D (barba.umd.js:1)
at t.e.force (barba.umd.js:1)
Solution
{
namespace: "clippings",
afterEnter(data) {
const cliplnk = document.querySelectorAll('a.timestamp');
cliplnk.forEach( el => el.addEventListener("click", () => {
// Store data
let hash = el.id;
localStorage.setItem('anchor', hash);
}
));
// Get data
const storedHash = localStorage.getItem('anchor');
// without setTimeout it throws an error
setTimeout(function () {
// set the hash
if (storedHash) location.hash = storedHash;
}, 100 );
setTimeout(function () {
localStorage.removeItem('anchor');
console.log('cleared hash');
}, 500 );
},
}
from barba.
FYI, a recent similar issue (not fixed yet) recently happen to another developer.
See #720.
from barba.
Related Issues (20)
- Barba.JS not work with GSAP Line Animation HOT 1
- Add setting to cache rendered HTML
- Footer overlapping issue on the documentation website HOT 2
- Improve documentation for WordPress HOT 2
- How to add/initialize other JS files after the page transition which is built with barba & gsap? HOT 2
- How to create transition sliding up card? HOT 1
- `RangeError` on manual hash change
- How to check for barbacontainer HOT 1
- Safari flash the leaving container HOT 6
- Add support for multiple `namespace` in `Views`
- Improve `next.container` availability
- About `View` transitions API HOT 3
- POST Form transition HOT 1
- Source map failed to load HOT 3
- Compiling error HOT 1
- Disable `prefetch` on specific links HOT 1
- Maintain element on transition HOT 1
- Typescript issue with documentation example HOT 1
- Page content is duplicated when opened HOT 1
- CSP violation from parseFromString HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from barba.