Форум программистов > Определение местоположения Div

Помощь - Поиск - Пользователи - Календарь

Полная версия этой страницы: Определение местоположения Div

Форум программистов > Интернет и сети > Web-программирование > HTML, CSS, XML, JavaScript

Flay

1:06:2008, 18:12

Помогите решить задачу пожалуйста.
Никак не могу узнать координаты блока DIV. Например у меня есть код:

...
...
...
<table>
<tr><td><div> ... </div </td></tr>
</table>
...
...
...

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

Заранее благодарен.

destr

1:06:2008, 18:29

Ну так присвойте ему id, чтобы его можно было найти через DOM.

Flay

1:06:2008, 18:53

Не ну ID то я ему присвоил конечно, но такие скрипты как:
1.document.getElementById("voting").left;
2.document.getElementById("voting").style.left;
3.document.getElementById("voting").style.pixelLeft;

возврящают
1) undefined
2) NULL
3) 0

destr

1:06:2008, 19:09

А зачем Вам координаты? Не подходит написать сразу два div один из которых скрытый, а потом его показать и скрыть первый? Или скрывать строку таблицы. Не вижу смысла искать координату, чтобы потом показать другой текст на этом же месте.

Flay

1:06:2008, 19:30

ну у меня в принципе и так идет 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";

Но второй блок выводится ниже первого :-(

destr

1:06:2008, 20:06

Хорошо, а если удалять? Или же в этот же div писать другой текст?

Flay

1:06:2008, 20:44

Не получается почему то, пробовал три метода:

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(/&nbsp;<\x2Fdiv>/gi, "</DIV>"); 
ParentDIV.innerHTML=text;

document.all.voting.removeNode(true);
или
document.getElementById('voting').removeNode(true);

визде результат один - не появляется второй DIV на экране, т.к. браузеры не могут выполнить эти коды. То что они их не выполняют проверил поставив alert сразу после них. Не погу понять в чем проблемма

А нет, выполняется нормально, но по ходу дела сносит и второй DIV

destr

1:06:2008, 21:02

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

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

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

CODE

<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(/&nbsp;<\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>

Цитата(Flay @ 2:06:2008, 00:44 )

А нет, выполняется нормально, но по ходу дела сносит и второй DIV

Ой, что-то Вы запутали меня:)

Flay

1:06:2008, 21:40

Хм... вставил Ваш пример в свой код... оказывается он не содержимое 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>

Со вторым примером все работает на ура, а чем же в первом мешает таблица?

destr

1:06:2008, 21:52

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

Flay

1:06:2008, 22:26

Большое спасибо за помощь с такой проблеммой.
Не забыл конечно и репутацию повысить

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

Вся проблемма была только в таблице

Avenger

1:06:2008, 22:59

а почему бы не сделать скрывание появление дивов с помощью свойства display:none; display:block; ? работает во всех браузерах

Flay

2:06:2008, 10:38

Цитата(Avenger @ 2:06:2008 - 03:59)

Спасибо за ещё один вариант решения, он помог оптимизировать скрипт.
+1 к репутации

Для просмотра полной версии этой страницы, пожалуйста, пройдите по ссылке.