Тайтл 2.0

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

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

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

Кто возьмётся реализовать?

Подписаться на блог
Поделиться
Отправить
Дальше
11 комментариев
Артем 2007

А как это будут индексировать поисковые системы?

Илья Бирман 2007

Так же, как и раньше. В теге title оставляем, например, тайтл самой верхней заметки.

artreal 2007

!!А как это будут индексировать поисковые системы? !!

Они такое извращение и не будут индексировать... у них бритва Оккама есть ;)

Ramon 2007

Ну вот, например, отправная точка. У тегов [p] прописывается атрибут title, который будет выскакивать в качестве нового заголовка окна. Работает в Опере, в ослике — нет (FF у меня не стоит).
%%document.onscroll = function() {
var ps = document.getElementsByTagName(«p»);
for (var i = 0; i < ps.length; i++) {
var p = ps.item(i);
if (pageYOffset >= p.offsetTop && pageYOffset <= p.offsetTop + p.offsetHeight)
document.title = p.getAttribute(«title»);
}
}%%

Юрко 2007

А document.title разве не read-only? В любом случае бесполезная вещь, которая может помочь, если у меня открыто несколько однотипных страниц одного и того же блога. У меня такого не бывает — в табы попадают новые страницы со своим заголовком.

Ramon 2007

Re Юрко: document.title не read-only. Можно, конечно, использовать document.getElementsByTagName(«title»)[0], но эта конструкция падает (sic!) IE на 5+.

Kimosabe 2007

Многие слишком боятся поисковиков чтобы такое реализовывать.

Илья Бирман 2007

А поисковикам-то что?

Алексас 2007

Хорошая идея, думаю что реализация не заставит себя долго ждать.

Сергей 2007

Мне это напоминает идеи делать несколько колонок через таблицы, кнопки через ссылки, ссылки через посторонние теги и onclick и т. п. Это называется использовать элементы не по назначению. Есть веб-страница, и у неё есть название. Менять его динамически только для того, чтобы поменялось название окошка в браузере — семантическая ошибка.

В то же время не могу оспорить прикольность и удобство фишки. Меняться должно не название документа, а заголовок окна или вкладки браузера. То есть эту возможность по-хорошему должен обеспечивать браузер. Надо только договориться о стандарте (теги h подойдут).

В предыдущих версиях браузера Браузер (бывш. Epiphany) в Линуксе стандартная иконка браузера менялась на иконку текущего сайта. Было очень удобно. Теперь вроде бы не меняется.

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

Илья Бирман 2007

