Styx

CTEKJlO, вообще-то для этих целей существуют классы.

Проще всего (особенно для списков большего размера) сделать так: <select size="1" name="select1" onchange="this.form.select2.selectedIndex=this.selectedIndex;">

Это так... просто. Не люблю, когда имена пользовательских переменных совпадают с названиями объектов/атрибутов/методов и проч. (даже если переменные в локальной области видимости, и никаких конфликтов не может быть). Но придумывать оригинальное говорящее название переменным лень.

Сценарий во внешнем файле правильно подключаете (с учетом того, что вместо ".js" прописан корректный путь). Во внешнем скрипте уже не должно быть никаких дескрипторов типа <script ...></script>. Если есть FF, посмотрите в консоли javascript, какие выдает ошибки. Можно. function setDefaults(f) { if (!confirm("Вы действительно хотите сбросить все данные?")) {return false;} f.Check3.checked = false; f.select1.disabled = true; return true; } <form action="___.php" method="post" onreset="return setDefaults(this);">

Sorry, ошибся. <form action="___.php" method="post" name="form" onreset="setDefaults(this);">

Попробуйте еще так... =) Javascript: <script type="text/javascript"> function checkReadOnly(e) { var evnt = (e) ? e : ((window.event) ? window.event : null); var _keyCode = evnt.charCode ? evnt.charCode : evnt.keyCode; if (_keyCode != 9) {return true;} var sender = (evnt.srcElement) ? evnt.srcElement : evnt.target; var _form = document.getElementById("superForm"); if (!_form.elements[sender.name]) {return true;} var nextFocused = _form.elements[_form.elements.length - 1]; for (var i = _form.elements.length - 1; i > -1; i--) { if (_form.elements[i] == sender) {break;} if (!_form.elements[i].readOnly) { nextFocused = _form.elements[i - 1]; } } nextFocused.focus(); } window.onkeypress = function(e) {checkReadOnly(e);} </script> XHTML (например): <form action="#" method="post" id="superForm"> <input type="text" size="25" name="first" value="I'm not readonly..." /><br /> <input type="text" size="25" name="second" value="I'm not readonly..." /><br /> <input type="text" size="25" name="third" value="I'm readonly..." readonly="readonly" /><br /> <input type="text" size="25" name="fourth" value="I'm not readonly..." /><br /> <textarea rows="10" cols="35" name="fifth">I'm not readOnly...</textarea> <textarea rows="10" cols="35" name="sixth" readonly="readonly">I'm readOnly...</textarea><br /> <input type="submit" value="submit" name="seventh" onclick="return false;" /> </form>

slavok47, напишите функцию восстановления значений по умолчанию и назначьте ее как обработчик события onreset. function setDefaults(f) { f.Check3.checked = false; f.select1.disabled = true; } <form action="___.php" method="post" name="form" onreset="setDefaults(this.form);">

Из-за этого: маркер не выносится за границу элемента списка, а будет отображаться в элементе. Отступ 20px будет слева от маркера (изображения).

Вот для случая транспонирования квадратной таблицы-матрицы с простым неформатированным текстовым содержимым. Javascript: <script type="text/javascript"> function transpose(matrixId) { var matr = document.getElementById(matrixId); var rowCount = matr.getElementsByTagName("tr").length; var colCount = matr.getElementsByTagName("tr")[0].getElementsByTagName("td").length; var currRow = null; var currCell = null; var oppositeCell = null; var cellText = ""; for (var i = 0; i < rowCount; i++) { currRow = matr.getElementsByTagName("tr")[i]; for (j = i + 1; j < colCount; j++) { currCell = currRow.getElementsByTagName("td")[j]; cellText = currCell.firstChild.data; oppositeCell = matr.getElementsByTagName("tr")[j].getElementsByTagName("td")[i]; currCell.firstChild.data = oppositeCell.firstChild.data; oppositeCell.firstChild.data = cellText; } } } </script> XHTML: <form action="#" method="post"> <table border="2" rules="all" id="matrix"> <tr><td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td></tr> <tr><td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td></tr> <tr><td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td></tr> <tr><td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td></tr> <tr><td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td><td>5.5</td></tr> </table> <input type="button" onclick="transpose('matrix');" value="transpose" /> </form> Для прямоугольной матрицы сами напишите? =) P.S. Если содержимое ячеек — форматированный текст или что-то еще, то всюду вместо атрибутов firstChild.data следует прописать атрибут innerHTML.

