Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Создание DIV'а с помощью JavaScript'а

Автор: dsy 27.12.2006, 14:11

Здравствуйте!
Есть таблица результатов. Кликаю по столбцу - выполняется сортировка всей таблицы. В этом момент мне нужно что-то писать юзеру. Хочу сделать див с инфой, чтобы он появлялся сразу после клика по столбцу таблицы и исчезал по окончании сортировки.
Я создаю его:

Код


function ShowInfoDiv()
{
  document.writeln("<div id='infoDiv' style='...'>Идет сортировка..</div>");
}
//  скрытие дива
function HideInfoDiv()
{
  getElementById('infoDiv').style.display = 'none';
}

Но эта функция затирает все содержимое.

Подскажите, пожалуйста, как мне сделать, чтобы этот див появлялся поверх всего содержимого?
Спасибо.

P.S. Дело в том, что его нужно создавать именно JavaScript'ом, а не делать его невидимым, а потом визуализировать.

Автор: JSman 27.12.2006, 14:19

первоначальное создание diva можно сделать так

Код

function createInfoDiv(){
  if (document.all('infoDiv'))
document.body.insertAdjscentHTML("beforeBegin",
"<DIV ID='infoDiv' STYLE='display:none; ...  '>...<\/DIV>"
);
}


function HideInfoDiv()    
{  
  if (document.all('infoDiv'))  
 document.all ('infoDiv').style.display = 'none';    
}

function ShowInfoDiv()    
{  
  if (document.all('infoDiv'))
  document.all('infoDiv').style.display = '';    
}

Автор: dsy 27.12.2006, 14:26

В P.S. написано, что нужно это сделать на JavaScript'e!

У меня много страниц используют сортировку. Мне на каждой придется писать такой див, как Вы предлагаете?!

Автор: Sardar 27.12.2006, 15:00

JSman, ты больше такого не предлагай smile

dsy, для создания элемента читаем что ест http://w3.org/DOM и по форуму ищем document.createElement - это самый используемый функционал в JS.

А вообще лучше отдавай сообщение о загрузке сразу вёрсткой, скрытой (visibility: hidden), как что делаешь, так и показывай его. Вбей "visibility" или "display" в поиск.

Автор: dsy 27.12.2006, 15:46

Простите, не понял.
Как отдавать сообщение?
Можно поподробней?

Автор: Sardar 27.12.2006, 16:05

Просто вместе со страницей сгенери свой слой с чем угодно, но стилями скрой (display: none; или visibility: hidden). Затем когда окошко нужно показать, просто достаёшь его по document.getElementById("id элемента").style.(display или visibility) = ("block" или "visible");

Автор: dsy 27.12.2006, 16:36

Этот вариант был бы самым простым, была бы у меня 1-2 страницы.
Но у меня их 50-100, дальше - больше.
Поэтому мне и нужен JavaScript.

Автор: Sardar 27.12.2006, 17:31

Я думал у тебя на сервере скрипты стоят. ОК, тогда как уже говорил выше:

Код

var div = document.createElement("div");
div.className = "любой CSS класс для внешнего вида";
div.innerHTML = "<b>Любая вёрстка кроме таблиц (глючат)</b>"; //тем кто поморщил нос от innerHTML, не стоит пугать начинающего "чистым" DOM'ом =)
document.body.appendChild(div); //добавили на страницу в конец, но стилями ставим на абсолютную в нужную позицию

//не учитывая скрола страницы
div.style.left = screen.width / 2 - div.offsetWidth / 2;
div.style.top = screen.height / 2 - div.offsetHeight / 2;

Простейший вариант. Нормальное позиционирование по середине выдерни из любого скрипта, хоть на этом форуме.

Автор: dsy 27.12.2006, 17:36

спасибо. это у меня получилось.
А как теперь вывести этот DIV без обновления страницы?
И заглушить его также без обновления?

Автор: Sardar 28.12.2006, 01:40

dsy, ты шутишь или вправду сел впервые за JS сегодня?
http://forum.vingrad.ru/index.php?showtopic=129560&view=findpost&p=977319
Создай функцию, пусть изменяет style.display, будет соответственно исчезать и появляться.

Автор: dsy 29.12.2006, 10:53

Хорошо.
У вас все работает на простом примере - у меня тоже.
А теперь реальная ситуация.

Код


function sortColumn(e)
{ 
    ShowInfoDiv();
    LetSort();
    HideInfoDiv();    //  никаких задержек!! - нафиг они мне нужны
}

function LetSort()   //  заглушка реальной сортировки
{
    var res;
    for(var i=0; i<1000000; i++)
                    for(var j=i; j<1000000; j++)
            res += i*i*i/(j*j);
}

function ShowInfoDiv()
{
    if(document.all['infoDiv'])
    {
        document.getElementById('infoDiv').style.display = '';
        return;
    }
    var divWidth = 200;
    var divHeight = 22;
    var left = parseInt((document.body.clientWidth - divWidth) / 2)-10;
    var top = parseInt((document.body.clientHeight - divHeight) / 2)-10;  
    elDiv = document.createElement('div');
    elDiv.innerHTML = "<div id='infoDiv' style='left:"+left+"; top:"+top+"; position:absolute; display:block;"+
        " background:#778899; color:White; font-size:larger; text-align:center; width:" +divWidth+ "; height:" +divHeight+ ";'>Процесс сортировки...</div>";
    document.body.appendChild(elDiv);    
}
function HideInfoDiv()
{
    document.getElementById('infoDiv').style.display = 'none';
}

Дальше идет просто таблица с кучей записей:

Код


<body>
  <table onclick="sortColumn(event);">
      .....
  </table>
</body>

Так вот. Дело все в том, что этот div появляется только после того, как закончена сортировка. А мне-то надо, чтобы он появлялся ДО нее!
Вот в чем проблема-то.

Автор: 12345c 29.12.2006, 12:28

Ошибка в комментарии к 5-й строчке. Задержка нужна, чтобы див смог прорисоваться. Иначе, он даже не возникнет или выскочит на мгновение после сортировки.

Добавлено @ 12:29
(Задержка - это setTimeout.)

Автор: dsy 29.12.2006, 12:43

Понял, спасибо!