CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolsdom-eventsmouseeventgoogle-chrome-app
gcoulby
gcoulby

Reputation: 544

Implementing onmouse events in Chrome app

I have created this code:

window.onload = function() {


  for (var i = 10; i < 100; i += 10) {
    document.getElementById("overlayInner").innerHTML += '<div style="top:' + ((8 * i) - 15) + 'px;" class="number lat lat' + i + '">' + i + '</div>';
    document.getElementById("overlayInner").innerHTML += '<span style="left:' + ((8 * i) - 15) + 'px;" class="number lon lon' + i + '">' + i + '</span>';
  }

  var map_canvas = document.getElementById("map");
  var context = map_canvas.getContext("2d");

  for (var x = 80; x < 800; x += 80) {
    context.moveTo(x, 45);
    context.lineTo(x, 755);
  }

  var count = 1;
  for (var y = 80; y < 800; y += 80) {
    if (count != 10) {
      context.moveTo(50, y);
      context.lineTo(750, y);
    }
  }
  context.strokeStyle = "#7c7c7c";
  context.stroke();

};


function move(id, evt) {
  var e = document.getElementById(id);
  e.style.display = "block";
  e.style.left = evt.pageX + 10 + "px";
  e.style.top = evt.pageY + 10 + "px";

  e.innerHTML = "X: " + Math.round(((evt.pageX * 1.25) / 10)) + " / Y: " + Math.round(((evt.pageY * 1.25) / 10));
}

function hide(id) {
  document.getElementById(id).style.display = "none";
}
/* CSS file placeholder. */

body {
  padding: 0;
  margin: 0;
  background: #313335;
}
#map_container {
  position: relative;
}
#map {
  width: 800px;
  height: 800px;
}
#overlay {
  width: 800px;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
}
#overlay:hover {
  cursor: crosshair;
}
#overlayInner {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.number {
  background: white;
  padding: 5px;
  border: 2px solid black;
  position: absolute;
}
.lat {
  left: 25px;
}
.lon {
  bottom: 25px;
}
canvas {
  border: 1px solid black;
  position: relative;
}
canvas:hover {
  cursor: crosshair;
}
#coordinates {
  position: absolute;
  color: white;
  display: none;
}
<canvas id="map" width="800px" height="800px"></canvas>
<div id="overlay" onmousemove="move('coordinates',event)" onmouseout="hide('coordinates')">
  <div id="overlayInner"></div>
</div>
<span id="coordinates"></span>

It seems to work in the Chrome browser both when I run it through the stack snippet or when I run it as a website. However, when I run it as a Chrome app I get no coordinates.

I am new to Chrome Apps so I am not sure if it is possible to achieve this. However, I thought I would ask to see if it needs to be written differently, maybe there is an error in my code that the browser is fixing at runtime? This code is just standard Javascript so I can't understand why it doesn't work.

Upvotes: 0

Views: 53

Answers (1)

IntermediateCoder
IntermediateCoder

Reputation: 90

Chrome Extensions do not allow inline-event handlers

onmousemove="move('coordinates',event)" onmouseout="hide('coordinates')"

The following code should do the trick.

eO = document.getElementById('overlay');

eO.addEventListener("mousemove", function(evt){
   move('coordinates', evt);
});

eO.addEventListener("mouseout", function(){
    hide('coordinates');
});

Upvotes: 1

Related Questions