Придется выносить действия в отдельный скрипт. Но оно и правильнее. <script type="text/javascript"> function addTrainer(btnObj) { var newTrainer = document.getElementById('trainer').cloneNode(10); var fields = newTrainer.getElementsByTagName("input"); for (var i = 0; i < fields.length; i++) { fields[i].value = ""; } btnObj.parentNode.insertBefore(newTrainer, btnObj); } </script> ........................ <form action="#" method="post"> <div style="margin: 10px; padding: 20px; border: 1px solid #000; width: 300px;"> <strong>Sportsman</strong><br /> first name: <input type="text" size="15" /><br /> last name: <input type="text" size="15" /> </div> <div id="trainer" style="margin: 10px; padding: 20px; border: 1px solid #000; width: 300px;"> <strong>Trainer</strong><br /> first name: <input type="text" size="15" /><br /> last name: <input type="text" size="15" /> </div> <input type="button" value="Add trainer" onclick="addTrainer(this);" /> </form>

alexander_21777, не знаю, у меня и в IE (6) работает... Вы неподвижный фон для body ставите?

background: fixed no-repeat url(background.jpg);

А что именно не так, если не трудно? Я могу, например, легко менять содержимое обеих вкладок, равно как содержимое левой и правой частей на каждой вкладке, просто заменяя содержимое контейнеров с идентификатором activeLeft и activeRight или с классом contLeft и contRight. При этом стили самих вкладок можно не изменять или изменять лишь в малой степени. Или есть какие-то существенные огрехи?

DasBit, еще укажите тип MIME в дескрипторе <script type="text/javascript"></script>

s0rr0w, спасибо за замечание. Исправлю у себя.

Спасибо. Думаю, это только на первый раз. В следующий исправлюсь, сделаю на отдельной... <!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>Form</title> <style type="text/css"> * { margin: 0px; padding: 0px; } body { font-family: Arial, Verdana; font-size: 10pt; padding: 30px; } input { margin-right: 12px; line-height: 20pt; } form { font-weight: bold; } #main { width: 440px; height: 260px; padding: 0px; line-height: 20pt; } #tabLeft, #tabRight { height: 30px; text-align: center; float: left; } #tabLeft a, #tabRight a { height: 30px; outline: none; } .activeTab { width: 218px; border-left: 1px solid #D0D0D0; border-right: 1px solid #D0D0D0; border-top: 1px solid #D0D0D0; border-bottom: 0px; } .activeTab a { color: #000000; text-decoration: none; cursor: default; } .inactiveTab { width: 220px; border-left: 0px; border-right: 0px; border-top: 0px; border-bottom: 1px solid #D0D0D0; } .inactiveTab a { color: #73A0C5; text-decoration: none; cursor: pointer; border-bottom: 1px dashed #73A0C5; } #activeLeft, #activeRight { border-bottom: 1px solid #D0D0D0; border-left: 1px solid #D0D0D0; border-right: 1px solid #D0D0D0; clear: both; } #activeRight { display: none; } .contLeft, .contRight { float: left; padding: 15px 0px 15px 25px; width: 194px; } .contLeft p, .contRight p { text-align: right; color: #ACACAC; letter-spacing: 2pt; margin-right: 15px; } .contLeft div { border-right: 1px solid #D0D0D0; } .area { width: 149px; height: 25px; border: 1px solid #000000; } #footer { background-color: #F0F0F0; width: 420px; height: 40px; padding: 5px 10px; } #footer input { background-color: #D1D1D1; float: right; font-weight: bold; font-size: 12pt; border: 0px; width: 102px; height: 32px; left: 315px; top: 5px; } </style> <script type="text/javascript"> function changeTab(sender) { var activeTab = sender.parentNode; var isLeftSender = (activeTab.id == "tabLeft"); var inactiveTab = (isLeftSender) ? document.getElementById("tabRight") : document.getElementById("tabLeft"); activeTab.className = "activeTab"; inactiveTab.className = "inactiveTab"; document.getElementById("activeLeft").style.display = (isLeftSender) ? "block" : "none"; document.getElementById("activeRight").style.display = (isLeftSender) ? "none" : "block"; } </script> </head> <body> <form action="#" method="post"> <div id="main"> <div id="tabLeft" class="activeTab"><a href="#" onclick="changeTab(this);">Гражданское строительство</a></div> <div id="tabRight" class="inactiveTab"><a href="#" onclick="changeTab(this);">Промышленное строительство</a></div> <div id="activeLeft"> <div class="contLeft"> <p>СФЕРА</p> <div> <input type="radio" name="sphere" value="houses" />жилые дома<br /> <input type="radio" name="sphere" value="admin" />административные<br /> <input type="radio" name="sphere" value="catering" />обществ. питание </div> <br clear="all" /> <input type="radio" name="bottomRadio" value="new" />новое<br /> <input type="radio" name="bottomRadio" value="reconstruct" />реконструкция </div> <div class="contRight"> <p>РЕЗУЛЬТАТ</p> <div> <input type="radio" name="sphere2" value="workdoc" />рабочая документация<br /> <input type="radio" name="sphere2" value="project" />проект<br /> <input type="radio" name="sphere2" value="workproj" />рабочий проект </div> <br clear="all" /> площадь застройки<br /> <input type="text" name="area" class="area" /><big>М²</big> </div> <div style="clear: both;"></div> </div> <div id="activeRight"> <div class="contLeft"> <p>SPHERE</p> <div> <input type="radio" name="sphere" value="houses" />houses<br /> <input type="radio" name="sphere" value="admin" />administrative<br /> <input type="radio" name="sphere" value="catering" />catering </div> <br clear="all" /> <input type="radio" name="bottomRadio" value="new" />new<br /> <input type="radio" name="bottomRadio" value="reconstruct" />reconstruction </div> <div class="contRight"> <p>RESULT</p> <div> <input type="radio" name="sphere2" value="workdoc" />documentation<br /> <input type="radio" name="sphere2" value="project" />project<br /> <input type="radio" name="sphere2" value="workproj" />work project </div> <br clear="all" /> site area<br /> <input type="text" name="area2" class="area" /><big>М²</big> </div> <div style="clear: both;"></div> </div> <div id="footer"><input type="button" value="Рассчитать" onclick="return false;" /></div> </div> </form> </body> </html>

А можно просто сюда выложу код своего варианта исполнения? Или обязательно надо где-то в интернете сделать страничку? Картинок-то все равно нет...

Кроссбраузерно это можно сделать так... <p><img src="img.gif" alt="image" onmouseover="document.getElementById('hiddenTxt').firstChild.data='Text is visible!';" onmouseout="document.getElementById('hiddenTxt').firstChild.data=' ';" /></p> <div id="hiddenTxt"> </div>

Hawk173, исправьте else{ document.getElementById(id).style.display="block"; } Присваивание, а не сравнение.

Можно и так: <form action="#" method="post"> <div style="margin: 10px; padding: 20px; border: 1px solid #000; width: 300px;"> <strong>Sportsman</strong><br /> first name: <input type="text" size="15" /><br /> last name: <input type="text" size="15" /> </div> <div id="trainer" style="margin: 10px; padding: 20px; border: 1px solid #000; width: 300px;"> <strong>Trainer</strong><br /> first name: <input type="text" size="15" /><br /> last name: <input type="text" size="15" /> </div> <input type="button" value="Add trainer" onclick="this.parentNode.insertBefore(document.getElementById('trainer').cloneNode(10), this);" /> </form>

Можно в дочернем окне оформить ссылку так: <a href="#" onclick="opener.location.href='http://www.google.com';">Open Google in the opener window</a> Тогда открываться будет в родительском.

<div><img src="cat.gif" alt="cat" id="cat" /></div> <script type="text/javascript"> var catImg = document.getElementById("cat"); var _width = catImg.offsetWidth; var _height = catImg.offsetHeight; /* масштабируем до 50% */ catImg.style.width = Math.round(_width * 0.5); catImg.style.height = Math.round(_height * 0.5); /* обрезаем до размеров 100 x 100 */ catImg.parentNode.style.width = "100px"; catImg.parentNode.style.height = "100px"; catImg.parentNode.style.overflow = "hidden"; </script>