Comments (6)
Hey folks, similar problem here.
Apart from the meta title, normally the pages on my websites should change the og:image and og:title for the social media sharing (facebook, twitter, etc).
So @luruke , as I could understand, your solution is to change these parameters by js, right?
Something like this:
Barba.Dispatcher.on('newPageReady', function() { document.title = "New title"; }
(???)
By the way, huge Barba fan here!!!
Just launched this: http://douroscala.pt
from barba.
I'm working on a project and I wanted to include meta:theme-color and msapplication-TileColor in the head for a little bit of pizazz. I was able to dynamically rewrite the whole header by grabbing the PJAX head string from Barba.Pjax.Dom.currentHTM, and rewriting the DOM head:
Barba.Dispatcher.on('newPageReady', function(el) {
var el = document.createElement( 'html' );
el.innerHTML = Barba.Pjax.Dom.currentHTML;
var newhead = el.getElementsByTagName('head')[0].innerHTML;
document.getElementsByTagName('head')[0].innerHTML = newhead;
});
from barba.
Hi @terion-name!
You can just have one container and one single transition at the time.
For the elements outside the container (usually footer and header) you should update manually using Barba.js events.
The title meta is already updated automatically.
For my experience, usually:
- The only thing I change outside the container are the active class on the menu.
- Apart from the title meta, all the others tags don't need to change.
Hope it makes sense.
Can you give me some examples where barba.js features are not suitable for your needs?
Cheers
from barba.
@luruke thank you
Currently I'm deciding about to use barba or not (it looks great btw, so I really want), so I don't have live examples at the moment. But the case why I'm asking this question is current site that have different header and footer states on different pages. Not just nav active states, but the entire header/footer contents
And I don't see events in barba that can help with this :(
Currently I see just one solution — wrap entire layout with barba-wraper and change the whole page body and handle transition effects manually by events..
from barba.
Hello, @terion-name .
So, yes, in your case you may try to wrap all your body in a container.
Cheers
from barba.
Hello @luis-carvalho ,
nice website!
Your "issue" has been already discussed:
#82
http://stackoverflow.com/questions/41793016/barba-js-pjax-js-and-head-replacing
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.