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

dsy

Дата 27.12.2006, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 279
Регистрация: 10.7.2006

Репутация: нет
Всего: 4

первоначальное создание 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 = '';    
}

Это сообщение отредактировал(а) Sardar - 27.12.2006, 14:57

dsy

Дата 27.12.2006, 14:26 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

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

Sardar

Дата 27.12.2006, 15:00 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

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

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

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

dsy

Дата 27.12.2006, 15:46 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

Sardar

Дата 27.12.2006, 16:05 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

--------------------

dsy

Дата 27.12.2006, 16:36 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

Sardar

Дата 27.12.2006, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

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

Код

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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

Sardar

Дата 28.12.2006, 01:40 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

dsy, ты шутишь или вправду сел впервые за JS сегодня?
Вот же ответ
Создай функцию, пусть изменяет style.display, будет соответственно исчезать и появляться.

--------------------

dsy

Дата 29.12.2006, 10:53 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

Код


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 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

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

dsy

Дата 29.12.2006, 12:43 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 23
Регистрация: 19.1.2006

Репутация: нет
Всего: нет

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »