Javascript Course

In this page it is a JavaScript object that can be used to make a HTML Div to follow the mouse cursor, inside a parent element (See the comments in code).
- Here is the complete code: HTML, CSS, JavaScript (click on the code to select it).
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Div following mouse cursor inside a parent</title>
<style>
#parent_div {
  position: relative;
  width: 80%;
  height: 300px;
  margin: 1em auto;
  border; 1px solid #333;
  background: #fefebe;
}
#div_moving {
  position: absolute;
  width: 140px;
  height: 65px
  margin: 0;
  border: 1px solid #33f;
  background: #88ee99;
}
</style>
</head>
<body>

<div id="parent_div">
  <div id="div_moving">Moving Div ..</div>
  Content in parent ...
</div>

<script>
// Here get the Div that you want to follow the mouse
var div_moving = document.getElementById('div_moving');

// Here add the ID of the parent element
var parent_div = 'parent_div';

// object to make a HTML element to follow mouse cursor ( https://coursesweb.net/ )
var movingDiv = {
  mouseXY: {},  // will contain the X, Y mouse coords inside its parent

  // Get X and Y position of the elm (from: vishalsays.wordpress.com/ )
  getXYpos: function(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};
  },

  // Returns object with X, Y coords inside its parent
  getCoords: function(e) {
    var xy_pos = this.getXYpos(e.target);

    // if IE
    if(navigator.appVersion.indexOf("MSIE") != -1) {
      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'];

    return {'xp':x, 'yp':y};
  }
};


// registers 'mousemove' event to parent_div
document.getElementById(parent_div).addEventListener('mousemove', function(e){
  mouseXY = movingDiv.getCoords(e);
  div_moving.style.left = mouseXY.xp + 8 +'px';
  div_moving.style.top = mouseXY.yp - 8 +'px';
});
</script>

</body>
</html>

• Demo (move the mouse over this rectangle):
Moving Div ..
Content in parent ...

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
What attribute makes the input text box to not be modified by the user?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="fixed-value" readonly="readonly" name="a_name" />
What CSS property allows you to create rounded corners in your webpage design?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
What instruction displays a confirmation dialog box to the viewer, who must then click OK or Cancel to proceed?
indexOf() confirm() prompt()
var ques = window.confirm("The result of 0+0 is 0?");
if (ques) alert("Corect");
else alert("Incorrect");
Indicate the PHP function that returns the lowest number of the parameter values.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Follow the mouse cursor with a DIV inside a Parent

Last accessed pages

  1. PHP PDO - prepare and execute (8771)
  2. Align DIVs on the same line (5330)
  3. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (58614)
  4. Moving html element to a random direction (3556)
  5. How to use php variable in external js file (2317)

Popular pages this month

  1. PHP Unzipper - Extract Zip, Rar Archives (97)
  2. Read Excel file data in PHP - PhpExcelReader (75)
  3. SHA256 Encrypt hash in JavaScript (63)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (48)
  5. querySelector and querySelectorAll (47)