HTML Embedding - successful end of story
202 views
Skip to first unread message
Julian Moore
Dec 17, 2015, 8:00:17 AM12/17/15
to draw.io
Just to close things down...
Draw.io HTML embedding works perfectly well on a "simple" web-page; though the fault is not intrinsically with draw.io embedding code, it does not work reliably when there are divs that are not initially visible, a problem exacerbated when divs are nested.
The incompatibilities of embedding and hidden divs are browser dependent and lie, ultimately I believe, with the fact that div properties, particularly height and width, have not stabilised at the time the embedder javascript runs, leading to diagram sizing issues (amongst other things).
The worst possible approach to hiding divs is to use display: none; the least bad is to clip to a zero sized rectangle, but even that does not always eliminate rendering issues, or, particularly in the case of IE11 (in Edge or IE10 modes), misplaced zoom controls.
The ultimate solution is therefore never to embed a diagram in a hidden div; if this rule is obeyed everything seems to work fine.
My solution to the need to hide divs (for large and complex articles, especially if they are to support RWD for viewing on mobile devices) has been to use a little javascript and to add an event listener for the window to trigger div hiding once the page has loaded (I continue to use clipping and have not checked whether going back to display: none becomes viable - I don't see why that shouldn't work though). Whilst this is a bit inelegant, and the render shows everything before it is then hidden, it almost looks like a page preview given that the hiding uses animations, so quite acceptable.
I remain absolutely delighted with draw.io's capabilities and the quality of the implementation and I'm very pleased to be able to use them and link to other articles from objects in an SVG diagram.
You can see results here (without links in the SVG) and here (with clickable links in the SVG).
Results are good and consistent in desktop FF, Chrome and IE (with the minor exception of superfluous scrollbars in IE only), and in responsive views emulating mobile devices in the three browsers. In real life, the zoom boxes are sometimes misplaced in the Android Internet browser on my Galaxy S4 - but they are OK in Chrome.
Best regards, Julian
Draw.io HTML embedding works perfectly well on a "simple" web-page; though the fault is not intrinsically with draw.io embedding code, it does not work reliably when there are divs that are not initially visible, a problem exacerbated when divs are nested.
The incompatibilities of embedding and hidden divs are browser dependent and lie, ultimately I believe, with the fact that div properties, particularly height and width, have not stabilised at the time the embedder javascript runs, leading to diagram sizing issues (amongst other things).
The worst possible approach to hiding divs is to use display: none; the least bad is to clip to a zero sized rectangle, but even that does not always eliminate rendering issues, or, particularly in the case of IE11 (in Edge or IE10 modes), misplaced zoom controls.
The ultimate solution is therefore never to embed a diagram in a hidden div; if this rule is obeyed everything seems to work fine.
My solution to the need to hide divs (for large and complex articles, especially if they are to support RWD for viewing on mobile devices) has been to use a little javascript and to add an event listener for the window to trigger div hiding once the page has loaded (I continue to use clipping and have not checked whether going back to display: none becomes viable - I don't see why that shouldn't work though). Whilst this is a bit inelegant, and the render shows everything before it is then hidden, it almost looks like a page preview given that the hiding uses animations, so quite acceptable.
I remain absolutely delighted with draw.io's capabilities and the quality of the implementation and I'm very pleased to be able to use them and link to other articles from objects in an SVG diagram.
You can see results here (without links in the SVG) and here (with clickable links in the SVG).
Results are good and consistent in desktop FF, Chrome and IE (with the minor exception of superfluous scrollbars in IE only), and in responsive views emulating mobile devices in the three browsers. In real life, the zoom boxes are sometimes misplaced in the Android Internet browser on my Galaxy S4 - but they are OK in Chrome.
Best regards, Julian
Jan Archer
Nov 18, 2016, 3:00:39 PM11/18/16
to draw.io
Hi Julian,
I've been searching all morning for an issue that I have with embedded HTML that I'm using on our internal wiki. I've just discovered Draw.io and am delighted with it's capabilities, but am still so new I don't understand how to affect functionality when exported to HTML from Draw.io. I've just posted a question to the group, but have no answers, yet. I'm in a bit of a bind with my boss and am determined to figure this out before Monday. If you have a minute to help me, that would be great.
Note: I know HTML pretty well, but not java script at all. I've been able to create process flow charts and create links to wiki pages and sections of wiki pages...all works beautifully. However, when a user clicks a process element that is not linked to anything, the flowchart opens in another graphics viewing window (is that the lightbox?). I don't want that to happen...just want nothing to happen. Can that be done? If so, how do I do that?
Also, when I click a link element, can I somehow make the browser open another tab...is this doable in Draw.io OR is this a browser issue?
Any help would be greatly appreciated, if you have time.
Be gentle...thanks, Jan
Reply all
Reply to author
Forward
0 new messages