Форум

Was-Ja · #1 (**permalink**) 17.04.2021, 23:51

Добрый день,

имею самопально написанную подсказку, то есть у меня есть функция 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>

рони · #2 (**permalink**) 18.04.2021, 00:39

Was-Ja,
потому что у строки 21 absolute, нет опоры, от чего плясать, добавьте в MakeHelper

ID(out + "_h").style.position = 'relative';

Was-Ja · #3 (**permalink**) 18.04.2021, 00:48

Спасибо большое, рони,

ой, черт, я столько раз этот relative вставлял, но все время не туда, а ларчик, как оказалось, просто открывался...

СПАСИБО!!!

Was-Ja · #4 (**permalink**) 23.04.2021, 11:02

Пожалуйста, помогите на ту же тему подсказки, запутался и не могу разобраться почему.

Дополнительно в текст подсказки я решил добавить <ul> <li> таги, чтобы сделать itemize, в этом случае эти itemize не действует клик для удаления подсказки.

Скажите, пожалуйста, как сделать, чтобы кликалось на все поле подсказки, а не только на то, что вне поля <ul> </ul>

Спасибо!

<!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").style.position = 'relative';
  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;
  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("Helper with itemize (в этой строке клик работает):" +
"<ul style='margin-left:30px; display:inherit;'>" +
"<li>item one</li><br>" +
"<li>item two (в строках one-three клики не работают)</li><br>" +
"<li>item three.</li>" +
"</ul><br>" +
"End of itemizing (а тут снова работают)", "h1");
MakeHelper("Second helper", "h2");
MakeHelper("Third helper", "h3");

</script>

</body></html>

PS: причем попытка добавить евент на каждый чайлд как было описано в https://stackoverflow.com/questions/...-all-childeren к сожалению не помогла, поэтому и вопрошаю, пожалуйста, подсобите!

рони · #5 (**permalink**) 23.04.2021, 15:09

Was-Ja,
из MakeHelper и HelperClick убрано 50% лишнего. 50% ещё можно убрать, но подучите сначала css.

<!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(event) {
            let val = this.id.slice(0, -2);
            let add = HelperSwitch[val] = !HelperSwitch[val];
            ID(val + "_h_h").classList.toggle("css_xh", !add);
            ID(val + "_h_h").classList.toggle("css_xs", add);
            ID(val + "_h_i").classList.toggle("css_help", !add);
            ID(val + "_h_i").classList.toggle("css_phelp", add);
        }
        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").style.position = 'relative';
            ID(out + "_h_h").innerHTML = inpHTML;
            ID(out + "_h").addEventListener('click', HelperClick);
            HelperSwitch[out] = false;
        }
        function RedrawCanvas() {
            let canvas = ID('canvas');
            let ctx = canvas.getContext('2d');
            let cx = window.innerWidth - 15;
            let cy = window.innerHeight - 15;
            cy /= 2;
            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("Helper with itemize (в этой строке клик работает):" +
            "<ul style='margin-left:30px; display:inherit;'>" +
            "<li>item one</li><br>" +
            "<li>item two (в строках one-three клики не работают)</li><br>" +
            "<li>item three.</li>" +
            "</ul><br>" +
            "End of itemizing (а тут снова работают)", "h1");
        MakeHelper("Second helper", "h2");
        MakeHelper("Third helper", "h3");
    </script>
</body>
</html>

Was-Ja · #6 (**permalink**) 23.04.2021, 17:10

Огромное спасибо, рони!!!

Запутался, простите, пожалуйста, а оказалось, что все так просто... И с css обещаю начать интенсивнее его использовать - старая классическая С-шная модель программирования сильно дает о себе знать.

Форум

Справочник

Discord чат

Курсы javascript