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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем Flay, 1 июн 2008.

  1. Flay

    Flay Гость

    Помогите решить задачу пожалуйста.
    Никак не могу узнать координаты блока DIV. Например у меня есть код:
    Код (Text):
    ...
    ...
    ...
    <table>
    <tr><td><div> ... </div </td></tr>
    </table>
    ...
    ...
    ...
    Этот блок не имеет постоянных координат :-(
    Мне это надо для того чтобы по нажатию кнопки скрыть его и за место него вывести другой. Если есть другие варианты, поделитесь пожалуйста.

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

    destr Гость

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

    Flay Гость

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

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

    destr Гость

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

    Flay Гость

    ну у меня в принципе и так идет 2 дива подряд
    Код (Text):
    <div id="voiting"> ... </div>
    <div id="result" style="visibility: hidden;"> ... </div>
    в первом по нажатию кнопки вызывается java script:
    Код (Text):
    document.getElementById('voting').style.visibility = "hidden";
    document.getElementById('result').style.visibility = "visible";
    Но второй блок выводится ниже первого :-(
     
  6. destr

    destr Гость

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

    Flay Гость

    Не получается почему то, пробовал три метода:
    Код (Text):
    var div = document.all.voting;
    while (div.firstChild) div.removeChild(div.firstChild);
    Код (Text):
    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;
    Код (Text):
    document.all.voting.removeNode(true);
    или
    document.getElementById('voting').removeNode(true);
    визде результат один - не появляется второй DIV на экране, т.к. браузеры не могут выполнить эти коды. То что они их не выполняют проверил поставив alert сразу после них. Не погу понять в чем проблемма

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

    destr Гость

    Третий вариант не проверял. Первый вариант работает, если после этих двух строк писать
    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]


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

    Flay Гость

    Хм... вставил Ваш пример в свой код... оказывается он не содержимое DIVа выводи а полностью весь код страницы... сейчас попробую разобраться почему.

    Теперь у меня малость другой вопрос: чем отличается
    Код (Text):
    <div id="voting">
    <table>
    <tr><td>
    <input type="button" value="Голосовать" onClick="VotingSend()">
    </td></tr></table>
    </div>
    от
    Код (Text):
    <table>
    <tr><td>
    <div id="voting">
    <input type="button" value="Голосовать" onClick="VotingSend()">
    </div>
    </td></tr></table>
    Со вторым примером все работает на ура, а чем же в первом мешает таблица?
     
  10. destr

    destr Гость

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

    Flay Гость

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

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

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

    Avenger Гость

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

    Flay Гость

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

Поделиться этой страницей