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

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

Форум программистов > JavaScript: Общие вопросы > Данные появляющиеся после их загрузки.

Автор: dolci2006 15.6.2009, 16:37

Даные должгы появляться между 2х объектах (Шапкой и основанием сайта(footer)). и они должны появляться с запазданием, чтоб появлялся эфект анимации. т.е. чтоб не появлялась не вся страница а только те элементы которые заключены между шапкой и основанием.

Автор: Astraller 15.6.2009, 16:39

А теперь еще раз, подробнее, и с примером кода smile

Автор: ksnk 15.6.2009, 16:50

dolci2006, поставить поверх данных, между хидером и футером непрозрачный "экран". по окончании загрузки страницы этот экран неторопливо делаем прозрачным и убираем совсем...

Автор: dolci2006 15.6.2009, 17:30

с непрозрачным экраном неполучится... вся задумка в том что "footer" заполняет все свободное пространство. и если туда засунить тексты то он съежает вниз. т.е должен получиться эфект анимации.

user posted image

Автор: dolci2006 15.6.2009, 19:56

Автор: Astraller 15.6.2009, 20:30

Собственно, если я правильно понял что вы хотите, то, то что вы хотите вы не получите. smile

Если даже вставить контент в середину страницы JavaScript'ом с запозданием, например, в 1 сек, то средняя часть увеличится скачком. Никакого плавного эффекта не получится.

Даже если разбить содержимое по строкам и вставлять так, все равно будут скачки smile

Единственный вариант, это:
* содержимое поместить в скрытый (visibility:hidden) элемент
* определить его высоту
* плавно увеличить высоту блока куда будете вставлять контент
* вставить в этот блок контент

Автор: dolci2006 15.6.2009, 21:27

спасибо.. только как это реализовать?

Добавлено через 4 минуты и 35 секунд
Я видел эфекты всплывающего горизонтального меню.. и всплывать оно начинает после функции клик или наведение. Можно использовать тотже код но, используя ф-цию загрузка данных. т.е проиходит все после того как сайт полность загрузиться(загрузка с сервера данных прекратиться и начинает появляться)

Автор: Astraller 15.6.2009, 21:33

Цитата(dolci2006 @ 15.6.2009, 21:27

)

спасибо.. только как это реализовать?

Именно так как я написал.

А если вам нужен готовый, рабочий код, то вам не сюда, а на биржу труда. smile

Здесь дают подсказки, а там решения, но за деньги. smile

Автор: dolci2006 15.6.2009, 21:38

мне самое главное узнать как можно отследить загружена ли страница или нет. после чего я буду использовать динамическое изменение высоты блока..

Автор: Astraller 15.6.2009, 21:55

Цитата(dolci2006 @ 15.6.2009, 21:38

)

мне самое главное узнать как можно отследить загружена ли страница или нет

Есть событие window.onload.

Автор: Aliance 16.6.2009, 08:36

Используя библиотеку jQuery можно сделать так:

Код


...
<div id='main' style='visibility: hidden;'>
main content...
</div>
...

Код


$( function()
    {
        $( '#main' ).fadeIn( 'slow' );
    }
);

Автор: WIPS 16.6.2009, 10:13

Aliance, я так понимаю, что dolci2006 больше подойдет не fadeIn, a http://docs.jquery.com/Effects/slideDown#speedcallback.

Автор: dolci2006 16.6.2009, 11:04

Цитата(WIPS @ 16.6.2009, 10:13)

Aliance, я так понимаю, что dolci2006 больше подойдет не fadeIn, a http://docs.jquery.com/Effects/slideDown#speedcallback.

да да. оно и есть.
вопрос довольно глупый.. как привизать выполнение этой операции к определеному <DIV>

Автор: WIPS 16.6.2009, 11:43

Цитата(dolci2006 @ 16.6.2009, 10:04

)

как привизать выполнение этой операции к определеному <DIV>

Курим ман по http://docs.jquery.com/Effects/slideDown#speedcallback, для выбора нужного дива читаем опять же http://docs.jquery.com/Selectors.

Будет что-то типа:

Код


$('#your_div_id').slideDown("slow");

Ну и естественно саму библиотеку jQuery подключить надо.

