VPF::Интерактивность загрузки - Форум программистов

PARROT

Дата 17.4.2005, 20:16 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Здравствуйте!
Сегодня нашла интересный сайт (это не реклама!) http://www.danger.xost.ru/shop.htm
Я такого не видела никогда!
В написании сайта использован интересный эффект загрузки страниц, какая-то интерактивность что ли. Очень хотелось узнать, как этого добиться и если можно пример с объяснением.
Спасибо!

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 17.4.2005, 20:46 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Мне траффик жалко, т.к. после 1 минуты сайт не загрузился и на половину. Точнее весь контент был виден - но шла загрузка. За то время, что я там был - не увидил динамичноти. Где она там и в чем выражается?

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 17.4.2005, 20:53 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Динамическая смена содержимого страницы. То есть одна страница еще не ушла, а вторая уже подгружается, при клике на ссылку, не происходит перезагрузки страницы, нет белого содержимого окна.
У меня быстро грузится, правда выделенка.
Вы считаете что не стоит использовать (что это фильтр или что.....)?
Мне просто понравился как вариант.

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 17.4.2005, 21:20 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Ты уверена что это некая вещь? Мне так не кажется smile

У меня 90% страниц грузятся мгновенно

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 18.4.2005, 07:16 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Уверена! У меня руки не доходят посмотреть код.

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Sardar

Дата 18.4.2005, 16:29 (ссылка)

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

Загрузка ...

Бегун

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

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

PARROT обычный сайт, глянул в код, никакой "интерактивной загрузки" не увидел...
Если в этом топе не "всплывёт мысль", то кину в мусорку.

Что бы сделать простейшую "интерактивную загрузку", достаточно сделать не видимый фрейм, во всех ссылках target на этот фрейм, после закачки документа он сам вставляет себя в топовое окно в нужном месте. Вопрос: а зачем этот изврат? smile

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

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

PARROT

Дата 18.4.2005, 17:01 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Всплывет?
Как сделать загрузку страниц <div>-ами?
Кликаешь на ссылку появляется слой, потом другой.... и т. д.
Я может не правильно выражаюсь. Но 2 программера увидив этот сайт, сказал написать разработчику и спросить как он этого добился. У меня не глюки. Я вижу разницу загрузки или подгрузки вызываемых кликом страниц.

Если есть такое желание.... можно сделать офтоп (я не обижусь smile

).

Но тогда собака останется зарытой...

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 18.4.2005, 17:07 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Цитата(PARROT @ 18.4.2005, 18:01)

Кликаешь на ссылку появляется слой, потом другой.... и т. д.

Легко. Меняя из видимость, отображение или наложения. Но зачем так извращаться?
Проще уж XMLHTTPRequest юзать smile

Это сообщение отредактировал(а) Aliance - 18.4.2005, 17:10

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 18.4.2005, 20:47 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Цитата(Aliance @ 18.4.2005, 17:07)

Но зачем так извращаться?

Зачем? Тут просто объяснить, все новое всегда интересно. Пусть не придется этим воспользоваться, так хоть знать как это делается. Можно пример? Пожалуйста!
Спасибо!

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 18.4.2005, 21:35 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Если слои - то это не новое. Если второе - то это уже не изврат ) это канечно мощно, но не все еще готовы принять эту мощь. не все еще доросли (я о стандартах, браузерах) так что не думаю что стоит главные вещи делать с этой помощью, т.к. оперу ты фактически всю тогда отрезаешь.
А через лои - тут просто - в onclike передаем какой-либо функцией в аргументе id слоя, и изменяем его видимость (display: none|block). Если возникнут с этим проблемы - создавай новый топик - объясним smile

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 18.4.2005, 22:11 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Давайте начнем с простого, а закончим новым.
Для вороны- все золото, что блестит,а для меня все новое - все надо.
На самом деле я со слоями мало работала. Пару картинок делала всего. И то плохо помню.

С чего начать? Что сделать? smile

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 18.4.2005, 22:19 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Я бы мог бы сразу код кинуть - но это примитивно smile

Попробуем тебя все втолковать, чтобы сама поняла.
Давай вместе составлять алгоритм действия. Я его фактически описал - попробуй ты его систиматизировать и запости smile

Далее будем делать и я буду комментировать каждый пункт 8)

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 18.4.2005, 22:34 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

1. Создать основную страницу в которую будут подгружаться слои. (пускай их будет пока 2, чтобы не запутаться!)
2. Создать сами 2 слоя, сразу с одинаковыми координатами (это середина будет, есдинственное, с чем я столкнулась, что при разных разрешениях слои прыгают, а вот как этого избежать незнаю!)
Созданием займусь завтра. Жду комментарий. smile

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 18.4.2005, 22:49 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Цитата(PARROT @ 18.4.2005, 23:34)

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

А зачем использовать позиционирование? Можно вложенность smile

А если уж так хочеться - то задавать в процентах smile

Вот сам код:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Скрыть/показать слои</TITLE>
<script type="text/javascript" language="JavaScript">
<!--
// тут id - индификатор слоя с нужным контентом
// передается аргументом в inline обработчике
// должен быть обрамлен в кавычки (у меня в одинарные '')
function navigate(id) {
// ссылка на сам слой, в кот. будем грузить контент
var content = document.getElementById('block');
// ссылка на контент для последующего чтения его innerHTML
var elem = document.getElementById(id);
// собсна подстановка самого контента
content.innerHTML = elem.innerHTML;
}
// -->
</SCRIPT>
</HEAD>

<BODY>

