Javascript Course

With the JavaScript object presented in this page you can draw arrow markers between the clicks coordinates inside a html element. The arrow markers are created with SVG.
The script contains a button that Enables /Disables the drawing action, and another button to delete the SVG arrow markers.

Code of the drawArrowSVG object

- Click on the code to select it. 
<button id="btn_drawar">Enable Drawing</button> 
<button id="btn_delar">Delete Arrows</button>
<script>
//REPLACE 'container' WITH THE ID OF ELEMENT WHERE TO DRAW ARROWS
var elm_container = document.querySelector('#container');
 
//Draw arrows with SVG in the $parent element between the click coords
function drawArrowSVG(parent){
 //From: https://coursesweb.net/javascript/
  var me = this;
  var x, y = 0;  //contain the coordinates
  var drawarrow =0;  //if 2, draw the arrow
  var c_e1 ={};  // x,y coords for base line
  var c_e2 ={};  // x,y coords for arrow
  var container = parent;
  me.draw =-1;  //if 1 allow to draw the arrow

  // Get X and Y position of the elm (from: vishalsays.wordpress.com)
  function getXYpos(elm) {
    x = elm.offsetLeft;        // set x to elm’s offsetLeft
    y = elm.offsetTop;         // set y to elm’s offsetTop

    elm = elm.offsetParent;    // set elm to its offsetParent

    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x
    //offsetTop to y and set elm to its offsetParent
    while(elm != null) {
      x = parseInt(x) + parseInt(elm.offsetLeft);
      y = parseInt(y) + parseInt(elm.offsetTop);
      elm = elm.offsetParent;
    }

    // returns an object with "xp" (Left), "=yp" (Top) position
    return {'xp':x, 'yp':y};
  }

  // Get X, Y coords
  function getCoords(e){
    //if $draw is 1, get the coords and draw arrow
    if(me.draw ==1){
      var xy_pos = getXYpos(this);

      // if IE
      if(navigator.appVersion.indexOf("MSIE") != -1) {
        // in IE scrolling page affects mouse coordinates into an element
        // This gets the page element that will be used to add scrolling value to correct mouse coords
        var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

        x = event.clientX + standardBody.scrollLeft;
        y = event.clientY + standardBody.scrollTop;
      }
      else {
        x = e.pageX;
        y = e.pageY;
      }

      x = x - xy_pos['xp'];
      y = y - xy_pos['yp'];

      //set coords in c_e2 and c_e1; if drawarrow is 2 draw the arrow
      drawarrow++;
      if(drawarrow ==2){
        c_e2 = {x:x, y:y};
        drawarrow =0;
        drawArrow(c_e1, c_e2);
      }
      else c_e1 = {x:x, y:y};
    }
  }

  //append in #container SVG arrow with base in $c_e1 and the arrow in $c_e2 coords
  function drawArrow(c_e1, c_e2){
    var arrsvg = '<svg class="arrsvg" style="position:absolute; top:0; left:0; margin:0; width:99.8%; height:99.9%;"><defs><marker id="arrow" markerWidth="8" markerHeight="8" refx="3" refy="4" orient="auto"><path d="M1,1 L1,7 L7,4 L1,1" style="fill:red;" /></marker></defs><path d="M'+ c_e1.x +','+ c_e1.y +' L'+ c_e2.x +','+ c_e2.y +'" style="stroke:red; stroke-width: 2.3px; fill: none; marker-end: url('+ location.href.replace(/[#]*$/ig, '') +'#arrow);"/></svg>';
    container.insertAdjacentHTML('beforeend', arrsvg);  //add the arrow to the end in #container
  }

  //register click on $container to get the coords
  container.addEventListener('click', getCoords);
}

//draw arrow with SVG between the clicks coords in $elm_container
var drawAr = new drawArrowSVG(elm_container);

//register click on #btn_drawar to enable /disable drawing action
var btn_drawar = document.getElementById('btn_drawar');
if(btn_drawar) btn_drawar.addEventListener('click', function(e){
  drawAr.draw *=-1;
  e.target.style.background = (drawAr.draw ==1) ? '#f00' :'#dadafb';
  e.target.innerHTML = (drawAr.draw ==1) ? 'Disable Drawing' :'Enable Drawing';
});

//register click on #btn_delar to delete arrows
var btn_delar = document.getElementById('btn_delar');
if(btn_delar) btn_delar.addEventListener('click', function(e){
  var arrsvg = document.querySelectorAll('.arrsvg');
  for(var i=0; i<arrsvg.length; i++) arrsvg[i].outerHTML ='';
});
</script>

Usage

- Copy the code of the script above into your page.
- To the elm_container variable, replace "container" with the ID of the element where you want to draw arrows.
- By default, the arrow color is red, to change it, modify the "red" value in this code: style="fill:red;" in the drawArrow() function.

Example

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw arrow markers with clicks in html element</title>
<style>
#container {
position:relative;
width:150px;
height:185px;
margin:8px auto;
background:#fefefe;
border:2px dashed #111;
padding:3px;
}
#dv1, #dv2, #dv3 {
width:60px;
height:60px;
background:#88ee00;
border:1px solid blue;
}
#dv1 {
margin:0 0 0 80px;
}
#dv2 {
margin:0 0 0 40px;
}
#btn_drawar {
display:block;
margin:8px auto;
background:#dadafb;
}
</style>
</head>
<body>
You can draw arrow markers with SVG inside this element when the button "Enable Drawing" is pressed (has red color).
<div id="container">
<div id="dv1">DIV 1</div>
<div id="dv2">DIV 2</div>
<div id="dv3">DIV 3</div>
</div>
- Click on this button, to Enable the drawing action, then click inside the element above to draw arrows between clicks coords.<br>
If you click again on the button, the drawing action is disabled.
<button id="btn_drawar">Enable Drawing</button> 
<button id="btn_delar">Delete Arrows</button>
<script>
//REPLACE 'container' WITH THE ID OF ELEMENT WHERE TO DRAW ARROWS
var elm_container = document.querySelector('#container');
 
