Good day, it seems that htsd tries to reattach elements in htsd-slid

Adding elements outside an htsd-slide about hackers-tiny-slide-deck HOT 2 CLOSED

soelen commented on August 19, 2024

Adding elements outside an htsd-slide

from hackers-tiny-slide-deck.

Comments (2)

tkareine commented on August 19, 2024 1

When HTSD installs slides, it wraps elements inside the <body> tag into <div>s. The <hr> tag marks the beginning of the next slide. This behavior is designed for html files generated from Markdown files in mind.

I don't know how you've generated or written the html file in which you want to install HTSD, but maybe creating html elements dynamically is an option for you. If so, then you can proceed as follows:

Add a template tag somewhere in the html document
Embed the HTSD script into the document with the data-manual attribute (this prevents the automatic installation of slides)
Add a script that installs HTSD slides manually and inserts new elements into the document based on the contents of the template

For example, you can append the following in the end of a Markdown document:

<script type="text/javascript" src="htsd.min.js" data-manual></script>
<script type="text/template" id="my-template">
  <div>hidden content</div>
</script>
<script type="text/javascript">
  window.htsd.installAll()
  const templateStr = document.getElementById("my-template").innerText.trim()
  const templateNode = document.createElement("template")
  templateNode.innerHTML = templateStr
  document.querySelector("body").appendChild(templateNode.content.firstChild)
</script>

Once you load that, you should see that <div>hidden content</div> is the last child element of <body>.

Also, you can replace <script type="text/template" id="my-template"> with <template id="my-template">, giving you a document fragment ready to be used. That would allow omitting the document.createElement("template") call in step 3. Unfortunately, the marked Markdown compiler wraps a <template> tag within a <p> tag.

from hackers-tiny-slide-deck.

soelen commented on August 19, 2024

Thank you for the quick and helpful response tkareine

from hackers-tiny-slide-deck.

Adding elements outside an htsd-slide about hackers-tiny-slide-deck HOT 2 CLOSED

Comments (2)

Related Issues (1)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent