Плавающая контентная область сайта.

[trb]

хабракат

[Tvarb]

угу

[Terehoff]

Смотри, мы делали подобное для видеостудии, так как информации мало и нужно донести ее красиво и понятно — vios.

[Terehoff]

И почему минусуем? Я не по теме пишу? Или ссылка не понравилась, я пиарюсь?

[Uratsakidogi]

У вас там ссылка «Наш блог» подчеркнута пунктиром, хотя она, в отличие от остальных, открывается как новая страница, а не изменением текущей. Для таких ссылок принято ставить сплошное подчеркивание.
Для меня, например, было неожиданностью что страница так резко изменилась.)

[Terehoff]

Спасибо, обязательно поправим, только сегодня WP туда залил.

[NULL_byte]

Про ссылку, все правильно сказали. На худой конец, можно поставить значок . А мне идея навигации на Вашем сайте понравилась. Я считаю, что донести красиво и понятно у Вас получилось.

[NULL_byte]

А работы, действительно, не очень.

[DjOnline]

Видеооператоры молодцы, стедикамом пользуются. Не слушайте никаких уродов.

Но ощущение, что кроме стэдикама и бегающего оператора используется мини-вертолёт, это действительно так, или просто оператор быстро бегает?

[body]

«Плавающая контентНая область сайта».
Пропущена буква — исправьте.

[Tvarb]

спасибо поправил

[Markovnin]

у меня есть полосы прокрутки у страницы
ff 3, mac

[Tvarb]

в примере фиксированная высота.
прокрутку по горизонтали убрал.
:)

[rdk]

Фиксированная высота — большой недостаток.

[4ekuct25]

мне понравилось) сделано действительно круто.
Надо только убрать прокрутку)

P.S. можно ссылочку на «оригинал», а то я пропустил видать:(

[Tvarb]

передал под высоту экрана …

[koreec]

в Опере все равно вертикальня прокрутка осталась.

[Tvarb]

Исправил …

[Untit1ed]

присоеденяюсь к тому, чтобы убрать ручную прокрутку. Идея отличная.

[xzander]

я видел такое. проект вроде «ша» назывался. к сожалению, не могу найти ссылку, но там парень еще сделал «навигатор внутри» и вроде как собирался сделать передвижение по странице и с помощью него.

Если кто найдет ссылку, выложите, может там есть что-то что поможет автору топика для дальнейшего

[omfg]

habrahabr.ru/blogs/habra_lynch/43785/

Только сайт в дауне(

[kronos]

Кодировку в мете пропишите, а то у меня крякозябры.

[reaferon]

Посмотреть на Яндекс.Фотках

[ecl]

? отч И

[reaferon]

да

[Tvarb]

спасибо прописал …

[Ashina]

Я думаю не стоит для каждого из сайтов так ухищрятся. Нужно сделать источниковнезависимую программную читалку — подсветку. Ведь читаем мы не только с сайтов но и в акробате ридере. ворде и многих других программах. Так будет намного удобнее. Захотел запустил в акробате, захотел на сайте.

[BisnoyZakat]

Просто очень жуткий баян не в обиду автору… на хабре уже не раз было подобное и больше всего запомнился пост где автор реализовал портфолио подобным методом… по ищите и посмотрите как было сделано…

[tvrbo]

Не подскажете ли ссылки на другие статьи на хабре об этом?

[Tvarb]

я не претендовал на изобретение велосипеда.
в самом вверху упоминается, что по мотивам.

[BisnoyZakat]

А я имел ввиду, что именно на этом сайте это уже было… в более хорошей реализации…

[nicothin]

эх, всеж, ссылку бы…

[kashey]

Все больше и больше думаю что прототип — труп и надо переходить на жквери…

[b_r]

Ошибаетесь
Просто jquery распиарен лучше :)

[snnwolf]

По-моему не имеет значения кто лучше распиарен.
Главное чтобы костюмчик сидел ©

[ecl]

Это вы ошибаетесь, куски кода несравнимо короче, а стабильность отработки евентов лучше. Прототип забыл также как и YUI — сразу же после первой попытки сделать что-то на jq.

[Tvarb]

насколько я знаю, чтобы сделать подобное на prototype нужно еще подключать scriptaculos.

[b_r]

Верно.
А знаете почему? Потому что prototypejs — JavaScript фреймворк, а не библиотека для js-анимации

[BisnoyZakat]

Эти проблемы пораждает алгоритм анимации сделаный автором =) а не jquery =)

[Tvarb]

каюсь, грешен :)

[BisnoyZakat]

=) прощаю тебя сын… чужой сын… XD

[Tvarb]

но я уже исправился :)

[ecl]

порождает не jquery — это атор в момент полета забывает снять евент с блока, а затем снова навесить. Но с другой стороны — напиши он это алгоритм уже не уместится в 4 строчки и публике разбираться будет не охота.

[Tvarb]

сделал остановку

[Tvarb]

сделал остановку

[Parkim]

Думаю под cайтом, сделанным сами знаете кем, Tvarb имел ввиду zhytlobud.com, но забыл указать ссылку

Это для тех кто искал ещё примеры.

[Tvarb]

да :)

[zencd]

Но там концепция побогаче будет *impressed*

Против этой реализации ничего против не имею, дело хорошее :-)

[ookozyrev]

Вот еще один симпатичный пример: iconvention.ru

[j4ck]

>> если честно не знаю, как оно называется у других

Окошко это называется viewport.

[Tvarb]

записал — спасибо.

[denver]

Спасибо, что открываете двери в новые интерфейсы.

[Phaeton]

нечто похожее есть на официальном сайте Сержа Танкяна serjtankian.com/ но там все нагружено намного больше.

[yuretsz]

Там же флеш :)

[Phaeton]

идея лежащая в основе — та же

[romy4]

Допустим, сделали интерфейс с viewport и всё такое. Ваш сайт работает, он индексируется гуглом. Я по запросу нахожу ваш сайт захожу и… ничего не понимаю — где информация, которую я ищу в гугле. Когда у меня нет времени (а чаще так и бывает), когда я не могу потратить минуты на поиск где же спрятана информация — я просто уйду с ресурса. Есть ли решение этой проблемы с viewport?

[mari4ek]

да есть. вначале сделать версию сайта, которая работает без javascript.
потом на нужные ссылки меню(подменю и т.п) переписать жаваскриптом атрибут href на нужный (типа #aboutus_history) и поставить события перемещения вьюпорта. так же надо не забыть, что пользователь может получить ссылку, поэтому при загрузке страница должна востанавливать состояние согласно ссылке (хэшу в ссылке).

[zencd]

То что вы описали — это, считаю, нужно и полезно, но я по другому понял вопрос romy4'а.

Вот нашёл я в гугле этот сайт по запросу «британские учёные». Открываю страницу, ищу (глазами либо по ctrl+f) желанное… и не нахожу. А должно быть. По крайней мере когда приходишь из поисковика — это обоснованное ожидание.

Вот если бы поисковики использовали #aboutus_history в выдаче… Тады да.

[mari4ek]

если *пользователь* у которого есть javascript пришел с поисковика на /aboutus/history/ не вижу проблем выдавать ему соответствующий раздел и дописывать #aboutus_history. тогда вы найдете все что вам надо.
вообщем все предусмотрено…
+ afaik можно и без хэшей это реализовать… просто /vacancies/hr/kiev ссылки и на них соотв. события…

[zencd]

Т. е. вы предлагаете держать две копии страниц на сайте?
Одну для поисковиков и людей пришедших с поисковиков:

/section/

И одну для красивого

[zencd]

---сорвалось---

Т. е. вы предлагаете держать две копии страниц на сайте?
Одну для поисковиков и людей пришедших с поисковиков:

site.ru/section/

И одну для красивого представления:

site.ru/#section

Я правильно понял?

Если нет, то распишите какая структура сайта (какие урлы) решит проблему.

[mari4ek]

как Вы понимаете, что для данного сайта весь (или почти весь, т.к. может там что-то XHR будет передаваться) контент будет генерироватся и передаваться пользователю.
поэтому
1) делаем сайт без javascript
2) все что делали в пункте (1) прячем в <noscript>(какой-то общий шаблон) т.о. все довольны (поисковик, пользователи без js и т.п.)

