array terugkrijgen van een javascript naar php

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: « vorige 1 2

Ger van Steenderen
Tutorial mod

Ger van Steenderen

26/05/2020 11:47:01
Quote Anchor link
Wat ik eerder al aangaf is dat de canvas wordt aangemaakt als child van div#parentNode_11, in de element inspector zie na het laden van de pagina:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div id="parentNodes_11" class="parent">
    <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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
.parent {
    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
 
PHP hulp

PHP hulp

01/06/2020 01:07:04
 
Sietsko Bos

Sietsko Bos

26/05/2020 12:39:33
Quote Anchor link
Ik begrijp dan niet wat ik fout doe.
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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


http://www.jmgedrag.nl/test.jpg

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
Tutorial mod

Ger van Steenderen

26/05/2020 13:44:35
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
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;
 
Sietsko Bos

Sietsko Bos

26/05/2020 15:00:05
Quote Anchor link
Hmmm bijzonder...
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. :)
 

Pagina: « vorige 1 2



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.