I'm playing around with Barba.js and Swup.js transition libraries in very stripped back form.
I have the transitions working fine, but the hard-coded "is-active" class to highlight the menu buttons in the menu is now not working - I assume because of the way that Swup caches pages? The mobile version of the same page is experiencing issues as well - the hamburger and slide out menu work fine, but the links have stopped working.
I've tried adding the class="transition-fade" to each button as per the documentation, and I'm surprised that the transitions are working without being added to any buttons! Am I missing something here...?
I've created a Stackblitz here - https://stackblitz.com/edit/web-platform-geo8vq?file=index.html
Any help with getting my head around getting this working along with any best practices would be greatly appreciated!
Andy
Related
I'm working on a website, and it flashes a white screen between page loads, every time I click a link. I've read a lot of other posts on similar issues, but each scenario looks to be different. How do I best go about troubleshooting where this flash is coming from?
The site is using WordPress, custom built from the Genesis Child Sample theme. I'm not greatly versed in the Inspector tool. Anything I should be focusing on in reviewing/testing?
This issue ended up coming from an animation I was unaware of on the .site-container. I removed this CSS, and the issue was resolved.
I am using UX builder theme.
Page link: [here]
In this page we used only sliders.. In mobile view slider's sections are overlapping except last slider (link).. tried everything but not getting solution.. Today I removed 2 sections from last slider (Blends of Natural Ingredients) then its coming proper in mobile version. But I need those sections.. What went wrong, where I did wrong, anyone pls..
The same issue having with blog posts.. [link]
Waiting for your valuable response..
Thank you in advance..
Im working with Twitter Bootstrap 3. Im looking at using the Navbar component - however it seams to me like its not working properly - even on the Bootstrap website !
When you collapse the view-port down and the nav collapses, if you click on the nav to open it... Once open, if you click the "dropdown" - it opens too, however the window does not size properly, and the links at the end of the list end up getting chopped off !
You can see the example on the Bootstrap site behaving like this:
http://getbootstrap.com/examples/navbar-fixed-top/
Im using Chrome Version 31.0.1650.63 on the mac also does the same thing in Safari 7.0
Has anyone experienced this or got a solution ?
It has a scroll-bar, did you observed it? if I understood your question properly.
I'm trying to create a simple button to open/close a collapsible part of my website implemented in twitter bootstrap. I'd like to use the collapsible javascript plugin, but it doesn't seem to work just right: The folding animation happens "on close", but "on open" it's instantaneous.
Here's a jsFiddle demostrating the issue.
http://jsfiddle.net/whUvL/2/
On my navigator (Chrome 22.0.1229.94 on mac) the first time the button is clicked, the h2 "pops in" instantaneously. Clicking the button again "folds" the h2 with a nice animation. Clicking again "shows it" very quickly.
How can I have the animation work "when opening" as well as "when closing"? Should I add more html/css, or maybe change some js?
Also, I've noticed that this happens with jquery 1.8.2 and the latest twitter boostrap. With jquery 1.7.2 and bootstrap 2.0.2 it seems to work just fine. I'd like to use the latest of both if possible.
Ok I have found the problem. It's right there in the docs:
Requires the Transitions plugin to be included.
In my defense, I must say that that part was grayed out and was not very evident as a requirement.
Once I included the transitions module, the animations started working again:
http://jsfiddle.net/whUvL/4/
Kudos to #funzionpro, who put me on the right track - once I knew that including the complete set of javascripts it worked, the rest was easy to deduce.
(I will mark this answer as correct in two days, until then I must leave it open because SO's policies regarding auto-responses)
it seems to work fine if you add bootstrap.js of 2.1.1
working fiddle: http://jsfiddle.net/whUvL/3/
I have a small web application that uses twitter bootstrap tabs. Recently it has stopped working.
In investigating this, it appears the basic tabs on bootstraps own demo page don't work either. See: http://twitter.github.com/bootstrap/components.html#navs
I've tested this in Firefox, Chrome and IE. On multiple machines. Bootstrap tabs are broken across the board.
Any ideas what's going on?
Thanks
The Tabs on the page you mention are just the visual elements; they don't have any logic to hide and display alternative tab content. For that you need javascript as illustrated on the Javascript plugins page.