ссылки в меню такие как обычно у вашего сайта, такие как видит поисковик — /section/subsection/ и т.п.

3) и туда же (в тот же шаблон или что там у Вас) вставляем весь остальной контент.

потом пишем жаваскрипт, который
1) подменяет все ссылки(какие ему скажем, читай ниже) на ссылки с решеткой (/link на #link)
2) на элементы меню(подменю) и т.п. (например вещаем событие на все ссылки с каким-то классом) вешает событие — типа scrollTo(div_name) ну или как-то так. div_name можно брать из id ссылки ( ну придумать какой-то соглашение по именам)
+ в этом же событии меням hash часть url. (document.location.hash)?
(замена url приводит к перезагрузке страницы ( товарищи из gmail как-то это побороли, я не смог, поэтому мучался с #part_of_url)

далее реализовываем восстановление состояния. т.е. если кто-то пришел с ссылки с #link, обновил страницу или пришел с поисковика по сслыке без #. делается аналогично, с учетом соглашения имен на пункты меню, дивы и т.п.

вот где-то так.
еще у меня там были динамически подгружаемые части (новости и т.п., чтоб размер подгруждаемой страницы не был катастрофически большим), но это реализовывалось приблизительно так же…
сейчас этот сайт на последней стадии разработки. pm мне и я его покажу…

и конкретно по урл:
были в меню ссылки site.ru/section/, а я их делаю site.ru/#section при загрузке страницы…

[Tvarb]

как я думаю можно сделать так

Тест 1

всместо # ставим ссылку на отдельную страницу с контентом этого блока.

соотвественно она будет проиндексирована и в поиске покажется отдельно.
Остается только привязать это к какой либо CMS.

[Tvarb]

Сорри вот код

<li><a href="#" id="go" onclick="return moveTo('wp_01', 'big');">Тест 1</a></li>

* This source code was highlighted with Source Code Highlighter.

[zencd]

Пока могу предложить
— анализ HTTP referer'а,
— поиск этих слов из гуглозапроса по странице,
— автоматический скролл к нужной подстранице.

:-)

[mari4ek]

тоже делали такое, только в отличии от приведенных примеров, мы делали сохранение состояние сайта, т.е. ссылка, которую можно дать другу и т.п. обновить и т.п. (дописывалась #pagename ну и т.п.)

[deerua]

вау, круто, найс!
для полноты кайфа, делайте архив со всем содержимым ;)

[kellas]

далаю сейчас нечто похожее k-libry.ru/levsha/ (в ie6 пока не пашет)

ваш вариант тоже понравился, но мне кажется с полосами прокрутки лучше, в некоторых случаях, пользователю это помогает ориентироваться где-он, конечно это зависит от преследуемых целей.

[y0ga]

прокрутка зло — когда проскролил содержание, скролиться начинает страница.

нехватает ссылки в разделах на начало страницы, перешёл в начало только по клику на лого )

[Rchernovol]

Пусть я ламер в программировании и т.д., но, Автор, мегакруто, как для меня! ))

[theKitich]

очень интересно. когда-то сам о чем-то таком думал, но руки не дошли. А теперь надо будет поиграться на досуге :)

спасибо

[kritsky]

+1 автору, вещь хорошую выложил. Мы скрипт тут обсуждаем, а не сайт автора (к слову) ;-)

[jAx]

В осле7, нажав на текстовой блок — его можно перетащить, таким же способом. Так и было задумано? :)

За скрипт спасибо — в избранное.

[annsar_012]

в хроме заметно тормозит