Better rollover and h-scroll on header #48

This commit is contained in:
Ian Renton
2025-10-21 16:18:15 +01:00
parent 0b3b35db35
commit be86160e9c
2 changed files with 27 additions and 1 deletions

View File

@@ -222,6 +222,26 @@ div.band-spot {
cursor: default; cursor: default;
} }
div.band-spot:hover {
z-index: 999;
}
div.band-spot span.band-spot-call {
display: inline;
}
div.band-spot:hover span.band-spot-call {
display: none;
}
div.band-spot span.band-spot-info {
display: none;
}
div.band-spot:hover span.band-spot-info {
display: inline;
}
/* GENERAL MOBILE SUPPORT */ /* GENERAL MOBILE SUPPORT */

View File

@@ -106,7 +106,7 @@ function updateBands() {
var pxDownBandLabel = (emDownBand * BAND_COLUMN_FONT_SIZE) + (0.015 * BAND_COLUMN_HEIGHT_PX); var pxDownBandLabel = (emDownBand * BAND_COLUMN_FONT_SIZE) + (0.015 * BAND_COLUMN_HEIGHT_PX);
// Add spot div to DOM // Add spot div to DOM
bandSpotsDiv.append(`<div class="band-spot" label="${(s.freq/1000000).toFixed(3)}MHz ${s.mode}" onclick="alert('${s.dx_call} on ${(s.freq/1000000).toFixed(3)}MHz ${s.mode}');" style="top: ${emDownBand}em; border-top: 1px solid ${s.band_color}; border-left: 5px solid ${s.band_color}; border-bottom: 1px solid ${s.band_color}; border-right: 1px solid ${s.band_color};">${s.dx_call}</div>`); bandSpotsDiv.append(`<div class="band-spot" style="top: ${emDownBand}em; border-top: 1px solid ${s.band_color}; border-left: 5px solid ${s.band_color}; border-bottom: 1px solid ${s.band_color}; border-right: 1px solid ${s.band_color};"><span class="band-spot-call">${s.dx_call}</span><span class="band-spot-info">${s.dx_call} ${(s.freq/1000000).toFixed(3)} ${s.mode}</span></div>`);
// Draw the line on the canvas // Draw the line on the canvas
var ctx = bandLinesCanvas[0].getContext('2d'); var ctx = bandLinesCanvas[0].getContext('2d');
@@ -131,6 +131,12 @@ function updateBands() {
// Update the DOM with the band HTML // Update the DOM with the band HTML
bandsContainer.html(table); bandsContainer.html(table);
// Desktop mouse wheel to scroll bands horizontally if used on the headers
table.find('thead tr').on("wheel", () => {
bandsContainer.scrollLeft(bandsContainer.scrollLeft() + event.deltaY / 10.0);
return false;
});
} }
// Iterate through a temporary list of spots, merging duplicates in a way suitable for the band panel. If two or more // Iterate through a temporary list of spots, merging duplicates in a way suitable for the band panel. If two or more