How to show text only in static Pluto notebook?

Tooling Pluto
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