Comments (10)
@Jonathlee
This should do the job:
<header>
<nav class="navigation">
<ul>
<li><a href="index.html" class="navigation__link is-active">Home</a></li>
<li><a href="about/index.html" class="navigation__link">About</a></li>
<li><a href="about/team/index.html" class="navigation__link">Team</a></li>
</ul>
</nav>
</header>
<div id="barba-wrapper">
<div class="barba-container">
…
</div>
</div>
.navigation .is-active {
color: red;
}
// Barba.js
Barba.Pjax.start();
Barba.Prefetch.init();
Barba.Dispatcher.on('newPageReady', function(currentStatus) {
const link = currentStatus.url.split(window.location.origin)[1].substring(1); // get path of current page
const navigation = document.querySelector('.navigation');
const navigationLinks = navigation.querySelectorAll('.navigation__link');
const navigationLinkIsActive = navigation.querySelector(`[href="${link}"]`);
Array.prototype.forEach.call(navigationLinks, (navigationLink) => navigationLink.classList.remove('is-active')); // remove CSS class 'is-active' from all .navigation__links
navigationLinkIsActive.classList.add('is-active'); // add CSS class to current .navigation__link
});
from barba.
Got it working like this. First add a way to recognize elements that need to be updated, like data-barba-update
. Then add this code:
Barba.Dispatcher.on('newPageReady', function(newStatus, oldStatus, container, html) {
const navs = $(html).find('[data-barba-update]') // New ones
$('[data-barba-update]').each((i,el) => $(el).html($(navs[i]).html())) // Replace each old ones
})
from barba.
@jacobimpson that's pretty nice! Any chance you have a vanilla js example?
Edit:
Ah. Struggled with parsing. Duh...
Here's where I ended up;
const parser = new DOMParser();
const content = parser.parseFromString(html, "text/html");
const navs = content.querySelectorAll('.navigation__link');
document.querySelectorAll('.navigation__link').forEach(function(el, index) {
const classes = navs[index].classList.value;
el.setAttribute('class', classes);
});
from barba.
Expanding on @nicooprat 's example, you can do something like this, which will update only the classes, rather than all of the markup..
const navs = $(html).find('[data-barba-update]');
$('[data-barba-update]').each(function(index) {
const newClasses = $(navs[index]).get(0).classList.value;
$(this).attr('class', newClasses);
});
from barba.
@marcobiedermann (a bit old but thought this might help someone)
In my case navigationLinkIsActive
was always returning a null object. Changing '[href="${link}"]');
to ("a[href='" + link + "']")
seems to work, although the why is beyond my js level :)
Thanks again!
from barba.
@psamhaber In the example @marcobiedermann was using the ES6 template literals and not the simple single quote. That's why ;)
Anyway now barba.js newPageReady
has a fourth argument which contains the raw HTML of the new page, maybe it's easier to use it in order to change the active of the nav bar.
Cheers
from barba.
Hi @Jonathlee .
In order to update the menu current items you have two choices:
- Put the menu inside the
.barba-container
, so it will changed at each page "change" - Manually update the active class via JS (you can use Events)
I invite you to read this article I wrote in order to better understand how barba.js works.
Let me know if you have any other question :)
Feel free to close the issue if you solved the problem.
from barba.
@luruke thank you very much for the answer.
from barba.
I see! Thanks for taking the time to explain, much appreciated!
Re: using newPageRawHTML
instead: I reckon the performance of this vs the above code would be similar for not overly complex pages?
Cheers
from barba.
Maybe it's a little bit out of the topic and i apologize in advance.
I was also playing with that and did on my way
var url = $(location).attr('href').replace(/\/+$/,''),
parts = url.split("/"),
last_part = parts[parts.length-1];
$("nav ul a").each(function(idx, li) {
if($(this).attr('href').includes(last_part)) {
$(this).removeAttr('href');
}
});
My problem is that when i click 2nd time on - #hamIcon - i got err - Uncaught TypeError: Cannot read property 'includes' of undefined.
Seems like var last_part is undefined
Menu is out of .barba-container
from barba.
Related Issues (20)
- Add `dark` mode support HOT 4
- Loading JS files on EVERY page HOT 2
- Documentation review HOT 1
- Refreshing page GSAP animations are not working using BarbaJS HOT 1
- Limit the number of prefetched links
- THREEJS meshes disappearing after barba transition HOT 1
- 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
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.