search

anseki / leader-line

Draw a leader line in your web page.
http://anseki.github.io/leader-line/
MIT License
3.01k stars 421 forks source link

leader-line with Reveal while using section #118

Closed sharontabakman closed 4 years ago

sharontabakman commented 4 years ago

Hi, I'm currently working with Reveal which is based on HTML and I would like to add leader-line to my presentation. Everything works till I'm adding

to it. For example with section: image

For example without section: image

Is there any simple solution for this issue?

HTML code: image

JS code: var startElement = document.getElementById('op2'), endElement = document.getElementById('op1'); new LeaderLine(startElement, endElement, { color: 'red', size: 8 });

anseki commented 4 years ago

Hi @sharontabakman, thank you for the comment. Since you didn't show actual code, this is an estimate. You added the line before the target elements are rendered. That is, the position of those element are not known. Then, you have to call position method when the target elements are rendered. For example:

Reveal.addEventListener('slidechanged', function(event) {
  if (event.indexh === 5) { // An index of the section that has the line is 5.
    line.position();
  }
});
sharontabakman commented 4 years ago

Hi anseki! Thank you for responding me but using- line.position(); does not help. here is my code: `<!doctype html>

reveal.js

work space

work space

`

As I've mentioned before, the arrow appears on the top left of the window and does not display correctly. For some reason when I remove the "section" from the code it works.. code without "section":

`<!doctype html>

reveal.js

work space

work space

`

anseki commented 4 years ago

There are some problems.

Anyway, as I said, the position method solves this issue. For example: https://jsfiddle.net/zu4mqgya/

sharontabakman commented 4 years ago

Thank you for the help!! Your example helped me solve the issue between sections.

anseki commented 4 years ago

:smile: