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

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

Форум программистов > JavaScript: Общие вопросы > Расположение дива.

Автор: Innuendo 14.2.2006, 19:01

При нажатии на кнопку, должно появится окошечко (див) по центру экрана.
*Пометка: данный код для FireFox*
Я его центрую, и хочу высветить, но когда див ещё не высвечен, то его координаты не меняются.. То есть получается, я сначала его показываю, а потом двигаю.. и вот это движение, как раз то и видно (как он с края экрана в центр быстро двинулся):

Код


var ourDiv = document.getElementById(id);
ourDiv.style.display="";
var width= ourDiv.offsetWidth;
var height = ourDiv.offsetHeight;
var left = parseInt((innerWidth/2) - (width/2));
var top = parseInt((innerHeight/2) - (height/2));
ourDiv.style.left = left;
ourDiv.style.top = top;

это фрагмент кода.

Как сделать, чтоб он сначала его расположил, а потом показал?

Автор: 12345c 14.2.2006, 19:10

Да, такое наблюдается.

setTimeout('ourDiv.style.display="";',99);

Автор: Innuendo 14.2.2006, 20:04

а я вот не много не понимаю...
что это даст?
то есть изменит размеры, и после 99 милисекунд только покажет? а почему оно будет работать? а то нет smile

и я вот всё не могу найти различие в setInterval и setTimeout

Автор: Alx 14.2.2006, 21:42

Innuendo,
Как я понимаю, Мозилла не работает с объектами, у которых display:none;. Даже с нульфреймами из-за этого глюки.
советую использовать visibility:hidden;, тем более, что див абсолютно позиционированный и на расположение элементов на странице это не повлияет.
так же можешь попробывать height и width = 0.

что касается setTimeout() и setInterval(), то различаются они тем, что setTimeout("{expression}",{time}) создаёт паузу на время в {time} миллисекунд, после которой выполняется {expression}.

var interval = setInterval("{expression}",{time}) создает счетчик, который выполняет одно и то же {expression} через каждые {time} миллисекунд и возвращает свой идентификатор, с помощью которого его можно будет удалить через метод clearInterval({interval})

вот те какой красивый пример сделал smile

открой через IE ;)

Код


<script>
interval = false;

function whats_interval()
{    if (window.interval)
    {    clearInterval(window.interval);
        document.getElementById("but").value = " старт "; window.interval = false;
    }
    else
    {    window.interval = setInterval("document.body.innerHTML+='&nbsp;[B]&[/B]#9788; &nbsp;'",500);
        document.getElementById("but").value = " стоп ";
    }
}
</script>
<body text="yellow" bgcolor="99ccff" style="font-size:30px;">
<input type="button" onclick="whats_interval()" value=" старт " id="but">
<br><br><br><br>
</body>

Автор: Innuendo 14.2.2006, 22:05

Alx, забавно
то есть если у дива position:absolute, то visibility:hidden не влияет на располжение других элементов?
просто я никому z-index не ставил...

Автор: Alx 14.2.2006, 22:17

нет, каэшн) а z-index и не надо)

балин, парсеср кривит smile

чтобы мой скрипт заработал с солнышками, вот так напиши:

window.interval = setInterval("document.body.innerHTML+=' & #9788;  '",500);

тока пробел убери перел #9788, тогда красиво буит, я старался smile

Автор: Innuendo 14.2.2006, 22:34

гы

солнышки рулят smile

+ всем плюсы за помощь smile

Автор: 12345c 15.2.2006, 02:51

Цитата(Innuendo @ 14.2.2006, 20:04

)

а я вот не много не понимаю...
что это даст?
то есть изменит размеры, и после 99 милисекунд только покажет?

Да. СМысл самый очевидный - если с корректным показом есть глюки - делаем показ позже.

Такие нестыковки в событиях - естественное дело для такой сложной системы как DOM. Все браузеры в эволюции проходят через такие мелкие нестыковки, которые надо подчищать техническими задержками. С IE5.0 и onload такое наблюдалось, а прорисовка большой картинки до сих пор запаздывает после её генерации на 0.5-1 с. Года через 2, вот увидишь, эта задержка в FF не понадобится smile

Автор: Sardar 15.2.2006, 12:35

Парни, что то вы мудрите, никто не подумал поставить style.display=... после сдвигания элемента? Как только display станет отличным от none элемент встанет в отрисовку, понадобяться все другие стили, что к этому моменту уже установлены.

Автор: 12345c 15.2.2006, 14:20

Sardar, я подобное делал в "http://forum.vingrad.ru/index.php?showtopic=76142", там "после" не помогло в FF, понадобилась такая же задержка.

Автор: Innuendo 15.2.2006, 14:57

Sardar, конечно пробовал smile

только вот в том-то и проблема.. что у ФФ незя изменять координаты, если style.display равно none

Автор: Sardar 15.2.2006, 15:26

Цитата(Innuendo @ 15.2.2006, 13:57

)

что у ФФ незя изменять координаты, если style.display равно none

В смысле нельзя? Да изменения будут не видны, т.к. слой выкинут из отрисовки. В чём проявляться проблема?

Автор: Innuendo 15.2.2006, 17:36

Sardar,
ну так вот.. я задаю top и left по центру, а потом показываю.. а он изменение top и left не проделает...
он их может проделать только после того, как display= ""

Автор: Sardar 15.2.2006, 18:18

Цитата(Innuendo @ 15.2.2006, 16:36

)

а он изменение top и left не проделает...

Млин ну не мальенкий же, уже долго на форуме, а траблу пояснить не можешь smile

Как понять не работает? По идее вообще слой под мозиллой сдвигаться не должен, т.к. left|top ты указываешь просто число без спецификации едениц, добавь + 'px', поставь display="block" последней строчкой, запусти smile

Автор: Alx 15.2.2006, 19:22

Код


var ourDiv = document.getElementById(obj_id);
var _width= ourDiv.style.width;
var _height = ourDiv.style.height;
var _left = parseInt((screen.width/2) - (_width/2));
var _top = parseInt((screen.height/2) - (_height/2));
ourDiv.style.left = _left + 'px';
ourDiv.style.top = _top + 'px';
ourDiv.style.display="block";

так работает...
offset(Height|Width) перед отображением юзать нельзя, т.к. они равняются "0".

M
Sardar

Добавил +'px', серьёзно, мозилла не будет хавать значения если не указаны еденицы (px, em, ex, pt и т.д.)
Это что бы не было дальше вопросов "по кругу" =)

Автор: Innuendo 15.2.2006, 20:53

Sardar, будем знать про px

Автор: Innuendo 15.2.2006, 22:56

c px не получилось.. оно показывает, но почему-то не совсем центрирует smile

я сделал с вариантом Alx'a... с визибилити.

Спасибо. проблема решена.

Автор: Alx 15.2.2006, 23:20

Innuendo,
пжлст smile