Создание Div'а с помощью JavaScript'а

@curt_russel · Регистрация: 27.12.2006

Студворк — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
function ShowInfoDiv()
{
  document.writeln("<div id='infoDiv' style='...'>Идет сортировка..</div>");
}
//  скрытие дива
function HideInfoDiv()
{
  getElementById('infoDiv').style.display = 'none'
}

Но эта функция затирает все содержимое.
Подскажите, пожалуйста, как мне сделать, чтобы этот див появлялся поверх всего содержимого?
Спасибо.
P.S. Дело в том, что его нужно создавать именно JavaScript'ом, а не делать его невидимым, а потом визуализировать.

@bazile · 27.12.2006, 19:04

Через методы DOM надо работать:

JavaScript
1
2
3
4
5
6
7
8
function ShowInfoDiv()
{
    var oDiv = document.createElement("DIV");
    oDiv.id = "infoDiv";
    var oText = document.createTextNode("Идет сортировка");
    oDiv.appendChild(oText);
    document.body.appendChild(oDiv);
}

Стиль для такого DIVa может быть например таким:

CSS
1
#infoDiv {position:absolute; left:0; top:0; width:100%; height:100%; background:black; color:white; z-index:10}

@curt_russel · 29.12.2006, 13:58 **[ТС]**

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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'
}

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

HTML5
1
2
3
4
5
<body>
  <table onclick="sortColumn(event);"> 
      .....
  </table>
</body>

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

@bazile · 29.12.2006, 14:11

Пока идет выполнение скрипта браузер не будет обновлять экран. Поэтому придется использовать таймер:

JavaScript
1
2
3
4
5
function sortColumn(e)
{ 
    ShowInfoDiv();
    setTimeout("LetSort(); HideInfoDiv()", 100);
}

Еще я бы избавился от обращения к document.all в функции ShowInfoDiv. Эта коллекция работает только в MSIE/Opera и вообще про нее давно пора уже забыть т.к. анлогичные вещи реализованы в DOM (ее поддерживают все современные браузеры).

JavaScript
1
2
3
4
5
6
7
8
9
10
function ShowInfoDiv()
{
    var infoDiv = document.getElementById('infoDiv');
    if(null != infoDiv)
    {
        infoDiv.style.display = 'block'
        return;
    }
    ...
}

@curt_russel · 29.12.2006, 14:29 **[ТС]**

Спасибо, блин, большое!
Чтоб я без Вас делал?!!
А то я тут весь извелся - не кажет и все тут!
Мда. Век живи - век учись, и дураком помрешь.
Однако, JS - очень нетривиальный язык!

@curt_russel · 29.12.2006, 14:38 **[ТС]**

слушай, а почему когда ставлю задержку 1, а не 100, у меня первый раз div не появляется, только после 2-го раза?

@bazile · 29.12.2006, 14:44

Видимо браузер не успевает за такой короткий интервал обновить экран.

@bazile · 29.12.2006, 15:00

Я имею в виду то, что создание нового DIVa (что делается в первый раз) требует больше времени чем переключение его видимости (что делается во второй).

@curt_russel · 29.12.2006, 15:26 **[ТС]**

ну да, я понял.
Просто как мне подобрать такую задержку, чтобы на всех пользовательских компах в первый раз браузер успевал создать и отобразить div?
А ставить большую, тоже, сам понимаешь, не очень хочется.

@bazile · 29.12.2006, 15:53

Только экспериментальным путем. У нас нет способа убедиться, что объект в самом деле был показан на экране. А значит надо подбирать это значение. На мой взгляд ставить значения < 10 мс не стоит. Слишком это мало. Поиграй со значениями в диапазоне, от 10 до 100.

@vlgsh · 31.12.2006, 04:21

Ребята, сорри, но я всегда за более простые решения - а почему не сделать DIV с самого начала, но пустым и невидимым, а JavaScript пишет в него текст и делает видимым?????

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@curt_russel 0 / 0 / 0 Регистрация: 27.12.2006 Сообщений: 5
	29.12.2006, 14:29 [ТС]
	Спасибо, блин, большое! Чтоб я без Вас делал?!! А то я тут весь извелся - не кажет и все тут! Мда. Век живи - век учись, и дураком помрешь. Однако, JS - очень нетривиальный язык! 0

@curt_russel 0 / 0 / 0 Регистрация: 27.12.2006 Сообщений: 5
	29.12.2006, 14:38 [ТС]
	слушай, а почему когда ставлю задержку 1, а не 100, у меня первый раз div не появляется, только после 2-го раза? 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	29.12.2006, 14:44
	Видимо браузер не успевает за такой короткий интервал обновить экран. 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	29.12.2006, 15:00
	Я имею в виду то, что создание нового DIVa (что делается в первый раз) требует больше времени чем переключение его видимости (что делается во второй). 0

@curt_russel 0 / 0 / 0 Регистрация: 27.12.2006 Сообщений: 5
	29.12.2006, 15:26 [ТС]
	ну да, я понял. Просто как мне подобрать такую задержку, чтобы на всех пользовательских компах в первый раз браузер успевал создать и отобразить div? А ставить большую, тоже, сам понимаешь, не очень хочется. 0

@bazile 86 / 62 / 69 Регистрация: 15.03.2007 Сообщений: 6,903
	29.12.2006, 15:53
	Только экспериментальным путем. У нас нет способа убедиться, что объект в самом деле был показан на экране. А значит надо подбирать это значение. На мой взгляд ставить значения < 10 мс не стоит. Слишком это мало. Поиграй со значениями в диапазоне, от 10 до 100. 0

@vlgsh 2 / 2 / 1 Регистрация: 04.12.2010 Сообщений: 216
	31.12.2006, 04:21
	Ребята, сорри, но я всегда за более простые решения - а почему не сделать DIV с самого начала, но пустым и невидимым, а JavaScript пишет в него текст и делает видимым????? 0