Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Height to large: Interactive tag using pure JavaScript #2157

Open
Aljumaily opened this issue Apr 20, 2024 · 1 comment
Open

Height to large: Interactive tag using pure JavaScript #2157

Aljumaily opened this issue Apr 20, 2024 · 1 comment

Comments

@Aljumaily
Copy link

Aljumaily commented Apr 20, 2024 •
edited
Loading

I have been trying to use pure JavaScript within the .ptx file and the only way was to use the interactive tag (as mentioned here). The simple code snippet is the following:

<p>The start of the text.</p>
<interactive xml:id="my-sample-code" platform="javascript">
  <script>
    console.log("Hello!");
  </script>
</interactive>
<p>The end.</p>

The issue is that the entire script would be wrapped in an iframe tag, which has a width and height of 600 and produces the following:

large-height

Looking into the source code generated, from the following line:
<iframe id="my-sample-code" width="600" height="600" src="my-sample-code-if.html"></iframe><div class="para" id="sec-section-name-4">The end.</div></section></div>
change height="600" to max-height="600". Also, change the definition of the div inside of my-sample-codex-if.html that is linked in the above line from:
<body class="ptx-content ignore-math"><div style="width:600px; height:600px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

to having the height to be max-height:600px.

One might think we could pass height and weight through the interactive tag, but this wouldn't work for whatever reason. In other words, the following has no effect:

<interactive xml:id="my-sample-code" platform="javascript" width="90%" height="10%">
  <script>
    console.log("Hello!");
  </script>
</interactive>
@rbeezer
Copy link
Collaborator

rbeezer commented Apr 20, 2024

I think this should begin as a support question, and only when we know that there is something to be done, should it become a GitHub issue.

Please see the following, especially A.1 and A.3. Thanks.

Appendix A: Welcome to the PreTeXt Community
https://pretextbook.org/doc/guide/html/welcome.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rbeezer @Aljumaily