I have a small query that I've been unable to resolve on my own despite quite a bit of researching. When I display an html file in the multitext of manuscript viewer, I'd like a short bit of text to toggle an additional stylesheet on and off.
So, for instance, liv_002513_TEI.xml uses transcription.xsl for its transformation to HTML. Thanks to transcription.xsl, the HTML file points to the following stylesheets:
I'd like to add an additional stylesheet, let's say style2.css. This stylesheet would not be applied like the others (by default), but rather in the HTML there would be bit of text enclosed in <a> that said "Click me" (for instance) and when that text was clicked, the additional stylesheet would be applied. If the text was clicked yet again, the stylesheet would be unapplied.
From what I've seen the additional stylesheet should be given thus in the HTML file:
And the click and adding the additional stylesheet might be sorted out with some jquery or javascript in a <script> in the <head> of the <html>, but beyond that I've not been able to find the right formula or make the pieces work together since this is a bit out of my depth.
The easiest way to do this does not require adding another css file, just the setting of a class on a top level element, and using that class to "namespace" elements below and change their display. This example might answer your question (Example doesn't require jQuery).
I have a small query that I've been unable to resolve on my own despite quite a bit of researching. When I display an html file in the multitext of manuscript viewer, I'd like a short bit of text to toggle an additional stylesheet on and off.
So, for instance, liv_002513_TEI.xml uses transcription.xsl for its transformation to HTML. Thanks to transcription.xsl, the HTML file points to the following stylesheets:
I'd like to add an additional stylesheet, let's say style2.css. This stylesheet would not be applied like the others (by default), but rather in the HTML there would be bit of text enclosed in
<a>that said "Click me" (for instance) and when that text was clicked, the additional stylesheet would be applied. If the text was clicked yet again, the stylesheet would be unapplied.From what I've seen the additional stylesheet should be given thus in the HTML file:
<link rel="stylesheet alternate" type="text/css" href="http://livingstoneonline.github.io/LEAP-XSLT/style2.css"/>And the click and adding the additional stylesheet might be sorted out with some jquery or javascript in a
<script>in the<head>of the<html>, but beyond that I've not been able to find the right formula or make the pieces work together since this is a bit out of my depth.The easiest way to do this does not require adding another css file, just the setting of a class on a top level element, and using that class to "namespace" elements below and change their display. This example might answer your question (Example doesn't require jQuery).
https://codepen.io/nbanks/pen/oGPOoX/
OK, thank you very much! I'll take it from here.