тут контент
<p>
<u><div onclick="navigate('qwe')">показать контент <u>слоя</u> №1</div></u>
<BR />
<u><div onclick="navigate('asd')">показать <b>контент</b> слоя №2</div></u>
</p>
тут контент

<p><FIELDSET>

<h2>ниже будет располагаться слой:</h2>

<div id="block">будущий контент слоя</div>

<div id="qwe" style="display: none">контент <b>первого</b> слоя</div>
<div id="asd" style="display: none">контент <u>второго</u> слоя</div>

</FIELDSET></p>

тут контент

</BODY>
</HTML>

Канечно, тут можно пойти тыщами путей. Я решил так. По мере обсуждения будем модифицировать...

Это сообщение отредактировал(а) Aliance - 18.4.2005, 22:53

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 19.4.2005, 00:55 (ссылка)

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

Загрузка ...

Бегун

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

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

Это конечно большё в вёрстку smile

Задай слоям с контентом абсолютное позиционирование и координаты выставь в 0. Затем вложи их в слой с релативной позицией(position: relative), теперь все слои выравненны и прыгать не будут.

Скрываем слои, показываем толко один(можешь как табы сделать). При клике в меню смотрим а существует ли запрашиваемый слой, если нет, то подгружаем через скрытый ифрейм. Сервер выдаст разметку, скриптом достаём и делаем новый слой в родительском окне.

Тут трюк, можно в меню поставить обычные ссылки, которые перезагружают страницу. Также поставить onclick, если JS на клиенте врублен, то перехватываем клик и грузим контент в скрытом фрейме, иначе контент как обычная страница замещает текущую. Можо задать пару параметров на сервер, дабы тот менюшки и прочую лишнюю разметку не генерил.

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

PARROT

Дата 19.4.2005, 13:08 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

С кодом я разобралась, тут http://www.traktora.spb.ru/new/sloy.html можно посмотреть, что получилось. Что делаем дальше? smile

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 19.4.2005, 14:30 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Зависит от твоего желания. Что тебе еще не хватает? Что исправить?

ЗЫ: ведь то, что мы делаем - посути ифрейм...

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 19.4.2005, 14:35 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Хочется добавить фильтры загрузки.
Есть скрипт:

Код


<script>
<!--
function Start() // Функция запуска фильтра. Кнопка Показать.
{
RevealTransFilter.filters.item(0).Apply()
RevealTransFilter.filters.item(0).Play()
RevealTransFilter.style.visibility=""
}
function Clear() // Функция скрытия изображения. Кнопка Сброс.
{
RevealTransFilter.style.visibility="hidden"
}
// -->
</SCRIPT>
<IMG id="RevealTransFilter" STYLE="filter:revealTrans(Duration=1, Transition=12);VISIBILITY: hidden;" SRC="Имя изображения" WIDTH="Ширина изображения" HEIGHT="Высота изображения"><br>
<input type=button value=" Показать " OnClick="Start()">
<input type="reset" value=" Сброс " OnClick="Clear()">

Может он конечно не совсем в тему, но тут похожее на ту таинственную загрузку.
Я не смогла соединить 2 скрипта в один, с загрузкой и фильтром!
Не получилось. smile

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 19.4.2005, 15:09 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Посмотри в прикрепленную тему по фильтрам, может там что найдешь (все не дойдут руки ее дописать smile

)
Добавлено @ 15:10
Если не найдешь - вечерком помогу smile

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 19.4.2005, 15:41 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Я почитаю пока... про фильтры. А вечерка подожду... smile

Спасибо!

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 19.4.2005, 18:48 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Вот сделал, легко добольно. Эффект выбрал свой - т.к. он мне больше нравится smile

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Скрыть/показать слои</TITLE>
<script type="text/javascript" language="JavaScript">
<!--

function navigate(id, times) {
 var content = document.getElementById('block');
 var elem = document.getElementById(id);
 content.innerHTML = elem.innerHTML;

///////////////////////////////////////////////////////

 content.filters[0].apply();

 switch (times) {
  case "first":
    content.style.backgroundColor = "gold";
    break;
  case "second":
    content.style.backgroundColor = "skyblue";
    break;
  default:
    return false;
 }
 content.filters[0].play();

}
// -->
</SCRIPT>
</HEAD>

<BODY>

тут контент
<p>
<u><div onclick="navigate('qwe', 'first')">показать контент <u>слоя</u> №1</div></u>
<BR />
<u><div onclick="navigate('asd', 'second')">показать <b>контент</b> слоя №2</div></u>
</p>
тут контент

<p><FIELDSET>

<h2>ниже будет располагаться слой:</h2>

<div id="block" style="PADDING-RIGHT: 10px; PADDING-LEFT: 13px; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.25,wipestyle=0,motion=forward); FONT: 9pt/1.3 verdana; WIDTH: 305px; COLOR: black; HEIGHT: 150px; BACKGROUND-COLOR: gold">
будущий контент слоя
</div>

<div id="qwe" style="display: none">контент <b>первого</b> слоя</div>
<div id="asd" style="display: none">контент <u>второго</u> слоя</div>

</FIELDSET></p>

тут контент

</BODY>
</HTML>

Естественно, что это работает только в IE (фильтры)

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 19.4.2005, 19:20 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

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

Спасибо! Теперь нужно подумать. Ну все равно, огромное спасибо! Почва для размышления появилась. smile

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

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 19.4.2005, 19:38 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

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

Незачто ;)
Над чем думать? Давай подумаем вместе :о)

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 23.4.2005, 23:09 (ссылка)

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

Загрузка ...

Бегун

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

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

Написал небольшой пример: http://forum.vingrad.ru/index.php?act=ST&f=10&t=49654

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

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