Hi,
I try to implement impress.js (Very cool prezi like). But I have css conflicts and other stuff
- Can I load CSS per page? and as such that when the template is destroyed, I go to another page and import fresh css for that page only? How can it be that the page is fine first, then I switch routes, come back and you get the picture above…* Meteor puts all css in 1 file, or does it do something different with import statements?
- Something “strange is happening”. If I go to the impress page directly, it works fine.
But if I go to another route, at first I could not click on anything because impress.js added a class to my body element.
<body class="impress-supported impress-enabled impress-on-one-more-thing" style="height: 100%; overflow: hidden;">
Removing this class made my page clickable again. But when I go back, impress does not recognize it is loaded or something… It triggers the “unsupported browser error”.
If I just refresh the page everything works fine. so It has something to do with the css or js…
import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import { senseConfig as config } from '/imports/api/config';
import '/imports/ui/UIHelpers';
import 'impress';
import './impress.html';
import './impress.css';
var api ={};
Template.impress.onRendered(function() {
console.log('impress onRendered');
// $('body').addClass('impress-supported impress-enabled impress-on-questions');
// location.reload();
api = impress();
console.log('impress API: ', api);
api.init();
})
Template.impress.onDestroyed(function() {
console.log('impress onDestroyed');
$('body').removeClass('impress-supported impress-enabled impress-on-questions');
api = null;
})
thank you!
