To make sure the canvas performs on a responsive page, I set the canvas to the clientWidth.
XSize = document.documentElement.clientWidth;
YSize = document.documentElement.clientHeight;
Y = document.getElementById("NavBarDiv").clientHeight;
CancasXSize = XSize - 2;
CancasYSize = YSize - Y - 2;
c = document.getElementById("Time_CV");
c.width = CancasXSize;
c.height = CancasYSize;
c = document.getElementById("Mouse_CV");
c.width = CancasXSize;
c.height = CancasYSize;
The page works perfectly as far as drawing on the canvas BUT when you hover the nav Menu button - the nav selection drops down but the disappears when the mouse moves off the nav bar to perform a link selection.
If I comment out
c = document.getElementById("Time_CV");
// c.width = CancasXSize;
// c.height = CancasYSize;
c = document.getElementById("Mouse_CV");
// c.width = CancasXSize;
// c.height = CancasYSize;
The nav Menu performs as expected BUT I can't use the canvas.
I have included a test page to demonstrate the issue - see below.
As a side note - using Chrome development tool - in full screen mode - performs as described. Toggle screen to put display in 600 x 600 mode - the nav menu does NOT hover - but if you click on it, the dropdown appears and lets you select a link.
I added the change outlined below but it did not solve the issue.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
div.IEcontent
{
text-align: center;
}
.container {
display: flex;
justify-content: space-between;
align-items:center;
height: 7vmin;
border-radius: 3vmin;
}
h2 {
display: inline-block;
font-size: 5vmin;
padding-right: 3vmin;
float: right;
}
.navbar {
overflow: hidden;
display: inline-block;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 5vmin 5vmin;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 4vmin;
border: none;
outline: none;
color: white;
padding: 5vmin 7vmin;
background-color: inherit;
font-family: inherit;
margin: 0;
position: relative;
z-index: 1;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 2vmin 5vmin;
text-decoration: none;
display: block;
text-align: left;
font-size: 3vmin;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content_Mouse {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content_Mouse a {
float: none;
color: black;
padding: 2vmin 7vmin;
text-decoration: none;
display: block;
text-align: left;
font-size: 2vmin;
}
.dropdown-content_Mouse a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content_Mouse {
display: block;
}
.Ibutton
{
padding: 2vmin 2vmin;
border-radius: 3vmin;
}
#canvas-container { position: relative; }
canvas { position: absolute; left: 0; top: 0; }
#Time_CV
{
z-index: 0;
}
#Mouse_CV
{
z-index: 1;
}
</style>
<script type="text/javascript">
var XSize;
var YSize;
var CancasXSize;
var CancasYSize;
window.onload = function()
{
var Y;
XSize = document.documentElement.clientWidth;
YSize = document.documentElement.clientHeight;
Y = document.getElementById("NavBarDiv").clientHeight;
CancasXSize = XSize - 2;
CancasYSize = YSize - Y - 2;
c = document.getElementById("Time_CV");
c.width = CancasXSize;
c.height = CancasYSize;
c = document.getElementById("Mouse_CV");
c.width = CancasXSize;
c.height = CancasYSize;
}
</script>
</head>
<body id="MyPage" style ="background-color:#000000">
<div class="container" style ="color:#ffffff; background-color:#000080">
<div id="NavBarDiv" class="navbar">
<div class="dropdown">
<button class="dropbtn"> Menu </button>
<div class="dropdown-content">
<a href="RT_Text.html">Real Time Text</a>
<a href="RT_Charting.html">Real Time Charting</a>
<a href="History_Charting.html">History Charting</a>
<a href="Config_Text.html">Config Text</a>
<a href="Config_Charting.html">Config Charting</a>
<a href="Config_SetPoints.html">RT Color SetPoints</a>
<a href="Time.html">Adjust Time</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> Mouse Actions </button>
<div class="dropdown-content_Mouse">
<a href="#" onclick="Mouse_Cancel()">Cancel</a>
<a href="#" onclick="Mouse_Reset()">Reset to Original</a>
<a href="#" onclick="Mouse_TimeData()">Time Data</a>
<a href="#" onclick="Mouse_Box()">Box</a>
<a href="#" onclick="Mouse_BoxZoom()">Box Zoom</a>
<a href="#" onclick="Mouse_VLine()">Vertical Line</a>
<a href="#" onclick="Mouse_ClipR()">Clip Vline Right</a>
<a href="#" onclick="Mouse_ClipL()">Clip Vline Left</a>
<a href="#" onclick="Mouse_HLine()">Horizontal Line</a>
<a href="#" onclick="Mouse_ClipU()">Clip Hline Up</a>
<a href="#" onclick="Mouse_ClipD()">Clip Hline Down</a>
</div>
</div>
</div>
<h2>Time Charting</h2>
</div>
<div id="canvas-container" class="IEcontent">
<canvas id="Time_CV" width="100%" height="100%" ></canvas>
<canvas id="Mouse_CV" width="100%" height="100%" ></canvas>
</div>
</body>
</html>
Your canvas has absolute position and it appears above the dropdown. Update the .dropdown styles:
.dropdown .dropbtn {
position: relative;
z-index: 1;
var XSize;
var YSize;
var CancasXSize;
var CancasYSize;
window.onload = function() {
XSize = document.documentElement.clientWidth;
YSize = document.documentElement.clientHeight;
var Y = document.getElementById("NavBarDiv").clientHeight;
CancasXSize = XSize - 2;
CancasYSize = YSize - Y - 2;
document.getElementById("MyCanvas").width = CancasXSize;
document.getElementById("MyCanvas").height = CancasYSize;
}body {
font-family: Arial, Helvetica, sans-serif;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 7vmin;
border-radius: 3vmin;
}
h2 {
display: inline-block;
font-size: 5vmin;
padding-right: 3vmin;
float: right;
}
.navbar {
overflow: hidden;
display: inline-block;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 5vmin 5vmin;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
position: relative;
z-index: 1;
font-size: 4vmin;
border: none;
outline: none;
color: white;
padding: 5vmin 10vmin;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 2vmin 10vmin;
text-decoration: none;
display: block;
text-align: left;
font-size: 3vmin;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.Ibutton {
padding: 2vmin 2vmin;
border-radius: 3vmin;
}
#canvas-container {
position: relative;
}
canvas {
position: absolute;
left: 0;
top: 0;
}<body id="MyPage" style="background-color:#000000">
<div class="container" style="color:#ffffff; background-color:#000080">
<div id="NavBarDiv" class="navbar">
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div class="dropdown-content">
<a href="RT_Text.html">Real Time Text</a>
<a href="RT_Charting.html">Real Time Charting</a>
<a href="History_Charting.html">History Charting</a>
<a href="Config_Text.html">Config Text</a>
<a href="Config_Charting.html">Config Charting</a>
<a href="Config_SetPoints.html">RT Color SetPoints</a>
<a href="Time.html">Adjust Time</a>
</div>
</div>
</div>
<h2>Real Time Charting</h2>
</div>
<div id="canvas-container">
<canvas id="MyCanvas" width="100%" height="100%" ></canvas>
</div>