Как исчезнуть на всей веб-странице - доступно - PullRequest
Новая
       11

Как исчезнуть на всей веб-странице - доступно

5 голосов
/ 12 августа 2011

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

Я мог бы начать с содержимого, скрытого с помощью CSS, и добавить его с помощью jQuery.К сожалению, это нарушает прогрессивное улучшение: сайт будет полностью непригодным для использования до тех пор, пока не будет запущен активный код, что вызовет проблемы для людей с ослабленным зрением, использующих программы чтения с экрана, среди прочего.

Я рассмотрел два обходных пути: Flash и тег <noscript>.Flash кажется излишним, так как он не используется в других местах на сайте;Кроме того, домашняя страница насыщена контентом с постоянно обновляемым набором новостей, что-то вроде легкого блога.Тег <noscript> не поможет слабовидящим, которые используют программы чтения с экрана, поскольку в их браузерах обычно включены сценарии.

Мне не хватает решения?Или это просто плохая идея?

Ответы [ 5 ]

5 голосов
/ 12 августа 2011

Выполните следующие действия: 

<html>
....
<body>
<script>$("body").addClass("hide");</script>
...

С этим css 

body.hide #myHidden-div{
  opacity: 0;
}

Затем после двухсекундной паузы вы сможете выполнить $("#myHidden-div").fadeIn();

У пользователя js отключен, тэг addClass никогда не сработает и ничего не будет скрыто.Я не думаю, что вам вообще нужно использовать тег <noscript>.

Вы должны убедиться, что тег script находится сразу после <body>, чтобы пользователь не видел скачок содержимого, а затем внезапно скрылся.Это лучше, чем скрывать все по умолчанию, потому что некоторые поисковые системы могут заметить, что вы скрыли текст, и игнорировать его из-за спама.

1 голос
/ 12 августа 2011

Вы можете создать это правило CSS в javascript: 

*
{
    position:relative;
    left:-9999px;
}

, используя jquery: $("*").css({position: 'relative', left: '-9999px'})

Затем в нижней части страницы запустите свой javascript, чтобы скрытьвсе и удалите это правило CSS, а затем постепенно увеличивайте, как вы хотите.

Это работает для браузеров, не поддерживающих javascript, и для программ чтения с экрана, поддерживающих javascript:)

1 голос
/ 12 августа 2011

Я думаю, вы могли бы сделать такой взлом:

  1. Начните с содержимого, скрытого по умолчанию.
  2. Добавьте еще один класс CSS к элементам, которые вы хотите показать.
  3. В теге noscript добавьте другой файл CSS с определением для нового класса css, чтобы показать содержимое.
  4. В противном случае используйте jQuery для постепенного исчезновения элементов.

В качестве альтернативы, нажмите на парня, для которого вы создаете этот сайт, потому что это ужасный пользовательский опыт. = D

1 голос
/ 12 августа 2011

Есть разные сайты для слабовидящих и остальных.У одного есть сценарий, а у другого нет.

Может быть так же просто, как получить переменную, если у вас есть некоторый код стороны.

0 голосов
/ 12 августа 2011

Я думаю, что единственное, не идеальное решение этой проблемы - это использовать функцию jQuery hide() после того, как вы загрузите элементы, затем добавите их. Вы получите флэш-контент, но он доступен.

У меня есть маленький пример здесь .

...