Detect mouse position and trigger function

Question

The idea is that x-coordinate of the mouse be tracked so when it goes within a certain threshold(250px) in this case to the left edge of the window it triggers the function "openNav", and closes it when the mouse leaves the 250px threshold.

I read a few forums and posts but can't seem to find much on how to use the ClientX function.The code below is just what I think how it should work, but it obviously doesn't. I would be delighted if anyone could give me some sort of idea or even example on how to execute the above.

Thank you in advance.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

var x = e.clientX;
for (x - 250 <= 0) {
  openNav()
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>

<div>
  <button class="button open" onclick="openNav()">OPEN</button>
</div>
<div id="main">
  <h2>Courses</h2>
</div>

e is not defined anywhere, you need an event handler in order to have an event and be able to read the mouse position. Also your for loop has invalid syntax and it's not needed for the required functionality. You should use events to trigger openNav() and closeNav(). — raul.vila
– raul.vila, Commented Apr 17, 2018 at 13:26

Drummar Grakkhan · Accepted Answer · 2018-04-17 13:24:37Z

2

just setup a div with the right size and position and then call your function on the mouse enter event

$('#myDiv').on("mouseenter", function (e) {
  //your code
});

answered Apr 17, 2018 at 13:24

Drummar Grakkhan

462 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sébastien · Accepted Answer · 2018-04-17 13:32:07Z

clientX is not a function but a property of the mouse event.

Just observe the mousemove event and trigger your function according to event.clientX.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

document.addEventListener('mousemove', function(event) {
  console.log(event.clientX);
  if (event.clientX < 250) {
    openNav();
  } else {
    closeNav();
  }
})

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>

<div>
  <button class="button open" onclick="openNav()">OPEN</button>
</div>
<div id="main">
  <h2>Courses</h2>
</div>

In the above version the openNav() and closeNav() function will be uselessly called multiple times. You should have a flag that keeps track of the menu's state and only calls the appropriate function when needed.

Oscar Paz · Accepted Answer · 2018-04-17 13:28:47Z

0

clientX is a property of a mouse event. You need to use it inside an event handler. So we just define en event handler for the entire document and:

document.addEventListener('mousemove', function(event) {
    event.clientX < 250 ? openNav() : closeNav();
});

answered Apr 17, 2018 at 13:28

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

Comments

Muhammad Usman · Accepted Answer · 2018-04-17 13:29:06Z

Here is how you'll get the x-coordinates. You can trigger anyother function based on whatever condition

document.addEventListener("mousemove", function(e){
    document.getElementById("x").innerHTML = e.clientX
    if(e.clientX > 250){
      alert("Crossed")
    }
});
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
</style>

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</div>

<div>
	<button class="button open" onclick="openNav()">OPEN</button>
</div>
<div id="main">
  <h2>Courses <small id="x"></small></h2>
</div>

</body>
</html>

Collectives™ on Stack Overflow

Detect mouse position and trigger function

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related