Deck.js install path on a web site, or, using the base url element
rschram opened this issue · comments
Hello,
I have been using deck.js to create lecture slides for a class, and then posting these to a web site in a directory hierarchy that would be easier to browse. I've installed the core files and extensions at the root of the directory and changed the page template to include a 'base' element with a 'href' attribute at the root. I was hoping that this would mean that all of the relative URLs for the CSS and JS files would now resolve to the root dir. It also lets me keep all the images in a directory at root too.
- http://anthro.rschram.org/ is the root, where the core files are installed.
- http://anthro.rschram.org/1002/1.2 and
- http://anthro.rschram.org/1002/2.1 are two example decks.
As you can see, the basic CSS styling of the slides works, but certain extensions do not. The status snippet is displayed, but apparently the CSS for the snippet is not being applied. The goto snippet is installed and linked in the HTML, but the CSS/JS is not processed. The print.css file is linked, but a printout of these decks is only partly styled by core/print.css.
What can I do to create a sitewide install of deck.js for all my presentations?
Cheers,
Ryan
Hi Ryan,
I personally never used the base element and it seems there might be some issues/tricky things with it (http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag).
By the way, what are the symptoms of the extensions not fully working?
In your case, maybe you can just drop the base element and use absolute paths, for example "/extensions/goto/deck.goto.css" and "/images/knowles.sapeurs.png".
For easier inclusion of deck.js, I can also propose you to use my "includedeck" extension. I make a lot of slides and I made a bunch of extensions to make my life easier: http://home.heeere.com/tech-deckjs-ext.html , you might want to have a look at them.
Compared to what you're doing now, please note that my default setup uses a "fit" (that is, slides adapt to the screen but don't change their inner layout), and that I don't use the original print css.
Cheers,
Rémi
Thank you Rémi and everyone else who read this.
This issue is solved. In my enthusiasm for deck.js, I accidentally introduced an extra div closing tag after the section.slide elements, and used this as a template for my lecture slides. The frontpage index files at the dir root and in one subdir were based on boilerplate.html and so they worked as they should. From what I can tell, the JS and CSS do not presume the location of the HTML file, so you can in fact install the deck.js file tree in one location and use absolute paths in a template to apply it to HTML files elsewhere on a site.
The base url element is one way to do this, but as Rémi points out, when relative urls include anchors, the browser does not interpret them in the default way and this may cause problems for JS scripts which expect anchors to refer to the current page, not the base url page. For instance, if the return value for a next_slide() function is a relative url to be inserted dynamically into an href attribute, a base url element would throw you back to the base url instead a location within the current page. I don't know JS or the deck.js code, so I can't say if base url elements cause problems for these scripts. It was not the cause of my problem this time. In fact, I could move between slides fine. I could not see the goto form and certain style rules were being ignored. It was all because I didn't put the extension widgets in the right div element, that's all.
Cheers, Ryan