Определение местоположения Div

  • Автор темы Автор темы Flay
  • Дата начала Дата начала
F

Flay

Помогите решить задачу пожалуйста.
Никак не могу узнать координаты блока DIV. Например у меня есть код:
Код: 
...
...
...
<table>
<tr><td><div> ... </div </td></tr>
</table>
...
...
...

Этот блок не имеет постоянных координат :-(
Мне это надо для того чтобы по нажатию кнопки скрыть его и за место него вывести другой. Если есть другие варианты, поделитесь пожалуйста.

Заранее благодарен.
 
Ну так присвойте ему id, чтобы его можно было найти через DOM.
 
Не ну ID то я ему присвоил конечно, но такие скрипты как:
1.document.getElementById("voting").left;
2.document.getElementById("voting").style.left;
3.document.getElementById("voting").style.pixelLeft;

возврящают
1) undefined
2) NULL
3) 0
 
А зачем Вам координаты? Не подходит написать сразу два div один из которых скрытый, а потом его показать и скрыть первый? Или скрывать строку таблицы. Не вижу смысла искать координату, чтобы потом показать другой текст на этом же месте.
 
ну у меня в принципе и так идет 2 дива подряд
Код: 
<div id="voiting"> ... </div>
<div id="result" style="visibility: hidden;"> ... </div>

в первом по нажатию кнопки вызывается java script:
Код: 
document.getElementById('voting').style.visibility = "hidden";
document.getElementById('result').style.visibility = "visible";

Но второй блок выводится ниже первого :-(
 
Хорошо, а если удалять? Или же в этот же div писать другой текст?
 
Не получается почему то, пробовал три метода:
Код: 
var div = document.all.voting;
while (div.firstChild) div.removeChild(div.firstChild);
Код: 
var div = document.getElementById("voting");
var ParentDIV=div.parentNode;
if (!ParentDIV) return; 
var text= ParentDIV.innerHTML;
text=text.replace(/<\x2Fdiv>/gi, "</DIV>"); 
ParentDIV.innerHTML=text;
Код: 
document.all.voting.removeNode(true);
или
document.getElementById('voting').removeNode(true);
визде результат один - не появляется второй DIV на экране, т.к. браузеры не могут выполнить эти коды. То что они их не выполняют проверил поставив alert сразу после них. Не погу понять в чем проблемма

А нет, выполняется нормально, но по ходу дела сносит и второй DIV
 
Третий вариант не проверял. Первый вариант работает, если после этих двух строк писать
div.innerHTML = "some_test";
Всё заменяется.
Второй вариант тоже работает, только у вас replace не отрабатывает, не удовлетворяет условию строка, поэтому ничего не изменяется.

Проверено всё в Opera 9.5.

Смотрите где у Вас в функциях косяк, именно эти куски работают.
Ниже пример где это тестировалось.

[codebox]<html>
<head>
<title>test</title>
</HEAD>
<BODY bgcolor=lightgreen>
<script>
function Click1()
{
//var div = document.all.voting;
//alert(div.firstChild);
//while (div.firstChild) div.removeChild(div.firstChild);
//div.innerHTML= "asf";
var div = document.getElementById("voting");
var ParentDIV=div.parentNode;
if (!ParentDIV) return;
var text= ParentDIV.innerHTML;
alert(text);
text=text.replace(/<\x2Fdiv>/gi, "</DIV>");
alert(text);
text="test";
ParentDIV.innerHTML=text;
}
</script>
<table>
<tr>
<td>
<div id="voting">Text in div</div>
</td>
<td>
column2
</td>
</tr>
<tr>
<td>
column21
</td>
<td>
column22
</td>

</tr>
</table>
<a href="#" onclick="Click1();" >rrr</a>
</BODY>
</HTML>[/codebox]


Flay сказал(а):
А нет, выполняется нормально, но по ходу дела сносит и второй DIV
Нажмите, чтобы раскрыть...
Ой, что-то Вы запутали меня:)
 
Хм... вставил Ваш пример в свой код... оказывается он не содержимое DIVа выводи а полностью весь код страницы... сейчас попробую разобраться почему.

Теперь у меня малость другой вопрос: чем отличается
Код: 
<div id="voting">
<table>
<tr><td>
<input type="button" value="Голосовать" onClick="VotingSend()">
</td></tr></table>
</div>
от
Код: 
<table>
<tr><td>
<div id="voting">
<input type="button" value="Голосовать" onClick="VotingSend()">
</div>
</td></tr></table>

Со вторым примером все работает на ура, а чем же в первом мешает таблица?
 
Конечно таблица. Её просто через innerHTML не заменишь. Вы может быть столкнётесь с этим:) Когда аякс будете использовать на странице с таблицами:) В общем то Вы с этим столкнулись уже, и решили проблему. Таблицу мучать только через appendChild, removeChild.
 
Большое спасибо за помощь с такой проблеммой.
Не забыл конечно и репутацию повысить :)

Кстати, теперь работают и начальные скрипты:
document.getElementById("voting").style.left;

Вся проблемма была только в таблице
 
а почему бы не сделать скрывание появление дивов с помощью свойства display:none; display:block; ? работает во всех браузерах
 
Avenger сказал(а):
а почему бы не сделать скрывание появление дивов с помощью свойства display:none; display:block; ? работает во всех браузерах
Нажмите, чтобы раскрыть...
Спасибо за ещё один вариант решения, он помог оптимизировать скрипт.
+1 к репутации
 
Для ответа нужно войти/зарегистрироваться
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!

Верх Низ