Добрый день,
имею самопально написанную подсказку, то есть у меня есть функция MakeHelper(), которая получает на вход текст подсказки и название div, куда втыкает кнопку с вопросительным знаком и фрейм с подсказкой, у которого имеется в CSS: z-index: 1; position: absolute;
Все было хорошо и моя подсказка успешно работала, но мне захотелось прибить еще один канвас на пол экрана снизу, а весь текст, где выскакивают подсказки оставить скроллиться сверху, и тут подсказка стала показываться где-то глубоко внизу.
Пожалуйста, посоветуйте, что я делаю не так, я пробовал играться с опцией display:inherit; заменяя ее на другие, но не помогло.
Спасибо!
Текст кода внизу:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css" id="my_style_id">
* { margin:0; padding:0; } /* to remove the top and left whitespace */
.dshow { display:inherit; }
.dhide { display:none; }
.dhide, .dshow { width:100%; }
table, td { font-size: 16px; } /* just to be sure these are full screen*/
html, body { width:100%; height:100%;} /* just to be sure these are full screen*/
canvas { display:block; } /* To remove the scrollbars */
img { background: transparent; border: none; background-color: transparent; }
.css_xh, .css_xs { text-align: left; font-weight: normal; border-radius: 12px; z-index: 1; position: absolute; width:574px; left: 0px; padding: 10px 10px;
margin: 10px 2px; border: 3px solid black; color: black; background-color: white; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.3), 0 17px 50px 0 rgba(0,0,0,0.3); }
.css_xh { display:none; }
.css_xs { display:inherit; }
.css_help, .css_phelp { font-size: 16px; font-weight: bold; border-radius: 6px; width: 20px; border: 2px solid #555555; }
.css_help { background-color: #2222e0; color: white; }
.css_phelp { background-color: #22e022; color: white; }
.css_help:hover { background-color: #ccccff; color: black; }
.css_phelp:hover { background-color: #ccffcc; color: black; }
.css_tfixed { touch-action: none; }
.css_tnormal { touch-action: auto; }
.css_pz { touch-action: pinch-zoom; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<meta name="description" content="Test">
<meta name="keywords" content="Test">
<title>Test</title>
</head>
<body bgproperties=fixed>
<table><tbody><tr><td><div id='MolFrame'>
<canvas id='c1' class='css_pz' width=600 height=600></canvas><br>
<div id='h1_h'></div>
бла-бла-бла
<canvas id='c2' class='css_tnormal' width=600 height=600></canvas><br>
<div id='h2_h'></div>
бла-бла-бла
<canvas id='c3' class='css_pz' width=600 height=600></canvas><br>
<div id='h3_h'></div>
бла-бла-бла
<canvas id='c4' class='css_tnormal' width=600 height=600></canvas><br>
</div></td></tr><tr><td><canvas id='canvas'></canvas></td></tr></tbody></table>
<script>
function ID(id) { return document.getElementById(id); }
var HelperSwitch = {};
function HelperClick()
{ let aaa=event.target.id.split("_h_");
if(aaa[1]=="i" || aaa[1]=='h')
{ let val=aaa[0];
HelperSwitch[val]=1-HelperSwitch[val];
if(HelperSwitch[val]==0) { ID(val + "_h_h").className="css_xh"; ID(val + "_h_i").className='css_help'; }
else { ID(val + "_h_h").className="css_xs"; ID(val + "_h_i").className='css_phelp'; }
}
}
function MakeHelper(inpHTML, out)
{ ID(out + "_h").innerHTML = "<button width=20 length=20 class='css_help' id='" + out + "_h_i'>?</button><div id='" + out + "_h_h' class='css_xh'></div>";
ID(out + "_h_h").innerHTML = inpHTML;
ID(out+"_h_i").addEventListener('click', HelperClick);
ID(out+"_h_h").addEventListener('click', HelperClick);
HelperSwitch[out] = 0;
}
function RedrawCanvas()
{ let canvas = ID('canvas');
let ctx = canvas.getContext('2d');
let cx = window.innerWidth - 15;
let cy = window.innerHeight - 15;
cy/=2; ToDoMolFrame=1;
canvas.width = cx;
canvas.height = cy;
ID('MolFrame').style = "overflow: auto; max-width:" + cx + "; max-height:" + cy + "; white-space:nowrap;"; // почему, если закоменнтировать эту строчку, то хелпер выскакивает там, где надо, а если не коментировать, то уходит глубоко вниз и как это исправить
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.stroke();
}
RedrawCanvas();
MakeHelper("First helper", "h1");
MakeHelper("Second helper", "h2");
MakeHelper("Third helper", "h3");
</script>
</body></html>