Автор: dolci2006 16.6.2009, 13:42

Да, спасибо все получилось... неработало т.к я забыл знак "#" поставить.. smile

стыдно блин((((

Итого получился такой код(Вдруг кому полезно будет.):

Закидываем этот код в тег <head></head>

Код


<script src="http://code.jquery.com/jquery-latest.js"></script>    -Подключаем библиотеку jQuery
  <script>
  $(document).ready(function(){
    
    $(document.body).click(function () {
      if ($('#main').is(":hidden")) {
        $('#main').slideDown("slow");     - Выбираем скорость развертывания("slow", "normal", "fast")
      } else {
        $('#main').hide();
      }
    });

  });
  </script>

Присваиваем "ID=main" к элементу страницы и присваиваем стиль этого элемента "display:none;"

Код


<div id="main" style="display:none;">
    бла бла бал бла бал<br>
    бла бла бал бла бал<br>
    бла бла бал бла бал<br><br>
</div>

Добавлено @ 13:47
window.onload. неполучается приписать эту функцию.
поидеи она должна идти гдето сдесь:
$(document.body).click(function (). кото знает подскажите

Автор: WIPS 16.6.2009, 14:23

Цитата(dolci2006 @ 16.6.2009, 12:42

)

Закидываем этот код в тег <title></title>

это код должен быть в <head>

Цитата(dolci2006 @ 16.6.2009, 12:42

)

window.onload. неполучается приписать эту функцию

попробуй так

Код


<body onload="your_function()"></body>

или так

Код


<body onclick="your_function()"></body>

хотя onclick на весь body это как-то жестко

Автор: dolci2006 16.6.2009, 15:21

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

Код


 if ($('#main').is(":hidden")) {
        $('#main').slideDown("slow");
      } else {
        $('#main').hide();
      }

Автор: Aliance 16.6.2009, 16:08

в head кидаешь следующий код:

Код


$( function()
    {
        if ($('#main').is(":hidden"))
        {
            $('#main').slideDown("slow");
        }
        else
        {
            $('#main').hide();
        }
    }
);

но непонятно зачем ты проверяешь не скрыт ли элемент, если он скрыт? ИМХО, достаточно просто строки:

Код


$( function()
    {
        $('#main').slideDown("slow");
    }
);

Добавлено через 2 минуты и 2 секунды
Кстати, при таком решении, пользователи, у который JS будет отключен, будут нервно курить в сторонке)

Автор: ksnk 16.6.2009, 16:21

Aliance, Чтобы вредные юзеры, отключившие JS, курили со всеми в общей курилке, нужно "скрывать" #main тем-же JavaScript'ом.
К примеру, вставив в самое начало скрипта (в head) чего-то такое

Код


<script> document.write('<'+'style> #main { display:none} <'+'/style>') </script>

P.S. Исправил опечатки...

Автор: dolci2006 16.6.2009, 16:57

У меня получилось примерно так:

Код


<script>
  $(window.onload).ready(function(){     
        $('#slide').slideDown("slow"); 
  });
  </script>

Вопрос: проверяет ли window.onload загружены ли все картинки. и как сделать задержку а 1.5 секунды перед выполнением операции.

Автор: dolci2006 16.6.2009, 18:40

.setInterval попробывал эту функцию. наверно гдето ошибка т.к. неработает.

Код


<script>
      setTimeGou=window.setInterval("f1()", 1000);

    function f1()  
{
    $(document.body).click(function () {
      if ($('#main').is(":hidden")) {
        $('#main').slideDown("slow");
      } else {
        $('#main').hide();
      }
    
}
  
  </script>

Автор: ksnk 16.6.2009, 18:52

Программирование методом научного тыка?

Автор: dolci2006 16.6.2009, 19:03

Частично - ДА. JS я не знаю. все это я делаю по осходникам.. поэтому и пишу сдесь..

Автор: Aliance 17.6.2009, 09:27

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

dolci2006, попробуй так:

Код


<script>
function onloadAndTimeoutFunction()
{
    $('#slide').slideDown("slow");
}
$( function()
    {
        setTimeout( 'onloadAndTimeoutFunction()', 1000  );
    }
);
</script>