Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.85/55: Рейтинг темы: голосов - 55, средняя оценка - 4.85
0 / 0 / 0
Регистрация: 27.12.2006
Сообщений: 5

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

27.12.2006, 17:55. Показов 10318. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте!
Есть таблица результатов. Кликаю по столбцу - выполняется сортировка всей таблицы. В этом момент мне нужно что-то писать юзеру. Хочу сделать див с инфой, чтобы он появлялся сразу после клика по столбцу таблицы и исчезал по окончании сортировки.
Я создаю его:
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'ом, а не делать его невидимым, а потом визуализировать.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
27.12.2006, 17:55
Ответы с готовыми решениями:

Цвет фона divа
Как его задать? Я хочу светло серый. &lt;div bgcolor=silver&gt; &lt;p&gt;&lt;b&gt;Программой с текстовым интерфейсом&lt;/b&gt; называется всякая программа,...

dhtml - изменение позиции DIVа
function badd(value) { var rv = (document.getElementById) ? document.getElementById('enter_password') : document.all; ...

Этот скрипт работает на конце странице. Как сделать чтобы работал на конце DIVа?
&lt;script&gt; $(document).ready(function(){ $(window).scroll(function(){ var position = $(window).scrollTop(); var bottom =...

10
86 / 62 / 69
Регистрация: 15.03.2007
Сообщений: 6,903
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}
0
0 / 0 / 0
Регистрация: 27.12.2006
Сообщений: 5
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 появляется только после того, как закончена сортировка. А мне-то надо, чтобы он появлялся ДО нее!
Вот в чем проблема-то.
0
86 / 62 / 69
Регистрация: 15.03.2007
Сообщений: 6,903
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;
    }
    ...
}
0
0 / 0 / 0
Регистрация: 27.12.2006
Сообщений: 5
29.12.2006, 14:29  [ТС]
Спасибо, блин, большое!
Чтоб я без Вас делал?!!
А то я тут весь извелся - не кажет и все тут!
Мда. Век живи - век учись, и дураком помрешь.
Однако, JS - очень нетривиальный язык!
0
0 / 0 / 0
Регистрация: 27.12.2006
Сообщений: 5
29.12.2006, 14:38  [ТС]
слушай, а почему когда ставлю задержку 1, а не 100, у меня первый раз div не появляется, только после 2-го раза?
0
86 / 62 / 69
Регистрация: 15.03.2007
Сообщений: 6,903
29.12.2006, 14:44
Видимо браузер не успевает за такой короткий интервал обновить экран.
0
86 / 62 / 69
Регистрация: 15.03.2007
Сообщений: 6,903
29.12.2006, 15:00
Я имею в виду то, что создание нового DIVa (что делается в первый раз) требует больше времени чем переключение его видимости (что делается во второй).
0
0 / 0 / 0
Регистрация: 27.12.2006
Сообщений: 5
29.12.2006, 15:26  [ТС]
ну да, я понял.
Просто как мне подобрать такую задержку, чтобы на всех пользовательских компах в первый раз браузер успевал создать и отобразить div?
А ставить большую, тоже, сам понимаешь, не очень хочется.
0
86 / 62 / 69
Регистрация: 15.03.2007
Сообщений: 6,903
29.12.2006, 15:53
Только экспериментальным путем. У нас нет способа убедиться, что объект в самом деле был показан на экране. А значит надо подбирать это значение. На мой взгляд ставить значения < 10 мс не стоит. Слишком это мало. Поиграй со значениями в диапазоне, от 10 до 100.
0
2 / 2 / 1
Регистрация: 04.12.2010
Сообщений: 216
31.12.2006, 04:21
Ребята, сорри, но я всегда за более простые решения - а почему не сделать DIV с самого начала, но пустым и невидимым, а JavaScript пишет в него текст и делает видимым?????
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
31.12.2006, 04:21
Помогаю со студенческими работами здесь

Создание таблицы с помощью запроса
Помогите пожалуйста. Есть запрос: create table tbl1(fld integer); Он создает таблицу в текущей базе, как сделать чтобы таблица...

Создание папки с помощью PHP
Можно ли средствами РНР создать папку?

Создание файла с помощью PHP
Здравствуйте, есть php скрипт ,который должен создавать файл прямо из админпанели, он работает, но создаёт файл прямо в директории админки,...

Создание таблицы с помощью JavaScript
Здравствуйте! Помогите, пожалуйста, выполнить следующее задание, очень нужно и срочно! Написать файл HTML. При нажатии на кнопку...

Создание графиков с помощью Java
Мне нужно сделать апплет, который бы создавал графики из данных которые лежат в файле. Но тут я столкнулся с большой проблемой! Чтобы...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm)
8Observer8 30.01.2026
Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru