Styx
-
Posts
97 -
Joined
-
Last visited
Styx's Achievements
Explorer (1/14)
0
Reputation
-
Привет. Имеется таблица, один столбец которой имеет левый и правый бордеры. При движении указателя мыши по таблице строка под курсором выделяется путем установки ее ячейкам верхнего и нижнего бордера. Вот как это в идеале выглядит: Это имеющаяся верстка данной таблицы: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> td { border-top:1px solid transparent; /* prevent table twitch on hover */ border-bottom:1px solid #eee; } .col { border-left:1px solid #f00; border-right:1px solid #f00; } tr:hover td { border-top:1px solid #888; border-bottom:1px solid #888; } </style> </head> <body> <table width="50%" cellpadding="0" cellspacing="0"> <tr> <td>cell00</td> <td>cell01</td> <td class="col">cell02</td> <td>cell03</td> <td>cell04</td> </tr> <tr> <td>cell10</td> <td>cell11</td> <td class="col">cell12</td> <td>cell13</td> <td>cell14</td> </tr> <tr> <td>cell20</td> <td>cell21</td> <td class="col">cell22</td> <td>cell23</td> <td>cell24</td> </tr> <tr> <td>cell30</td> <td>cell31</td> <td class="col">cell32</td> <td>cell33</td> <td>cell34</td> </tr> <tr> <td>cell40</td> <td>cell41</td> <td class="col">cell42</td> <td>cell43</td> <td>cell44</td> </tr> <tr> <td>cell50</td> <td>cell51</td> <td class="col">cell52</td> <td>cell53</td> <td>cell54</td> </tr> <tr> <td>cell60</td> <td>cell61</td> <td class="col">cell62</td> <td>cell63</td> <td>cell64</td> </tr> </table> <p>This must not move when mouse pointer hovers over the table!</p> </body> </html> В Opera все отображается правильно. Но в FF и IE вертикальный бордер столбца оказывается несплошным (с разрывами на стыке ячеек) Если задать таблице border-collapse: collapse, то появляются проблемы с наложением и нерегулируемым (?) перекрытием границ ячеек (нужные бордеры исчезают в каких-то браузерах). А если убрать из CSS первое правило (border-top:1px solid transparent), то при наведении указателя мыши на таблицу контент под таблицей дергается, смещаясь вниз на 1px. Вопрос в том, как избавиться от разрывов границ столбца и сохранить при этом остальной функционал (отображение верхней и нижней границ строки под курсором). Помогите, плиз.
-
Здесь цикл со счетчиком — неудачная идея, так как инкремент счетчика должен происходить только в том случае, если условие в теле цикла не выполняется. function killSelect() { var form = document.getElementById('t'); var i = 0; while (i < form.elements.length) { if (form.elements[i].nodeName.toLowerCase() == 'select') form.removeChild(form.elements[i]) else i++ } } window.onload = killSelect;
-
Атрибут nodeValue принадлежит объекту #text внутри контейнера span, а не самому контейнеру. <span onclick="alert(this.firstChild.nodeValue);">Содержимое</span>
-
Можно изменить функцию следующим образом: function tickTock() { var timeStr = (_date.getHours() < 10) ? "0" + _date.getHours() : _date.getHours().toString(); timeStr += (_date.getMinutes() < 10) ? ":0" + _date.getMinutes() : ":" + _date.getMinutes(); timeStr += (_date.getSeconds() < 10) ? ":0" + _date.getSeconds() : ":" + _date.getSeconds(); document.getElementById("clock").firstChild.nodeValue = timeStr; _date.setSeconds(_date.getSeconds() + 1); } _____________________ Бррр. Можно проще. function tickTock() { var timeStr = _date.toTimeString(); document.getElementById("clock").firstChild.nodeValue = timeStr.slice(0, 8); _date.setSeconds(_date.getSeconds() + 1); }
-
По поводу кодировки — удалите на всякий случай все комментарии. Я дописал их на форуме, а сам документ писал в UTF-8. DOCTYPE не должен оказывать принципиального влияния на работу данного скрипта.
-
o_O Проверяю — работает, причём во всех браузерах. Достаточно просто скопировать код и всё... Точно работает. Расположение скрипта в данном случае значения не имеет. P.S. Наличие какого-то начального текста или хотя бы — как у меня — неразрывного пробела в абзаце, в котором выводится время, обязательно!
-
Вот эта ваша переменная {my.Uptime} имеет строковый тип? Если да, то <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>tick-tock</title> <script type="text/javascript"> function tickTock() { document.getElementById("clock").firstChild.nodeValue = _date.getHours() + ":" + _date.getMinutes() + ":" + _date.getSeconds(); _date.setSeconds(_date.getSeconds() + 1); } var myUptime = "15:25:35"; /* <-- это ваша переменная. Как там вы ее получаете?.. */ var hhmmss = myUptime.split(":"); var _date = new Date(); _date.setHours(hhmmss[0]); _date.setMinutes(hhmmss[1]); _date.setSeconds(hhmmss[2]); window.setInterval(tickTock, 1000); </script> </head> <body> <p id="clock"> </p> </body> </html>
-
<script type="text/javascript"> var docStyles = document.styleSheets[0]; if (docStyles.insertRule) { docStyles.insertRule("#hover:hover {color: #0000FF;}", 0); } else { docStyles.addRule("#hover:hover", "color: #0000FF", 0); } function setHoverColor(r, g, b) { var hexClr = (r > 0xF) ? r.toString(16) : "0" + r.toString(16); hexClr += (g > 0xF) ? g.toString(16) : "0" + g.toString(16); hexClr += (b > 0xF) ? b.toString(16) : "0" + b.toString(16); var docStyles = document.styleSheets[0]; if (docStyles.insertRule) { docStyles.deleteRule(0); docStyles.insertRule("#hover:hover {color: #" + hexClr + ";}", 0); } else { docStyles.removeRule(0); docStyles.addRule("#hover:hover", "color: #" + hexClr, 0); } } </script> Пример использования: <form action="#" method="post"> R: <input name="R" type="text" /><br /> G: <input name="G" type="text" /><br /> B: <input name="B" type="text" /><br /> <input type="button" value="Set hover color" onclick="setHoverColor(parseInt(this.form.R.value), parseInt(this.form.G.value), parseInt(this.form.B.value));" /> </form> P.S. Немного доработал. Предполагается, что стиль для #hover:hover изначально в CSS не значится.
-
Координаты объекта можно определить и динамически, так что это не страшно. Впрочем, какая разница, раз всё равно задумка работать не будет.
-
Ёпрст... Я написал адрес от балды, а оказывается, такой сайтец на самом деле имеется в тесном пространстве www. o_O
-
Я проверяю — работает. Повторяю, что ни в открывающем, ни в открываемом документе не должно быть объявления DOCTYPE. P.S. У меня только в FF не работает... P.P.S. Хм. По-видимому, это работает только с документами на localhost'е, а попытка выполнить метод scrollTo на чужом сайте приводит к ошибке доступа...
-
<a href="#" onclick="return openAndScroll('http://www.anywhere.com/index.htm','Blah','');">open and scroll</a>
-
Ну, вот допустим, вы знаете, что заветная строка на чужом сайте имеет координаты в окне браузера (0; 400). Абсцисса обычно не имеет значения (поскольку горизонтальная прокрутка — редкость...). Адрес чужого документа, допустим, http://www.anywhere.com/index.htm. Пишите в своём документе такую функцию: function openAndScroll(strUrl, strWindowName, strWindowFeatures) { var newWnd = window.open(strUrl, strWindowName, strWindowFeatures); newWnd.scrollTo(0, 400); return false; } ... и делаете такую ссылку: <a href="#" onclick="return openAndScroll('http://www.anywhere.com/index.htm','','');">open and scroll</a> Но сразу стоит оговориться, что это будет работать только если не заявлено никакого DOCTYPE.
-
Если вам известны координаты объекта (или строки), к которому должен быть прокручен чужой документ, то в принципе можно. Открываете чужой документ с помощью метода window.open, присваивая результат возвращаемый этим методом, некой переменной (указатель на новое открытое окно), а потом, обращаясь к новому окну с помощью этого указателя-переменной, прокручиваете содержимое открытого окна с помощью метода scrollTo.
-
Ога, а если картинка содержится в каком-нибудь контейнере? <img src="image.jpg" alt="" onclick="this.parentNode.removeChild(this);" />