Der Dropdown -Menü der NAV -Menü funktioniert nicht, wenn die Leinwand auf die Fenstergröße eingestellt ist
Posted: 04 Mar 2025, 04:15
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