Der Dropdown -Menü der NAV -Menü funktioniert nicht, wenn die Leinwand auf die Fenstergröße eingestellt ist ⇐ JavaScript

[Anonymous]

Um sicherzustellen, dass die Leinwand auf einer reaktionsschnellen Seite durchgeführt wird, setze ich die Leinwand auf die Clientbreite. < /p>

Code: Select all

    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;
< /code>
Die Seite funktioniert perfekt im Rahmen der Leinwand, aber wenn Sie die NAV -Menüschaltfläche schweben - fällt die NAV -Auswahl ab, aber die verschwindet, wenn sich die Maus aus der NAV -Leiste bewegt, um eine Linkauswahl durchzuführen.c = document.getElementById("Time_CV");
// c.width = CancasXSize;
//  c.height = CancasYSize;

c = document.getElementById("Mouse_CV");
// c.width = CancasXSize;
// c.height = CancasYSize;

< /code>
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.








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;
}





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;

}








   Menu 

[url=RT_Text.html]Real Time Text[/url]
[url=RT_Charting.html]Real Time Charting[/url]
[url=History_Charting.html]History Charting[/url]
[url=Config_Text.html]Config Text[/url]
[url=Config_Charting.html]Config Charting[/url]
[url=Config_SetPoints.html]RT Color SetPoints[/url]
[url=Time.html]Adjust Time[/url]



  Mouse Actions 

[url=#]Cancel[/url]
[url=#]Reset to Original[/url]
[url=#]Time Data[/url]
[url=#]Box[/url]
[url=#]Box Zoom[/url]
[url=#]Vertical Line[/url]
[url=#]Clip Vline Right[/url]
[url=#]Clip Vline Left[/url]
[url=#]Horizontal Line[/url]
[url=#]Clip Hline Up[/url]
[url=#]Clip Hline Down[/url]




Time Charting