Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 78
хабракат
угу
Смотри, мы делали подобное для видеостудии, так как информации мало и нужно донести ее красиво и понятно — vios.
И почему минусуем? Я не по теме пишу? Или ссылка не понравилась, я пиарюсь?
У вас там ссылка «Наш блог» подчеркнута пунктиром, хотя она, в отличие от остальных, открывается как новая страница, а не изменением текущей. Для таких ссылок принято ставить сплошное подчеркивание.
Для меня, например, было неожиданностью что страница так резко изменилась.)
Для меня, например, было неожиданностью что страница так резко изменилась.)
Видеооператоры молодцы, стедикамом пользуются. Не слушайте никаких уродов.
Но ощущение, что кроме стэдикама и бегающего оператора используется мини-вертолёт, это действительно так, или просто оператор быстро бегает?
Но ощущение, что кроме стэдикама и бегающего оператора используется мини-вертолёт, это действительно так, или просто оператор быстро бегает?
«Плавающая контентНая область сайта».
Пропущена буква — исправьте.
Пропущена буква — исправьте.
у меня есть полосы прокрутки у страницы
ff 3, mac
ff 3, mac
мне понравилось) сделано действительно круто.
Надо только убрать прокрутку)
P.S. можно ссылочку на «оригинал», а то я пропустил видать:(
Надо только убрать прокрутку)
P.S. можно ссылочку на «оригинал», а то я пропустил видать:(
я видел такое. проект вроде «ша» назывался. к сожалению, не могу найти ссылку, но там парень еще сделал «навигатор внутри» и вроде как собирался сделать передвижение по странице и с помощью него.
Если кто найдет ссылку, выложите, может там есть что-то что поможет автору топика для дальнейшего
Если кто найдет ссылку, выложите, может там есть что-то что поможет автору топика для дальнейшего
Кодировку в мете пропишите, а то у меня крякозябры.
Я думаю не стоит для каждого из сайтов так ухищрятся. Нужно сделать источниковнезависимую программную читалку — подсветку. Ведь читаем мы не только с сайтов но и в акробате ридере. ворде и многих других программах. Так будет намного удобнее. Захотел запустил в акробате, захотел на сайте.
Просто очень жуткий баян не в обиду автору… на хабре уже не раз было подобное и больше всего запомнился пост где автор реализовал портфолио подобным методом… по ищите и посмотрите как было сделано…
Все больше и больше думаю что прототип — труп и надо переходить на жквери…
Ошибаетесь
Просто jquery распиарен лучше :)
Просто jquery распиарен лучше :)
По-моему не имеет значения кто лучше распиарен.
Главное чтобы костюмчик сидел ©
Главное чтобы костюмчик сидел ©
Это вы ошибаетесь, куски кода несравнимо короче, а стабильность отработки евентов лучше. Прототип забыл также как и YUI — сразу же после первой попытки сделать что-то на jq.
насколько я знаю, чтобы сделать подобное на prototype нужно еще подключать scriptaculos.
Эти проблемы пораждает алгоритм анимации сделаный автором =) а не jquery =)
порождает не jquery — это атор в момент полета забывает снять евент с блока, а затем снова навесить. Но с другой стороны — напиши он это алгоритм уже не уместится в 4 строчки и публике разбираться будет не охота.
сделал остановку
сделал остановку
Думаю под cайтом, сделанным сами знаете кем, Tvarb имел ввиду zhytlobud.com, но забыл указать ссылку
Это для тех кто искал ещё примеры.
Это для тех кто искал ещё примеры.
Вот еще один симпатичный пример: iconvention.ru
>> если честно не знаю, как оно называется у других
Окошко это называется viewport.
Окошко это называется viewport.
Спасибо, что открываете двери в новые интерфейсы.
нечто похожее есть на официальном сайте Сержа Танкяна serjtankian.com/ но там все нагружено намного больше.
Допустим, сделали интерфейс с viewport и всё такое. Ваш сайт работает, он индексируется гуглом. Я по запросу нахожу ваш сайт захожу и… ничего не понимаю — где информация, которую я ищу в гугле. Когда у меня нет времени (а чаще так и бывает), когда я не могу потратить минуты на поиск где же спрятана информация — я просто уйду с ресурса. Есть ли решение этой проблемы с viewport?
да есть. вначале сделать версию сайта, которая работает без javascript.
потом на нужные ссылки меню(подменю и т.п) переписать жаваскриптом атрибут href на нужный (типа #aboutus_history) и поставить события перемещения вьюпорта. так же надо не забыть, что пользователь может получить ссылку, поэтому при загрузке страница должна востанавливать состояние согласно ссылке (хэшу в ссылке).
потом на нужные ссылки меню(подменю и т.п) переписать жаваскриптом атрибут href на нужный (типа #aboutus_history) и поставить события перемещения вьюпорта. так же надо не забыть, что пользователь может получить ссылку, поэтому при загрузке страница должна востанавливать состояние согласно ссылке (хэшу в ссылке).
То что вы описали — это, считаю, нужно и полезно, но я по другому понял вопрос romy4'а.
Вот нашёл я в гугле этот сайт по запросу «британские учёные». Открываю страницу, ищу (глазами либо по ctrl+f) желанное… и не нахожу. А должно быть. По крайней мере когда приходишь из поисковика — это обоснованное ожидание.
Вот если бы поисковики использовали #aboutus_history в выдаче… Тады да.
Вот нашёл я в гугле этот сайт по запросу «британские учёные». Открываю страницу, ищу (глазами либо по ctrl+f) желанное… и не нахожу. А должно быть. По крайней мере когда приходишь из поисковика — это обоснованное ожидание.
Вот если бы поисковики использовали #aboutus_history в выдаче… Тады да.
если *пользователь* у которого есть javascript пришел с поисковика на /aboutus/history/ не вижу проблем выдавать ему соответствующий раздел и дописывать #aboutus_history. тогда вы найдете все что вам надо.
вообщем все предусмотрено…
+ afaik можно и без хэшей это реализовать… просто /vacancies/hr/kiev ссылки и на них соотв. события…
вообщем все предусмотрено…
+ afaik можно и без хэшей это реализовать… просто /vacancies/hr/kiev ссылки и на них соотв. события…
Т. е. вы предлагаете держать две копии страниц на сайте?
Одну для поисковиков и людей пришедших с поисковиков:
/section/
И одну для красивого
Одну для поисковиков и людей пришедших с поисковиков:
/section/
И одну для красивого
---сорвалось---
Т. е. вы предлагаете держать две копии страниц на сайте?
Одну для поисковиков и людей пришедших с поисковиков:
site.ru/section/
И одну для красивого представления:
site.ru/#section
Я правильно понял?
Если нет, то распишите какая структура сайта (какие урлы) решит проблему.
Т. е. вы предлагаете держать две копии страниц на сайте?
Одну для поисковиков и людей пришедших с поисковиков:
site.ru/section/
И одну для красивого представления:
site.ru/#section
Я правильно понял?
Если нет, то распишите какая структура сайта (какие урлы) решит проблему.
как Вы понимаете, что для данного сайта весь (или почти весь, т.к. может там что-то 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 при загрузке страницы…
поэтому
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 при загрузке страницы…
как я думаю можно сделать так
Тест 1
всместо # ставим ссылку на отдельную страницу с контентом этого блока.
соотвественно она будет проиндексирована и в поиске покажется отдельно.
Остается только привязать это к какой либо CMS.
Тест 1
всместо # ставим ссылку на отдельную страницу с контентом этого блока.
соотвественно она будет проиндексирована и в поиске покажется отдельно.
Остается только привязать это к какой либо CMS.
Сорри вот код
<li><a href="#" id="go" onclick="return moveTo('wp_01', 'big');">Тест 1</a></li>
* This source code was highlighted with Source Code Highlighter.Пока могу предложить
— анализ HTTP referer'а,
— поиск этих слов из гуглозапроса по странице,
— автоматический скролл к нужной подстранице.
:-)
— анализ HTTP referer'а,
— поиск этих слов из гуглозапроса по странице,
— автоматический скролл к нужной подстранице.
:-)
тоже делали такое, только в отличии от приведенных примеров, мы делали сохранение состояние сайта, т.е. ссылка, которую можно дать другу и т.п. обновить и т.п. (дописывалась #pagename ну и т.п.)
вау, круто, найс!
для полноты кайфа, делайте архив со всем содержимым ;)
для полноты кайфа, делайте архив со всем содержимым ;)
далаю сейчас нечто похожее k-libry.ru/levsha/ (в ie6 пока не пашет)
ваш вариант тоже понравился, но мне кажется с полосами прокрутки лучше, в некоторых случаях, пользователю это помогает ориентироваться где-он, конечно это зависит от преследуемых целей.
ваш вариант тоже понравился, но мне кажется с полосами прокрутки лучше, в некоторых случаях, пользователю это помогает ориентироваться где-он, конечно это зависит от преследуемых целей.
Пусть я ламер в программировании и т.д., но, Автор, мегакруто, как для меня! ))
очень интересно. когда-то сам о чем-то таком думал, но руки не дошли. А теперь надо будет поиграться на досуге :)
спасибо
спасибо
+1 автору, вещь хорошую выложил. Мы скрипт тут обсуждаем, а не сайт автора (к слову) ;-)
В осле7, нажав на текстовой блок — его можно перетащить, таким же способом. Так и было задумано? :)
За скрипт спасибо — в избранное.
За скрипт спасибо — в избранное.
в хроме заметно тормозит
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Плавающая контентная область сайта.