как запустить addEventListener в зависимости от выбранной радиокнопки
Всем привет!
Помогите с решением!!! Есть скрипт: function myFunc (e) { var evt = window.event || e, obj = evt.srcElement || evt.target; if (obj.tagName == 'TABLE') return; while (obj.tagName != 'TD') obj = obj.parentNode; obj.className = obj.className ? '' : 'act'; } onload = function () { var trg = document.getElementById ('myTBL'); if (document.addEventListener) trg.addEventListener ('click', myFunc); else if (document.attachEvent) trg.attachEvent ('onclick', myFunc); else trg.onclick = myFunc; } Есть несколько стилей: <style> #myTBL td.act { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:darkGreen; } </style> <style> #myTBL1 td.act { font:14px helvetica, arial, sans-serif; color : #ccc; font-weight:800; background-color:RED; } </style> <style> #myTBL2 td.act { font:14px helvetica, arial, sans-serif; color : #666; font-weight:800; background-color:RED; } </style> Есть таблица в которой всё это должно работать и радиокнопки для назначения стиля который должна принимать ячейка: <body> <input type="radio" id="DarkGreen" name="COLOR" value="" onclick = function() { myTBL; }> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="RED" name="COLOR" value="" onclick = function() { myTBL1; }> <label for="RED">RED</label> <input type="radio" id="Orange" name="COLOR" value="" onclick = function() { myTBL2; }> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> Вопрос - КАК СДЕЛАТЬ ЧТОБЫ ОНКЛИК В ФУНКЦИИ ИСПОЛЬЗОВАЛ СТИЛЬ ВЫБРАННЫЙ РАДИОКНОПКОЙ!!! ПОМОГИТЕ ....... |
konart,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; } #myTBL td.Red { font:14px helvetica, arial, sans-serif; color : #ccc; font-weight:800; background-color:Red; } #myTBL td.Orange { font:14px helvetica, arial, sans-serif; color : #666; font-weight:800; background-color:Orange; } td{ height: 70px; position: relative; } #myTBL td:hover:after { background-color: #D2691E; border-radius: 6px; padding: 8px; opacity: 1; } td.DarkGreen:after{ opacity:0; content: "это DarkGreen"; position: absolute; left: 70px; } td.Red:after{ opacity:0; content: "это Red"; position: absolute; left: 70px; } td.Orange:after{ opacity:0; content: "это Orange"; position: absolute; left: 70px; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var table = document.querySelector('#myTBL'), color = document.querySelectorAll('[name="COLOR"]'); table.addEventListener('click', function() { var target = event.target; if (target.closest("td")) { [].forEach.call( color, function(el) { el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id); }); } }); }); </script> </head> <body> <input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="Red" name="COLOR" value="" > <label for="Red">RED</label> <input type="radio" id="Orange" name="COLOR" value=""> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> </html> |
:dance:
Большое спасибо!!! Быстро и без лишних слов!!!! Весьма благодарен! |
В развитие темы.
Можно ли на каждый цвет навесить подсказку (title) или что-то в этом роде. То есть чтобы все отмеченные одним цветом имели одну ОБЩУЮ подсказку (подсказка 1), отмеченные другим - другую (подсказка 2) и так далее? |
Цитата:
|
Вы имеете ввиду content: "это Orange"; ??? Я имел ввиду несколько другое. Когда ячейки закрашены то при подведении курсора к "красным" должна появляться подсказка "вы все в красном", при курсоре на ячейках с зелёным цветом - появляется подсказка "вы все зелёные". Контент я вижу, а вот в табличке подсказки не появляются!?
|
konart,
здесь есть надпись при наведении, после клика? если есть то меняйте надписи как вам нужно. |
Да, всё есть. Моя оплошность, не там смотрел. Ещё раз огромное СПАСИБО!!!
|
Поля форм не обязательно должны появляться внутри тега . Их можно разместить в любом месте страницы. Информацию из таких полей нельзя передавать на сервер (это возможно только для всей формы целиком), но когда мы делаем поля, которые обрабатывает JavaScript, нам обычно и не нужно передавать информацию из полей через submit.
<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> |
Всем добрый день.
Здесь же появилась проблемка с которой мне не удаётся справиться, а именно: для красоты я добавил объём и тень в #myTBL и теперь подсказки оказались под закрашиваемой ячейкой. Причём подсказка сверху ячейки которую я закрашиваю первой, но ПОД всеми остальными. Пробовал и разные z-index, не забывал и про особенности с opacity, и то что позиционирование должно быть, но результата так и не добился. Вот коды... #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } td{ height: auto;/*23*/ position: relative; cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer; opacity:0.99; } #myTBL td:hover:after { background-color: Lime; /*стиль подсказки*/ font:14px helvetica, arial, sans-serif; color : Black; font-weight:400; border-radius: 1px; padding: 2px;/*8*/ opacity: 0.99;/*1*/ border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); z-index: 10; position: fixed; } td.DarkGreen:after{ opacity:0; content: "ALLIN"; position: fixed; rigth: 50px; bottom: 20px; } |
Вопрос - как сделать чтобы подсказки были сверху закрашенных ячеек имеющих объём и тень.
|
konart,
убрать позиционирование везде и добавить это. td{ position: relative; } td:after { position: absolute; } |
Вложений: 1
проблема осталась
|
я использовал вместо absolute - fixed именно с целью увести подсказку от закрашенных ячеек
|
konart,
делайте свой пример, ниже смотреть DarkGreen <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; } #myTBL td.Red { font:14px helvetica, arial, sans-serif; color : #ccc; font-weight:800; background-color:Red; } #myTBL td.Orange { font:14px helvetica, arial, sans-serif; color : #666; font-weight:800; background-color:Orange; } td{ height: 70px; position: relative; } #myTBL td:hover:after { background-color: #D2691E; border-radius: 6px; padding: 8px; opacity: 1; } td.DarkGreen:after{ opacity:0; content: "это DarkGreen"; position: absolute; left: 70px; } td.Red:after{ opacity:0; content: "это Red"; position: absolute; left: 70px; } td.Orange:after{ opacity:0; content: "это Orange"; position: absolute; left: 70px; } #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } td{ height: auto;/*23*/ cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer; opacity:0.99; } td{ position: relative; } td:after { position: absolute; } #myTBL td:hover:after { background-color: Lime; /*стиль подсказки*/ font:14px helvetica, arial, sans-serif; color : Black; font-weight:400; border-radius: 1px; padding: 2px;/*8*/ opacity: 0.99;/*1*/ border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); z-index: 10; } td.DarkGreen:after{ opacity:0; content: "ALLIN"; right: 50px; bottom: 30px; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var table = document.querySelector('#myTBL'), color = document.querySelectorAll('[name="COLOR"]'); table.addEventListener('click', function() { var target = event.target; if (target.closest("td")) { [].forEach.call( color, function(el) { el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id); }); } }); }); </script> </head> <body> <input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="Red" name="COLOR" value="" > <label for="Red">RED</label> <input type="radio" id="Orange" name="COLOR" value=""> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> </html> |
мой пример. Для правильного понимания ситуации - уменьшите размер окна браузера до минимально возможного размера!!!
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; } #myTBL td.Red { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : White; /*#ccc #666 #000 White*/ font-weight:800; background-color:Indigo; background: linear-gradient(180deg, Indigo 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; } #myTBL td.Orange { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : #000000; /*#ccc #666 #000 White*/ font-weight:700; background-color:YellowGreen; background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; } td{ height: 70px; position: relative; } #myTBL td:hover:after { background-color: #D2691E; border-radius: 6px; padding: 8px; opacity: 1; } td.DarkGreen:after{ opacity:0; content: "это DarkGreen"; position: absolute; left: 70px; } td.Red:after{ opacity:0; content: "это Red"; position: absolute; left: 70px; } td.Orange:after{ opacity:0; content: "это Orange"; position: absolute; left: 70px; } #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } td{ height: auto;/*23*/ cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer; opacity:0.99; } td{ position: relative; } td:after { position: absolute; } #myTBL td:hover:after { background-color: Lime; /*стиль подсказки*/ font:14px helvetica, arial, sans-serif; color : Black; font-weight:400; border-radius: 1px; padding: 2px;/*8*/ opacity: 0.99;/*1*/ border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); z-index: 10; } td.DarkGreen:after{ opacity:0; content: "ALLIN"; right: 50px; bottom: 30px; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var table = document.querySelector('#myTBL'), color = document.querySelectorAll('[name="COLOR"]'); table.addEventListener('click', function() { var target = event.target; if (target.closest("td")) { [].forEach.call( color, function(el) { el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id); }); } }); }); </script> </head> <body> <input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="Red" name="COLOR" value="" > <label for="Red">RED</label> <input type="radio" id="Orange" name="COLOR" value=""> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> </html> |
пока подсказка лежит в области одной ячейки (окно браузера позволяет) всё нормально, но как только (а мне нужен минимальный размер окна) и подсказки больше чем ячейка - то подсказка начинает прятаться под ячейку....
|
konart,
td.DarkGreen:after{ width: 50px; opacity:0; content: "ALLIN"; left:0; bottom: 30px; } |
похоже заработало! РОНИ - спасибо!!! Правда подсказка прячется за верхний и правый край. Хорошо бы сделать чтобы она появлялась на свободном месте, но это видимо простыми привязками типа left:0;
bottom: 30px; не решить? |
konart,
... плагинов подсказок очень много в инете |
Цитата:
|
понял. Попробую сам решить. Ещё раз СПАСИБО!!!
|
Добрый день!
РОНИ помогай, ничего не выходит. Подсказки прячутся за край и никак я их оттуда не могу вытащить . если фиксирую - они прячутся за закраской ячейки. Ещё такой момент - я пробовал вот такой вариант подсказки и он мне нравился тем что стиль подсказки соответствовал стилю закраски ячейки, но приходилось писать SPAN для каждой ячейки. Это утомительно. В твоём варианте этот вопрос решён. А как бы мой вариант совместить с твоим? Я пробовал, но решение так и не нашёл. Помоги!!! ВОт код с моей подсказкой в стиле ячеек: .tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; } .tooltip span { margin-left: -99em; position: absolute; } .tooltip:hover span { border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 15px 15px rgba(0, 0, 0, 0.7); -moz-box-shadow: 15px 15px rgba(0, 0, 0, 0.7); position: absolute; left: 1em; top: 200em; z-index: 99; margin-left: 0; width: 50px; } .ALLIN { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } * html a:hover { background: transparent; } .ALLIN{ border: 1px solid #FFAD33; font:16px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : White; /*#ccc #666 #000 White*/ font-weight:800; background-color:DarkGreen; } .Limp-Call{ background: #8B8B00; border: 1px solid #FFAD33; font:22px verdana, arial, helvetica, sans-serif; /* רנטפע, נאחלונ רנטפעא */ color : #000; /* צגוע רנטפעא */ font-weight:900; /* םאסשוםםמסע רנטפעא */ } |
konart,
макет полностью сделайте |
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } #myTBL td.Indigo { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : White; /*#ccc #666 #000 White*/ font-weight:800; background-color:Indigo; background: linear-gradient(180deg, Indigo 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } #myTBL td.YellowGreen { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : #000000; /*#ccc #666 #000 White*/ font-weight:700; background-color:YellowGreen; background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } td{ height: auto;/*23*/ cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer; opacity:0.99; } td{ position: relative; } td:after { position: absolute; } #myTBL td:hover:after { background-color: Gray; /*стиль подсказки*/ font:14px helvetica, arial, sans-serif; color : Lavender; font-weight:700; border-radius: 1px; padding: 4px;/*8*/ opacity: 1;/*1*/ border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.6); z-index: 10; } td.DarkGreen:after{ width: 70px; opacity:0; content: "ALLIN и ещё много много текста"; left:0; bottom: 30px; } td.Indigo:after{ opacity:0; content: "Raise-4bet-Allin и ещё много много текста"; left:0; bottom: 30px; width: 70px; } td.YellowGreen:after{ opacity:0; content: "raise-Call 3beta и ещё много много текста"; left:0; bottom: 30px; width: 70px; } </style> <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script> <script> window.addEventListener('DOMContentLoaded', function() { var table = document.querySelector('#myTBL'), color = document.querySelectorAll('[name="COLOR"]'); table.addEventListener('click', function() { var target = event.target; if (target.closest("td")) { [].forEach.call( color, function(el) { el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id); }); } }); }); </script> </head> <body> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> <input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="Indigo" name="COLOR" value="" > <label for="Indigo">Indigo</label> <input type="radio" id="YellowGreen" name="COLOR" value=""> <label for="YellowGreen">YellowGreen</label> </body> </html> Для правильной оценки ситуации окно броузера должно быть минимальным!!! Это текущий вариант сделанный по твоим рекомендациям. |
подсказка работающая ранее была сделана с использованием CSS тот что я выложил ранее и ячеек типа:
<td class="tooltip"> <a>Li<span class="custom Liamp-3bet">Liamp - 3bet value</span></a> </td> Тогда появляющаяся подсказка имеет стиль как у ячейки... |
классы в примере не соответствуют, чтобы работало нужно:
<td class="zag3 tooltip"> <a>Li<span class="custom ALLIN">Liamp - 3bet value</span></a> </td> или "custom Limp-Call" |
ещё такой момент - в текущем варианте появившаяся подсказка мешает переключению ячеек попавших под неё!
|
в этой связи великолепное свойство у стандартной подсказки TITLI она появляется и может выходить даже за пределы окна броузера - СУПЕР!!!
|
konart,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen, .ui-tooltip.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } #myTBL td.Indigo, .ui-tooltip.Indigo { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : White; /*#ccc #666 #000 White*/ font-weight:800; background-color:Indigo; background: linear-gradient(180deg, Indigo 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } #myTBL td.YellowGreen, .ui-tooltip.YellowGreen { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : #000000; /*#ccc #666 #000 White*/ font-weight:700; background-color:YellowGreen; background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $(function() { $("#myTBL").on("click", "td", function() { var target = this, rem = 0, len = $('[name="COLOR"]').each(function(indx, el){ el.checked && !target.classList.contains(el.value)? $( target ).addClass(el.value).attr("title", el.value).tooltip({tooltipClass : el.value}).tooltip("open"): ($( target ).removeClass(el.value), rem++); }).length; if(rem == len) $( target ).tooltip("destroy").removeAttr("title"); }); }); </script> </head> <body> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> <input type="radio" name="COLOR" value="DarkGreen" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" name="COLOR" value="Indigo" > <label for="Indigo">Indigo</label> <input type="radio" name="COLOR" value="YellowGreen"> <label for="YellowGreen">YellowGreen</label> </body> </html> |
РОНИ, а где здесь то что раньше было в content: "ALLIN и ещё много много текста"; ? Мне ведь в подсказках не цвет ячейки нужно сообщить а совсем другое! Я не вижу где содержание подсказки?
|
konart,
документацию почитали бы чтоли ... :( ниже один из вариантов, также можно было указать title .attr("title", content[el.value] || "") , не используя content: content[el.value] || "" http://api.jqueryui.com/tooltip/ <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #myTBL td.DarkGreen, .ui-tooltip.DarkGreen { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:DarkGreen; background: linear-gradient(180deg, DarkGreen 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } #myTBL td.Indigo, .ui-tooltip.Indigo { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : White; /*#ccc #666 #000 White*/ font-weight:800; background-color:Indigo; background: linear-gradient(180deg, Indigo 95%, Black 5%); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } #myTBL td.YellowGreen, .ui-tooltip.YellowGreen { font:14px helvetica, arial, sans-serif; /* helvetica, arial, sans-serif*/ color : #000000; /*#ccc #666 #000 White*/ font-weight:700; background-color:YellowGreen; background: linear-gradient(180deg, YellowGreen 95%, DarkOliveGreen 5%, Black); box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); border-radius: 5px 5px; -webkit-border-radius: 5px; z-index: 1; opacity:0.99; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <script> $(function() { var content = { DarkGreen: "ALLIN и ещё <br>много много текста", Indigo: "56<br><img src='https://javascript.ru/forum/images/smilies/cray.gif' alt=''>", YellowGreen: "90" }; $("#myTBL").on("click", "td", function() { var target = this, rem = 0, len = $('[name="COLOR"]').each(function(indx, el) { el.checked && !target.classList.contains(el.value) ? $(target).addClass(el.value).attr("title", el.value).tooltip({ //track: true, tooltipClass: el.value, content: content[el.value] || "" }).tooltip("open") : ($(target).removeClass(el.value), rem++) }).length; if (rem == len) $(target).tooltip("destroy").removeAttr("title") }) }); </script> </head> <body> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> QQ </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> <input type="radio" name="COLOR" value="DarkGreen" checked="checked"> <label for="DarkGreen">DarkGreen</label> <input type="radio" name="COLOR" value="Indigo" > <label for="Indigo">Indigo</label> <input type="radio" name="COLOR" value="YellowGreen"> <label for="YellowGreen">YellowGreen</label> </body> </html> |
Да я читаю. Просто мы с вами Уважаемый, читаем по разному. Вы скорее всего читаете даже между строк, ну а я зачастую не вижу даже очевидного для Вас. Так что извините!!! Как всегда большое спасибо! Буду пробовать.
|
Это опять я :write: Добрый день.
РОНИ - обнаружилась такая ситуация, что при сохранении файла подсказки перестают работать?:agree: |
пользуюсь Google Chrome, беру ваш пример, нажимаем кнопочки - меняем их стиль (всё отлично и подсказки работают), сохраняем с помощью правой кнопки "сохранить как" (пусть под именем 2.html). Открываем этот файл 2.html - подсказки не работают!!!!!!!!!!!!:cray:
|
konart, смотрите консоль браузера (F12, вкладка «Console»).
|
знаю такую кнопку F12, пользовался раньше, а что там смотреть? Я используя Notepad++ смотрел и что дальше? Начать редактировать? Это что за КОД если он ломается при сохранении файла? Что-то тут не так ....
|
Цитата:
У скрипта есть зависимости, также как у вашего компьютера есть зависимость от электроэнергии. Вы же не предъявляете претензии производителю своего пк, по поводу его неработоспособности при отсутствии у него питания? Да и какие вообще могут быть претензии, если ты не платил за продукт, которым пользуешься? |
konart,
нажмите справа от кода кнопки(в буфер или исходник), может чем поможет |
я так Ваш код и копировал, т. е. использовал кнопки справа от кода. Да прямо находясь на форуме и окрыв последний пример РОНИ можно проделать всю процедуру (изменить стиль, сохранить в файл и открыть файл в броузере) и убедиться что всё выглядит так как я описал.
Ну да ладно, а какие могут быть настройки броузера (я вообще ничего не настраивал, т. е. всё стоит по умолчанию) которые могут мешать? |
Часовой пояс GMT +3, время: 17:33. |