Jump to content

Styx

User
  • Posts

    97
  • Joined

  • Last visited

Everything posted by Styx

  1. Привет. Имеется таблица, один столбец которой имеет левый и правый бордеры. При движении указателя мыши по таблице строка под курсором выделяется путем установки ее ячейкам верхнего и нижнего бордера. Вот как это в идеале выглядит: Это имеющаяся верстка данной таблицы: <!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. Вопрос в том, как избавиться от разрывов границ столбца и сохранить при этом остальной функционал (отображение верхней и нижней границ строки под курсором). Помогите, плиз.
  2. Здесь цикл со счетчиком — неудачная идея, так как инкремент счетчика должен происходить только в том случае, если условие в теле цикла не выполняется. 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;
  3. Атрибут nodeValue принадлежит объекту #text внутри контейнера span, а не самому контейнеру. <span onclick="alert(this.firstChild.nodeValue);">Содержимое</span>
  4. Можно изменить функцию следующим образом: 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); }
  5. По поводу кодировки — удалите на всякий случай все комментарии. Я дописал их на форуме, а сам документ писал в UTF-8. DOCTYPE не должен оказывать принципиального влияния на работу данного скрипта.
  6. o_O Проверяю — работает, причём во всех браузерах. Достаточно просто скопировать код и всё... Точно работает. Расположение скрипта в данном случае значения не имеет. P.S. Наличие какого-то начального текста или хотя бы — как у меня — неразрывного пробела в абзаце, в котором выводится время, обязательно!
  7. Вот эта ваша переменная {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>
  8. <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 не значится.
  9. Координаты объекта можно определить и динамически, так что это не страшно. Впрочем, какая разница, раз всё равно задумка работать не будет.
  10. Ёпрст... Я написал адрес от балды, а оказывается, такой сайтец на самом деле имеется в тесном пространстве www. o_O
  11. Я проверяю — работает. Повторяю, что ни в открывающем, ни в открываемом документе не должно быть объявления DOCTYPE. P.S. У меня только в FF не работает... P.P.S. Хм. По-видимому, это работает только с документами на localhost'е, а попытка выполнить метод scrollTo на чужом сайте приводит к ошибке доступа...
  12. <a href="#" onclick="return openAndScroll('http://www.anywhere.com/index.htm','Blah','');">open and scroll</a>
  13. Ну, вот допустим, вы знаете, что заветная строка на чужом сайте имеет координаты в окне браузера (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.
  14. Если вам известны координаты объекта (или строки), к которому должен быть прокручен чужой документ, то в принципе можно. Открываете чужой документ с помощью метода window.open, присваивая результат возвращаемый этим методом, некой переменной (указатель на новое открытое окно), а потом, обращаясь к новому окну с помощью этого указателя-переменной, прокручиваете содержимое открытого окна с помощью метода scrollTo.
  15. Ога, а если картинка содержится в каком-нибудь контейнере? <img src="image.jpg" alt="" onclick="this.parentNode.removeChild(this);" />
  16. Вот небольшой примерчик. <!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>Slide menus</title> <style type="text/css"> div.submenu { background: #00AA00; overflow: hidden; width: 200px; } </style> <script type="text/javascript"> var timeoutID = 0; function dropDwn(menuId) { var scroll_menu = document.getElementById(menuId); if (scroll_menu.offsetHeight < allSubmenus[menuId]) { scroll_menu.style.height = (scroll_menu.offsetHeight + 5).toString() + "px"; } else { window.clearInterval(timeoutID); timeoutID = 0; } } function dropBack(menuId) { var scroll_menu = document.getElementById(menuId); if (scroll_menu.offsetHeight > 5) { scroll_menu.style.height = (scroll_menu.offsetHeight - 5).toString() + "px"; } else { scroll_menu.style.height = "0px"; window.clearInterval(timeoutID); timeoutID = 0; currentHeight = 0; } } function showhide(menuId) { if (timeoutID != 0) {window.clearInterval(timeoutID);} if (document.getElementById(menuId).offsetHeight < 1) { timeoutID = window.setInterval("dropDwn('" + menuId + "')", 20); } else { timeoutID = window.setInterval("dropBack('" + menuId + "')", 20); } } </script> </head> <body> <p><a href="#" onclick="showhide('scrollMenu1');">Expand menu 1</a></p> <div class="submenu" id="scrollMenu1"> <a href="#">Lorem</a><br /> <a href="#">ipsum</a><br /> <a href="#">dolor</a><br /> <a href="#">sit</a><br /> <a href="#">amet</a> </div> <p><a href="#" onclick="showhide('scrollMenu2');">Expand menu 2</a></p> <div class="submenu" id="scrollMenu2"> <a href="#">consectetur</a><br /> <a href="#">adipiscing</a><br /> <a href="#">elit</a> </div> <!-- etc. --> <script type="text/Javascript"> var allSubmenus = new Array(); var allDivs = document.getElementsByTagName("div"); for (var i = 0; i < allDivs.length; i++) { if ((allDivs[i].className == "submenu") && (allDivs[i].id)) { allSubmenus[allDivs[i].id] = allDivs[i].offsetHeight; allDivs[i].style.height = "0px"; } } </script> </body> </html> Всем выезжающим div'ам задаём уникальные идентификаторы (id) и единое имя класса (у меня "submenu"). При загрузке документа составляем массив с ключами, равными id, и значениями, равными полной высоте каждого выезжающего контейнера (высоты ведь могут быть разными из-за различия в содержимом контейнеров). В основном сценарии изменения небольшие. Связаны с тем, что теперь параметры div'ов содержатся не в глобальной переменной, а в массиве. Как сумел — объяснил...
  17. Потому что глобальная переменная currentHeight (текущая высота раскрытого меню) имеется в единственном экземпляре и применяется и к первому открытому диву, а потом и ко второму (причем для второго она уже не отражает действительной высоты). Короче, для правильной работы у каждого дива должна быть своя переменная currentHeight, а не одна на всех. Как это эффективно реализовать — другой вопрос...
  18. Разве? <div id="me">Виновник торжества</div> <script type="text/javascript"> document.onmousemove=function(evnt){ ev = (evnt) ? evnt : window.event; var sender = (ev.srcElement) ? ev.srcElement : ev.target; if(document.getElementById('me')==sender){alert('Попался!');} }; </script>
  19. Если новое окно открывать методом window.open, то в открываемом новом окне достаточно вписать одну строчку скрипта в разделе head, чтобы передать фокус обратно открывающему окну... window.opener.focus(); Только этот «фокус» работает только в IE, кажется. =\
  20. Свойства bodrer-left и border-right CSS. =))
  21. Вот... <!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>Template</title> <style type="text/css"> div.submenu { background: #00AA00; overflow: hidden; width: 200px; } </style> <script type="text/javascript"> var timeoutID = 0; var currentHeight = 0; function dropDwn() { if (currentHeight < maxMenuHeight) { currentHeight += 5; scroll_menu.style.height = currentHeight.toString() + "px"; } else { window.clearInterval(timeoutID); timeoutID = 0; } } function dropBack() { if (currentHeight > 5) { currentHeight -= 5; scroll_menu.style.height = currentHeight.toString() + "px"; } else { scroll_menu.style.height = "0px"; window.clearInterval(timeoutID); timeoutID = 0; currentHeight = 0; } } function show(linkobj) { if (timeoutID != 0) {window.clearInterval(timeoutID);} linkobj.parentNode.innerHTML="<a href='#' onclick='hide(this);'>Collapse menu</a>"; timeoutID = window.setInterval("dropDwn()", 10); } function hide(linkobj) { if (timeoutID != 0) {window.clearInterval(timeoutID);} linkobj.parentNode.innerHTML="<a href='#' onclick='show(this);'>Expand menu</a>"; timeoutID = window.setInterval("dropBack()", 10); } </script> </head> <body> <div><a href="#" onclick="show(this);">Expand menu</a></div> <div class="submenu" id="scrollMenu"> <a href="#">Lorem</a><br /> <a href="#">ipsum</a><br /> <a href="#">dolor</a><br /> <a href="#">sit</a><br /> <a href="#">amet</a> </div> <script type="text/Javascript"> var scroll_menu = document.getElementById("scrollMenu"); var maxMenuHeight = scroll_menu.offsetHeight; scroll_menu.style.height = "0px"; </script> </body> </html>
  22. Почему? <a href="../index.html#point" target="frameName">Если правильно оформить, то должно прокатить.</a> frameName — имя фрейма, в котором открываете документ. Если всё же не катит и это, делайте с помощью метода scrollTo().
  23. ActiveX в помощь.
  24. Styx

    кодировка

    Страдаю телепатией. Просто человеку нужна была функция unescape либо decodeURIComponent.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy