array terugkrijgen van een javascript naar php
Code (php)
1
2
3
4
2
3
4
<div id="parentNodes_11" class="parent">
<canvas width="300" height="112" style="position: absolute;"></canvas>
.. . .
</div>
<canvas width="300" height="112" style="position: absolute;"></canvas>
.. . .
</div>
Zoals je ziet heb ik in mijn test de class parent toegevoegd (voor het geval je meerdere blokken wilt maken):
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.parent {
width: 300px;
margin: auto;
margin-top: 1.5em;
overflow: hidden;
}
width: 300px;
margin: auto;
margin-top: 1.5em;
overflow: hidden;
}
Overigens (maar wel belangrijk) heb ik de code in mijn vorige reactie, waar de coördinaten van de lijnen worden bepaald, aangepast met een correctie op de y-waarde.
Gewijzigd op 26/05/2020 11:48:55 door Ger van Steenderen
Ik heb de class toegevoegd en de html aangepast, maar de y-as klopt de verbinding niet.
Ook heb ik het stukje javascript aangepast.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form id="form1" name="form1" method="post">
<div id="parentNodes_11" class="parent">
<canvas width="300" height="112" style="position: absolute;"></canvas>
<div class="nodes">
<div class="group1">
<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false" data-connected-to=""></span></div>
<div class="node">fiets <span class="node2" data-connect="false" data-id="1" data-use="false" data-connected-to=""></span></div>
<div class="node">water <span class="node3" data-connect="false" data-id="2" data-use="false" data-connected-to=""></span></div>
<div class="node">zwem <span class="node4" data-connect="false" data-id="3" data-use="false" data-connected-to=""></span></div>
</div>
<div class="group2">
<div class="node">broek <span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
<div class="node">band <span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
<div class="node">wiel <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
<div class="node">kraan <span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<input name="submit" type="submit" id="submit" formmethod="POST" value="Verzenden">
<input name="_lines" type="hidden" id="_lines">
</form>
<div id="parentNodes_11" class="parent">
<canvas width="300" height="112" style="position: absolute;"></canvas>
<div class="nodes">
<div class="group1">
<div class="node">auto<span class="node1" data-connect="false" data-id="0" data-use="false" data-connected-to=""></span></div>
<div class="node">fiets <span class="node2" data-connect="false" data-id="1" data-use="false" data-connected-to=""></span></div>
<div class="node">water <span class="node3" data-connect="false" data-id="2" data-use="false" data-connected-to=""></span></div>
<div class="node">zwem <span class="node4" data-connect="false" data-id="3" data-use="false" data-connected-to=""></span></div>
</div>
<div class="group2">
<div class="node">broek <span class="node5" data-connect="false" data-id="0" data-use="false"></span></div>
<div class="node">band <span class="node6" data-connect="false" data-id="1" data-use="false"></span></div>
<div class="node">wiel <span class="node7" data-connect="false" data-id="2" data-use="false"></span></div>
<div class="node">kraan <span class="node8" data-connect="false" data-id="3" data-use="false"></span></div>
</div>
<div class="clearfix"></div>
</div>
</div>
<input name="submit" type="submit" id="submit" formmethod="POST" value="Verzenden">
<input name="_lines" type="hidden" id="_lines">
</form>
Zoals je ziet staat de lijn te laag.
Als ik de margin-top: 1.5em; even weghaal staat de lijn wel goed.
Heb ik dan toch iets vergeten in het javascript aan te passen?
Gewijzigd op 26/05/2020 12:41:26 door Sietsko Bos
Ger van Steenderen op 26/05/2020 11:47:01:
Overigens (maar wel belangrijk) heb ik de code in mijn vorige reactie, waar de coördinaten van de lijnen worden bepaald, aangepast met een correctie op de y-waarde.
Wellicht heb je dit over het hoofd gezien.
Voor de volledigheid het aangepaste javascript:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
_top_node = _left_node.parent().parent().parent().parent();
_adj_x = _top_node.offset().left;
_adj_y = _top_node.offset().top;
//Get Left point and Right Point
_left.x = _left_node.offset().left + _left_node.outerWidth()-_adj_x;
_left.y = _left_node.offset().top + (_left_node.outerHeight() / 2)-_adj_y;
_right.x = _right_node.offset().left-_adj_x;
_right.y = _right_node.offset().top + (_right_node.outerHeight() / 2)-_adj_y;
_adj_x = _top_node.offset().left;
_adj_y = _top_node.offset().top;
//Get Left point and Right Point
_left.x = _left_node.offset().left + _left_node.outerWidth()-_adj_x;
_left.y = _left_node.offset().top + (_left_node.outerHeight() / 2)-_adj_y;
_right.x = _right_node.offset().left-_adj_x;
_right.y = _right_node.offset().top + (_right_node.outerHeight() / 2)-_adj_y;
Ik had dat stukje inderdaad vervangen, dus nogmaals eroverheen geplakt en nu werkt het perfect.
Ik was blijkbaar toch iets ervan vergeten.
Super bedankt Ger, zo kan ik weer verder. :)