Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как отцентровать динамический DIV (https://javascript.ru/forum/events/46599-kak-otcentrovat-dinamicheskijj-div.html)

Ilya_Nsk 16.04.2014 13:32

Как отцентровать динамический DIV
 
Поиск что-то не дал результата.. может не то искал и не там..
Помогите, пожалуйста.
Есть html-страничка, на ней пустой див c opacity=0, в который JS-скриптом по $(document).ready загружаю из нескольких (кол-во заранее неизвестно, определяю ПХП-скриптом, возвращаю в JS) файлов текст. В цикле c помощью jquery генерирую параграфы и заполняю текстом.
$('#main_div').append('<p id=para_'+i'></p>'); $('#para_'+i).load('file_'+i);

После цикла центрирую див (готовой функцией с просторов инета)
$('main_div').css(..top: ($(window).height-$('#main_div').outerHeight)/2 ..)
и проявляю (animate opacity), но он получается намного ниже чем надо, т.к. после заполнения высота diva равна количеству файлов умноженному на высоту шрифта параграфа из css, а ведь текст из файла может занять не одну строку. Отсюда вопрос, как сделать, что бы div возник, пусть не плавно, но по центру?
p.s. Запускал функцию центровки с задержкой на 3 сек - нормально центрует, но это некрасиво: в углу появляется текст, потом скачет в центр. Похоже, что .load реально не вставляет данные, а только ставит "галочку", вставка происходит при отрисовке.

jsnb 16.04.2014 14:35

$('#main_div').css('top', Math.round(($(window).height()-$('#main_div').outerHeight())/2)+'px' );

Ну и центрировать и отображать div надо уже после того как все данных загрузятся, а это происходит не мгновенно и load запускается асинхронно. Как вариант в каллбек к load прописать нужную функцию. Если делается много load'ов, то либо центрировать после каждой успешной загрузки, но див будет скакать, либо дождаться завершения всех и только потом центрировать и отображать. Синхронизировать можно через промисы или если известно количество load то просто завести счетчик загрузок и выполнять каллбек когда счетчик достигнет нужного значения.

cyber 16.04.2014 23:15

Ilya_Nsk, http://bit.ly/1jLblgR

Ilya_Nsk 17.04.2014 11:02

jsnb,
спасибо! Отлично сработало предложение с применением callback-функции. Т.к. цикл for, то вызвать load с ней в последней итерации не составило труда. (пример функции что бы не замусоривать топик не копипастил целиком, а так, набросал "выдирку" по памяти.. дырявой слегка :) )
а cyberу - НЕ спасибо

jsnb 17.04.2014 13:19

Цитата:

Сообщение от Ilya_Nsk (Сообщение 308059)
Т.к. цикл for, то вызвать load с ней в последней итерации не составило труда.

Это может работать неправильно т.к. никто не гарантирует, что load запущенный на последней итерации и завершится последним. Может предыдущий запрос будет выполняться дольше и к моменту завершения последнего load не все данные подгрузятся, и поэтому центрирование будет расчитано по уже имеющимся данным и при подгрузки других данных див съедет. Лучше всё-таки вешать каллбеки на все load и считать сколько фактически подгрузилось и когда счетчик будет равен общему количеству запросов уже центрировать и выводить див.


Часовой пояс GMT +3, время: 15:34.