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

Anonymous · Post by **Anonymous** » 03 Mar 2025, 23:03

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;

var Y = document.getElementById("NavBarDiv").clientHeight;

CancasXSize = XSize - 2;

CancasYSize = YSize - Y - 2;

document.getElementById("MyCanvas").width = CancasXSize;
document.getElementById("MyCanvas").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.    //document.getElementById("MyCanvas").width = CancasXSize;
//document.getElementById("MyCanvas").height = CancasYSize;
< /code>
Das NAV -Menü wird wie erwartet ausgeführt, aber ich kann die Leinwand nicht verwenden.  Umschalten des Bildschirms Um die Anzeige im 600 x 600 -Modus einzustellen - im NAV -Menü schwebt nicht. Wenn Sie darauf klicken, wird der Dropdown -Unternehmen angezeigt und können Sie einen Link auswählen.   Danke < /p>


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

}< /code>
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 {
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;
}< /code>





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]




Real Time Charting



< /code>
< /div>
< /div>
< /p>
Hinweis: ***********************************************************************************************************************************************************  Ich dachte, sie hätten die gleiche Lösung.  Dieser Hinzufügen der "relativen" CSS -Info löste den vorgestellten Fall, jedoch nicht den folgenden.   Können Sie Insight < /p>
bereitstellen






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

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

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

Quick Reply