2. Algorithm
  3. javascript - Nav Menu dropdown does not work if canvas set to window size - Stack Overflow

javascript - Nav Menu dropdown does not work if canvas set to window size - Stack Overflow

admin2025-04-19  0

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>

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>
  • javascript
  • html
  • css
Share edited Mar 4 at 3:15 JHinkle asked Mar 3 at 20:45 JHinkleJHinkle 2023 silver badges11 bronze badges 3
  • You need to give the navbar element a z-index (at least 2), and of course remove overflow: hidden from it. – C3roe Commented Mar 4 at 8:27
  • Increase the z-index of .dropdown-content and .dropdown-content_Mouse – Alireza Hedayati Commented Mar 4 at 10:09
  • I removed hidden from the navbar and added a z-axis of 2. I also increased the z-axis of .dropdown-content and .dropdown-content_Mouse to 3. No change in behavior resulted. – JHinkle Commented Mar 4 at 12:01
Add a comment  | 

1 Answer 1

Reset to default 1

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>

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745072989a283398.html

javascriptNav Menu dropdown does not work if canvas set to window sizeStack Overflow

最新回复(0)