//Draw arrows with SVG in the $parent element between the click coords
function drawArrowSVG(parent){
 //From: https://coursesweb.net/javascript/
  var me = this;
  var x, y = 0;  //contain the coordinates
  var drawarrow =0;  //if 2, draw the arrow
  var c_e1 ={};  // x,y coords for base line
  var c_e2 ={};  // x,y coords for arrow
  var container = parent;
  me.draw =-1;  //if 1 allow to draw the arrow

  // Get X and Y position of the elm (from: vishalsays.wordpress.com)
  function getXYpos(elm) {
    x = elm.offsetLeft;        // set x to elm’s offsetLeft
    y = elm.offsetTop;         // set y to elm’s offsetTop

    elm = elm.offsetParent;    // set elm to its offsetParent

    //use while loop to check if elm is null
    // if not then add current elm’s offsetLeft to x
    //offsetTop to y and set elm to its offsetParent
    while(elm != null) {
      x = parseInt(x) + parseInt(elm.offsetLeft);
      y = parseInt(y) + parseInt(elm.offsetTop);
      elm = elm.offsetParent;
    }

    // returns an object with "xp" (Left), "=yp" (Top) position
    return {'xp':x, 'yp':y};
  }

  // Get X, Y coords
  function getCoords(e){
    //if $draw is 1, get the coords and draw arrow
    if(me.draw ==1){
      var xy_pos = getXYpos(this);

      // if IE
      if(navigator.appVersion.indexOf("MSIE") != -1) {
        // in IE scrolling page affects mouse coordinates into an element
        // This gets the page element that will be used to add scrolling value to correct mouse coords
        var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

        x = event.clientX + standardBody.scrollLeft;
        y = event.clientY + standardBody.scrollTop;
      }
      else {
        x = e.pageX;
        y = e.pageY;
      }

      x = x - xy_pos['xp'];
      y = y - xy_pos['yp'];

      //set coords in c_e2 and c_e1; if drawarrow is 2 draw the arrow
      drawarrow++;
      if(drawarrow ==2){
        c_e2 = {x:x, y:y};
        drawarrow =0;
        drawArrow(c_e1, c_e2);
      }
      else c_e1 = {x:x, y:y};
    }
  }

  //append in #container SVG arrow with base in $c_e1 and the arrow in $c_e2 coords
  function drawArrow(c_e1, c_e2){
    var arrsvg = '<svg class="arrsvg" style="position:absolute; top:0; left:0; margin:0; width:99.8%; height:99.9%;"><defs><marker id="arrow" markerWidth="8" markerHeight="8" refx="3" refy="4" orient="auto"><path d="M1,1 L1,7 L7,4 L1,1" style="fill:red;" /></marker></defs><path d="M'+ c_e1.x +','+ c_e1.y +' L'+ c_e2.x +','+ c_e2.y +'" style="stroke:red; stroke-width: 2.3px; fill: none; marker-end: url('+ location.href.replace(/[#]*$/ig, '') +'#arrow);"/></svg>';
    container.insertAdjacentHTML('beforeend', arrsvg);  //add the arrow to the end in #container
  }

  //register click on $container to get the coords
  container.addEventListener('click', getCoords);
}

//draw arrow with SVG between the clicks coords in $elm_container
var drawAr = new drawArrowSVG(elm_container);

//register click on #btn_drawar to enable /disable drawing action
var btn_drawar = document.getElementById('btn_drawar');
if(btn_drawar) btn_drawar.addEventListener('click', function(e){
  drawAr.draw *=-1;
  e.target.style.background = (drawAr.draw ==1) ? '#f00' :'#dadafb';
  e.target.innerHTML = (drawAr.draw ==1) ? 'Disable Drawing' :'Enable Drawing';
});

//register click on #btn_delar to delete arrows
var btn_delar = document.getElementById('btn_delar');
if(btn_delar) btn_delar.addEventListener('click', function(e){
  var arrsvg = document.querySelectorAll('.arrsvg');
  for(var i=0; i<arrsvg.length; i++) arrsvg[i].outerHTML ='';
});
</script>
</body>
</html>
- Demo:
You can draw arrow markers with SVG inside this element when the button "Enable Drawing" is pressed (has red color).
DIV 1
DIV 2
DIV 3
- Click on this button, to Enable the drawing action, then click inside the element above to draw arrows between clicks coords.
If you click again on the button, the drawing action is Disabled.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Draw arrow markers with clicks in html element

Last accessed pages

  1. Defining and using Functions in JS (1112)
  2. JavaScript Course - Free lessons (31656)
  3. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (142523)
  4. Pencil and Pen Tools (2262)
  5. Graphic Symbols (1512)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (526)
  2. The Mastery of Love (65)
  3. CSS cursor property - Custom Cursors (63)
  4. Read Excel file data in PHP - PhpExcelReader (59)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (44)