Detect cell ID using javascript

[Masacroso]

This is the proposition for an enhancement: the possibility to add custom CSS to each cell in a notebook.

Why? It is better to say it with a particular case: I have a notebook exploring different graphs of an stochastic process and a related Monte Carlo method. In a cell there are some parameters that transforms all the graphs in the notebook, however as the notebook have a vertical structure to see how the graphs change I need to scroll up in the cell to the cell of parameters. A possibility to remedy this is making a kind of copy of the parameter cell close to each graph, but this could be messy and repetitive, a contradiction to the DRY principle of programming!

However if I had a way to change easily the CSS of each cell then I can add a rule like position: sticky and some margins to make a particular cell fixed in a position of the screen in spite of the scrolling, this would be very useful for a cell containing variable parameters.

[fonsp]

Do you mean that you want to write a single CSS sheet to apply to each cell, or do you want to write multiple CSS sheets, each applied (i.e. scoped) only to the cell where you wrote it?

[fonsp]

If it's the former, then you're in luck!

Just add this cell:

html"""
<style>
pluto-output p {
	font-family: cursive;
	color: green;
}
</style>
"""

Have a look at https://github.com/fonsp/Pluto.jl/blob/master/frontend/editor.css to see which rules you want to add/override

[Masacroso]

Do you mean that you want to write a single CSS sheet to apply to each cell, or do you want to write multiple CSS sheets, each applied (i.e. scoped) only to the cell where you wrote it?

If I understood correctly it is the second, I mean, I would like to put a cell in a particular position of the viewport and with a particular behavior, by example giving to the cell (probably contained in some div element) the CSS property of position: sticky or position: fixed.

[fonsp]

Ah, that's neither, but one could write this with JS:

Walk up the DOM from this until you hit a <pluto-cell>, get its id, and then generate (ie return) a <style> node that sets the style.

Pseudocode:

html"""
<script>
const cell = walkupthedomuntilcell(this)

return html`<style>
pluto-cell#${cell.id} {
    something
}
</style>`

</script>
"""

[Masacroso]

Oh! I didn't thought about this possibility, that is, to run JS inside a cell. I would try something in this way to see what happens.

[fonsp]

I think that the solutions we discussed in this issue are not going in the right direction. @Masacroso can you open a new issue in PlutoUI about "popping out a cell" to make it sticky? (Right?)