Почему подсказка создается не тем, где я хочу
Добрый день,
имею самопально написанную подсказку, то есть у меня есть функция 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> |
Was-Ja,
потому что у строки 21 absolute, нет опоры, от чего плясать, добавьте в MakeHelper ID(out + "_h").style.position = 'relative'; |
Спасибо большое, рони,
ой, черт, я столько раз этот relative вставлял, но все время не туда, а ларчик, как оказалось, просто открывался... СПАСИБО!!! |
Пожалуйста, помогите на ту же тему подсказки, запутался и не могу разобраться почему.
Дополнительно в текст подсказки я решил добавить <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 к сожалению не помогла, поэтому и вопрошаю, пожалуйста, подсобите! |
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> |
Огромное спасибо, рони!!!
Запутался, простите, пожалуйста, а оказалось, что все так просто... И с css обещаю начать интенсивнее его использовать - старая классическая С-шная модель программирования сильно дает о себе знать. |
Часовой пояс GMT +3, время: 21:33. |