Семантика HTML-документа не страдает: в теге остаётся один-единственный тайтл. А дальше — существует механизм изменения заголовка браузера через ##document.title = ’Ла-ла-ла’## — ну и относитесь к этому как в механизму изменения заголовка браузера. Поисковики-то ничего не заподозрят :-)</p> </div> </div> </div> </div> </div> <div class="e2-comment-and-reply"> <div class=""> <div class="e2-comment"> <div class="e2-comment-userpic-area"> <div class="e2-comment-userpic-area-inner"> <div class="e2-comment-userpic-area-inner-placeholder"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle fill="none" cx="20" cy="20" r="19.5"/><path stroke="none" d="M33.009 33.775l-.66-.327c-1.905-.544-3.805-1.104-5.715-1.627-2.121-.58-2.958-1.511-2.557-3.646.349-1.86 1.183-3.627 1.766-5.447.403-1.259 1.265-2.668.989-3.778-.398-1.603-.046-3.015.045-4.518.123-2.023-.255-3.987-2.162-5.055C23.196 8.529 21.61 7.984 20 8c-1.61-.016-3.196.528-4.714 1.378-1.907 1.068-2.285 3.032-2.162 5.055.091 1.503.443 2.914.045 4.518-.276 1.11.586 2.519.989 3.778.583 1.82 1.417 3.586 1.766 5.447.401 2.134-.436 3.066-2.557 3.646-1.911.522-3.811 1.083-5.715 1.627l-.66.327-.295 1.254C9.24 37.341 13.461 40 20 40s10.76-2.659 13.304-4.971l-.295-1.254z"/></svg></div> </div> </div> <div class="e2-comment-content-area"><span class="e2-comment-author e2-comment-piece-markable "><span>Денис Талала</span></span> <span class="e2-comment-date" title="19 ноября 2007, 17:27, GMT+03:00"> 2007 </span> <div class="e2-comment-content e2-text"> <p>Запатентовали что ли?..</p> </div> </div> </div> </div> </div> <div class="e2-comment-and-reply"> <div class=""> <div class="e2-comment"> <div class="e2-comment-userpic-area"> <div class="e2-comment-userpic-area-inner"> <div class="e2-comment-userpic-area-inner-placeholder"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle fill="none" cx="20" cy="20" r="19.5"/><path stroke="none" d="M33.009 33.775l-.66-.327c-1.905-.544-3.805-1.104-5.715-1.627-2.121-.58-2.958-1.511-2.557-3.646.349-1.86 1.183-3.627 1.766-5.447.403-1.259 1.265-2.668.989-3.778-.398-1.603-.046-3.015.045-4.518.123-2.023-.255-3.987-2.162-5.055C23.196 8.529 21.61 7.984 20 8c-1.61-.016-3.196.528-4.714 1.378-1.907 1.068-2.285 3.032-2.162 5.055.091 1.503.443 2.914.045 4.518-.276 1.11.586 2.519.989 3.778.583 1.82 1.417 3.586 1.766 5.447.401 2.134-.436 3.066-2.557 3.646-1.911.522-3.811 1.083-5.715 1.627l-.66.327-.295 1.254C9.24 37.341 13.461 40 20 40s10.76-2.659 13.304-4.971l-.295-1.254z"/></svg></div> </div> </div> <div class="e2-comment-content-area"><span class="e2-comment-author e2-comment-piece-markable "><span>Alisey</span></span> <span class="e2-comment-date" title="19 ноября 2007, 22:42, GMT+03:00"> 2007 </span> <div class="e2-comment-content e2-text"> <p>Для начала можно написать<br /> Тайтл 2.0 | The Menawhile...<br /> Это очень даже семантично.</p> </div> </div> </div> </div> </div> <div class="e2-comment-and-reply"> <div class=""> <div class="e2-comment"> <div class="e2-comment-userpic-area"> <div class="e2-comment-userpic-area-inner"> <div class="e2-comment-userpic-area-inner-placeholder"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle fill="none" cx="20" cy="20" r="19.5"/><path stroke="none" d="M33.009 33.775l-.66-.327c-1.905-.544-3.805-1.104-5.715-1.627-2.121-.58-2.958-1.511-2.557-3.646.349-1.86 1.183-3.627 1.766-5.447.403-1.259 1.265-2.668.989-3.778-.398-1.603-.046-3.015.045-4.518.123-2.023-.255-3.987-2.162-5.055C23.196 8.529 21.61 7.984 20 8c-1.61-.016-3.196.528-4.714 1.378-1.907 1.068-2.285 3.032-2.162 5.055.091 1.503.443 2.914.045 4.518-.276 1.11.586 2.519.989 3.778.583 1.82 1.417 3.586 1.766 5.447.401 2.134-.436 3.066-2.557 3.646-1.911.522-3.811 1.083-5.715 1.627l-.66.327-.295 1.254C9.24 37.341 13.461 40 20 40s10.76-2.659 13.304-4.971l-.295-1.254z"/></svg></div> </div> </div> <div class="e2-comment-content-area"><span class="e2-comment-author e2-comment-piece-markable "><span>Юрко</span></span> <span class="e2-comment-date" title="20 ноября 2007, 13:53, GMT+03:00"> 2007 </span> <div class="e2-comment-content e2-text"> <blockquote> <p>Alisey</p> </blockquote> <p>Кстати да, Илья. И слово «комментарии» в заголовке не нужно.</p> </div> </div> </div> <div class="e2-comment e2-reply"> <div class="e2-comment-userpic-area"> <div class="e2-comment-userpic-area-inner"> <img src="https://ilyabirman.ru/meanwhile/pictures/userpic/userpic@2x.jpg?1573933764" class="e2-comment-userpic-area-inner__img" alt="" /> </div> </div> <div class="e2-comment-content-area"> <span class="e2-comment-author e2-comment-piece-markable ">Илья Бирман</span> <span class="e2-comment-date" title="20 ноября 2007, 14:00, GMT+03:00"> 2007 </span> <div class="e2-comment-content e2-text" > <p>Не недо меня на моём сайте учить делать мой сайт. Я прекрасно знаю обо всех его недостатках и даже готов мириться с их наличием :-)</p> </div> </div> </div> </div> </div> </div> <style> .b-subnote-banners { font-size: 15px; line-height: 20px; margin-bottom: 24px; } .b-subnote-banner { float: left; padding-right: 2em; margin-bottom: 12px; white-space: nowrap; } .b-subnote-banner-image { float: left; } .b-subnote-banner-image a { display: block; padding-right: .67em; } .b-subnote-banner-image img { display: block; } .b-subnote-banner p { display: inline; } </style> <div class="e2-section-heading">Мои книги</div> </div> <div> <div class="b-editorial b-editorial-left"> <a href="https://bureau.ru/books/ui/"><div class="b-editorial-banner-container"><div style="background: url('/i/books/book-ui-cover.jpg') center center no-repeat; padding-bottom: 50%; background-size: 100%"></div></div></a> <h2 class="bigger"><a href="https://bureau.ru/books/ui/">Пользовательский интерфейс</a></h2> </div> <div class="b-editorial b-editorial-right"> <a href="https://bureau.ru/books/metro/"><div class="b-editorial-banner-container"><div style="background: url('/i/books/book-metro-cover.jpg') center center no-repeat; padding-bottom: 50%; background-size: 100%"></div></div></a> <h2 class="bigger"><a href="https://bureau.ru/books/metro/">Дизайн транспортных схем</a></h2> </div> <div style="clear: both"></div> </div> <div class="margins"> <div class="b-subnote-banners"> <div class="b-subnote-banner"> <div class="b-subnote-banner-image" style="margin-top: -8px"> <a class="nu" href="http://bureau.ru/educenter/ui-online/"><img src="instance/themes/meanwhile/images/i8-subnote-banner-fitts@2x.jpg" width="89" height="64" alt="" /></a> </div> <p><a href="http://bureau.ru/educenter/ui-online/">Пользовательский интерфейс<br />и представление информации</a><br />Следите за датами на сайте Бюро</p></div> <div class="b-subnote-banner"> <div class="b-subnote-banner-image" style="margin-top: -3px"> <a class="nu" href="/projects/typography-layout/poster/"><img src="instance/themes/meanwhile/images/i8-subnote-banner-typolayout-poster@2x.png" width="89" height="58" alt="" /></a> </div> <p><a href="/projects/typography-layout/poster/">Плакат с символами<br />Типографской раскладки</a><br />60<span class="tsp"> </span>×<span class="tsp"> </span>40</p> </div> <div style="clear: left"></div> </div> </div> <div style="clear: both"></div> </main> <footer class="footer"> <div class="footer-copyright"> <p> © 2007 </p> </div> <div class="footer-email"> <p><a href="mailto:ilyabirman@ilyabirman.ru">ilyabirman@ilyabirman.ru</a></p> <p> <span title="E2 (релиз 2.11a, v3972)">Движок — <a href="https://blogengine.ru/" class="nu"><u>Эгея</u> <span class="e2-svgi"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill-rule="evenodd" clip-rule="evenodd" d="M30.674 23.666c-3.088 5.904-12.169 10.445-20.277 7.313-1.482-.573-3.709-.478-5.3-1.794-1.616-1.336-1.724-3.301-2.422-4.409-3.758-5.963-2.902-13.47.025-18.003C6.547.816 15.82-.531 23.298 3.826c7.477 4.357 10.48 13.904 7.376 19.84zM22.666 4.741C16.286.647 6.68 2.3 3.711 7.833c-2.7 5.032-.013 13.225 7.464 17.583 7.479 4.356 15.47 3.562 18.5-2.447 2.897-5.746-.051-13.763-7.009-18.228zm-2.695 11.171c-.731-.468-.918-1.25.138-1.65.765-.291 4.051-1.271 5.974-1.851.427-.128 1.101-.133 1.587.256 1.61 1.283 2.196 5.594.737 7.865-.337.524-1.116.518-1.651.136-2.113-1.505-6.099-4.315-6.785-4.756zm-1.754-4.197c.019-.904.143-5.073.178-5.586.044-.656.562-.851 1.283-.881 2.078-.087 5.48 2.535 6.146 4.546.284.859-.21 1.358-.808 1.562a271.793 271.793 0 01-5.349 1.716c-.814.251-1.472-.208-1.45-1.357zm-9.284 6.666c1.742-.755 6.02-2.299 6.67-2.555.486-.192 1.044.31 1.034.924-.017.958-.244 5.146-.334 7.134-.039.864-.543 1.153-1.459 1.071-2.591-.233-5.901-2.468-6.539-4.902-.234-.896.179-1.477.628-1.672zm8.055-6.536c-.021.846-.787.842-1.427.34-.605-.475-4.481-3.609-6.367-5.093-.504-.395-.508-1.114-.139-1.533 1.308-1.485 5.064-2.103 7.116-1.224.658.281.951.753.945 1.264-.017 1.603-.1 5.174-.128 6.246zm-2.223 2.897c-.824.319-6.743 2.44-7.326 2.614-.8.236-1.26.015-1.663-.404-1.576-1.64-1.669-7.936.767-9.131.523-.257 1.045-.173 1.326.027.281.2 6.277 4.754 7.188 5.506.404.334.396 1.122-.292 1.388zm4.39 2.137c.508.394 4.744 3.436 6.789 5.03.636.496.846 1.222.561 1.872-1.06 2.422-5.861 3.161-7.895 2.271-.846-.371-.923-.87-.908-1.812.031-2.188.16-5.93.146-6.589-.023-1.116.673-1.263 1.307-.772z" stroke="none"/></svg></span></a></span> </p> </div> </footer> </div> <div class="e2-nice-error e2-nice-error_hidden" role="alert"> <div class="e2-nice-error-inner"></div> </div> <!-- Yandex.Metrika counter --><script type="text/javascript">(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter155348 = new Ya.Metrika({id:155348, clickmap:true, webvisor:true}); } catch(e) {} }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = (d.location.protocol == "https:" ? "https:" : "http:") + "//mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="//mc.yandex.ru/watch/155348" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter --> </body> </html> <!-- Эгея (релиз 2.11a, v3972) -->