Styx
-
Posts
97 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Styx
-
Привет. Имеется таблица, один столбец которой имеет левый и правый бордеры. При движении указателя мыши по таблице строка под курсором выделяется путем установки ее ячейкам верхнего и нижнего бордера. Вот как это в идеале выглядит: Это имеющаяся верстка данной таблицы: <!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);" />
-
Учите английский.
-
Вот небольшой примерчик. <!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'ов содержатся не в глобальной переменной, а в массиве. Как сумел — объяснил...
-
Потому что глобальная переменная currentHeight (текущая высота раскрытого меню) имеется в единственном экземпляре и применяется и к первому открытому диву, а потом и ко второму (причем для второго она уже не отражает действительной высоты). Короче, для правильной работы у каждого дива должна быть своя переменная currentHeight, а не одна на всех. Как это эффективно реализовать — другой вопрос...
-
Разве? <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>
-
Если новое окно открывать методом window.open, то в открываемом новом окне достаточно вписать одну строчку скрипта в разделе head, чтобы передать фокус обратно открывающему окну... window.opener.focus(); Только этот «фокус» работает только в IE, кажется. =\
-
Свойства bodrer-left и border-right CSS. =))
-
Вот... <!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>
-
Почему? <a href="../index.html#point" target="frameName">Если правильно оформить, то должно прокатить.</a> frameName — имя фрейма, в котором открываете документ. Если всё же не катит и это, делайте с помощью метода scrollTo().
-
ActiveX в помощь.
-
Страдаю телепатией. Просто человеку нужна была функция unescape либо decodeURIComponent.