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

HTML Widget Issue: CSS Hover Effects and JavaScript Not Working #10549

Closed
3 tasks done
UsmanTechJive opened this issue Mar 8, 2024 · 3 comments
Closed
3 tasks done

HTML Widget Issue: CSS Hover Effects and JavaScript Not Working #10549

UsmanTechJive opened this issue Mar 8, 2024 · 3 comments

Comments

@UsmanTechJive
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Can the issue be reproduced with the default theme (daylight/midnight)?

  • I was able to reproduce the issue with the default theme

Could the issue be due to extensions?

  • I've ruled out the possibility that the extension is causing the problem.

Describe the problem

Recently, I was testing the HTML widget of SiYuan and I noticed that some CSS code doesn't work at all. For example, in this video, you can see that when I hover over the numbers, they don't show up, even though I've tested this in an .html file and it worked flawlessly. Also, I noticed that JavaScript <script> tags don't work either.

Expected result

When integrating custom HTML and CSS into the SiYuan HTML widget, the following behaviors are expected:

  1. CSS Hover Effects: CSS code, especially hover effects, should be fully functional within the widget. For instance, when a user hovers over elements (such as numbers or links), any specified CSS hover effects should be triggered and visible to the user. This functionality should mirror the behavior observed when the same HTML and CSS code is tested in a standalone .html file outside of SiYuan.

  2. JavaScript Execution: JavaScript code embedded within <script> tags should execute as intended within the HTML widget. This includes any DOM manipulations, event listeners, or dynamic content changes triggered by the JavaScript code. The execution and outcome of the JavaScript should be consistent with its performance when the code is run in a standard web environment.

Screenshot or screen recording presentation

Recorded SiYuan Video:

HTML.widget.need.improvments.mp4

Recorded Browser Video:

Working.Video.mp4

Version environment

- Version: v3.0.2
- Operating System: Windows 11 Pro
- Browser (if used):

Log file

siyuan.log

More information

No response
@Vanessa219
Copy link
Member

Vanessa219 commented Mar 9, 2024 •
edited

Use :host or section instead of :root

@UsmanTechJive
Copy link
Author

Thanks, I tried :host and it works, but I tried another example with JavaScript in the HTML widget seems not to be working.

As you can see, this works in the browser. When I press the toggle button, it works properly.

Working.in.Browser.mp4

But when I click on that HTML widget toggle button, it's not working.

JavaScript.not.working.in.HTML.widget.mp4

Here's the code for reference:

Toggle_Button.txt

Any help would be appreciated.

@Vanessa219
Copy link
Member

We use Custom Elements to render html code block. So to access the dom use shadowRoot

For example:

// id is your html block id
const iframeWidget = document.querySelector(`[data-node-id="20240310103238-3j71s17"] protyle-html`).shadowRoot.querySelector(".iframe-container")

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
@Vanessa219 @UsmanTechJive