Показать элемент ... если у пользователя не включен javascript, а затем сделать его красивым и красивым? - PullRequest
Новая
       20

Показать элемент ... если у пользователя не включен javascript, а затем сделать его красивым и красивым?

2 голосов
/ 13 апреля 2011

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

Как сделать так, чтобы он показывался по умолчанию (для 1% или около того пользователей, которые работают с отключенным javascript), но анимировал для остальных?

Использование 

    $(document).ready(function(){
        $('#messagecenter').hide();
        $('#messagecenter').show('fade', 'slow');
    })

Заставляет элемент загружаться видимым, затем исчезать, затем исчезать. 

display:hidden;


    $(document).ready(function(){
        $('#messagecenter').show('fade', 'slow');
    })

Конечно, он будет скрыт для пользователей без Javascript.

Есть ли какой-нибудь хороший способ сделать это?

Ответы [ 4 ]

3 голосов
/ 13 апреля 2011

Простой способ : скрыть содержимое для пользователей с поддержкой JS сразу после включив его в страницу, а не ожидая загрузки всего документа: 

<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
    $('#messagecenter').hide();
    $(document).ready(function() {
        $('#messagecenter').show('fade', 'slow');
    });
</script>

Этого обычно достаточно, чтобы остановить флэш-рендеринг контента при загрузке страницы. Но, возможно, нет, если содержание сложное / большое. В этом случае:

Водонепроницаемый способ : добавить класс к элементу-предку (например, body), когда JS включен, используя CSS, чтобы гарантировать, что загружаемый контент скрыт по умолчанию, только когда JS включен: 

<head>
    <style type="text/css">
        body.withjs #messagecenter { visibility: hidden; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#messagecenter').show('fade', 'slow');
        });
    </script>
</head>
<body>
    <script type="text/javascript">
        $(document.body).addClass('withjs');
    </script>
    ...
    <div id="messagecenter">Albatross!</div>
2 голосов
/ 13 апреля 2011

Вы можете воспользоваться вторым вариантом использования display: none; и снова включить свой текст в тег noscript .

Не совсем чистая вещь, поскольку вы будетедублирование вашего элемента / текста.

1 голос
/ 13 апреля 2011

Всегда используйте тег <noscript>...</nosript> для этих 1% пользователей.

И не трогайте код для обычных пользователей.

1 голос
/ 13 апреля 2011

Самый простой ответ: не ждите документа. Уже покажите его. Просто поместите этот код внизу вашего <body>, и он вряд ли будет заметен.

Обязательно связывайте свои запросы тоже. 

$('#messagecenter').hide().fadeIn('slow');
...