How to show text only in static Pluto notebook?

Tooling Pluto
1

I would like to have a text in a Pluto notebook that would show only if opened in the static version (something like: for interactive version visit website x). Any advice?

2

I think I have found a solution:

HTML("""
<div>
This is the interactive version.
</div>
<script>
if (window.pluto_disable_ui){
currentScript.previousElementSibling.innerText = "This is the static version."
}
</script>
""")
3

I think in this case it’s cleaner to rely on CSS rather than javascript for the purpose as it will also work in case someone has javascript blocking plugins (though other parts of Pluto might break in that case).

html"""
<div class='only-static'>This is the text that only appears in static mode!</div>
<style>
	div.only-static {
		display: none;
	}
	body.disable_ui div.only-static {
		display: block;
	}
</style>
"""

You can easily have a text changing from interactive to static like in your last example and without using JS like so:

html"""
<div class='only-static'>This is the text that only appears in static mode!</div>
<div class='only-interactive'>This is the text that only appears in interactive mode!</div>
<style>
	div.only-static {
		display: none;
	}
	body.disable_ui div.only-static {
		display: block;
	}
	body.disable_ui div.only-interactive {
		display: none;
	}
</style>
"""
1 Like
4

You are right, that is a better solution. Thank you.