Смена оформления сайта в зависимости от времени суток.

[XXXVII]

На входной странице нашего последнего проекта мы сделали такую опцию во флэше тоже=)

[absolvo]

Красиво =)
А какие промежутки времени? Вернее сколько их?

[XXXVII]

22-6 ночь
6-10 утро
10-19 день
19-21 вечер
Сделали так. Примерно совпадает такое деление с временами суток. В принципе, это все достаточно легко поправить при необходимости

[absolvo]

А ещё можно извратиться и замутить смену оформления по часам, с поправкой на время года. =)

[XXXVII]

Была еще идея синхронизации с солнечным календарем для нашего региона, но решили не делать этого))

[absolvo]

Хотя, в общем, ничего сложного. =)

[XXXVII]

Ну положение посетителя в данном случае неважно, т.к. данные предлагаются для курорта

[xcopy]

Не забываем про регион посетителя и время года.
Ведь, например, зимой не всегда с 10 до 19 день.

[XXXVII]

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

[xcopy]

Думаю Вы не очень понимаете ситуацию. Речь идет об автоматической смене стилей в зависимости от времени года. Хочу напомнить, что в году их 4, а не 2.

[XXXVII]

В нашем случае на сайте будет летнее и зимнее оформление. И скорее всего для летнего варианта страницы придется менять не только стиль, но и html-код. Однако, если удастся отверстать летний вариант с тем же html, то можно будет сделать и автоматическую смену стилей

[xcopy]

> И скорее всего для летнего варианта страницы придется менять не только стиль, но и html-код.

Удачи Вам! Надеюсь Вам удастся осуществить все Вами задуманное. :))

[IceWater]

Супер! Очень красиво, одно нарекание. Когда жмёшь кнопку спуститься с горы - грузится видео. Когда жмёшь её второй раз после того, как посмотрел видео - оно грузится ещё раз. Зачем? Почему не сразу же повторяется ролик?

[XXXVII]

Хмм.. Посмотрим, что можно сделать. Спасибо=)

[XXXVII]

На самом деле видео берется из кэша, просто в Mozilla прогресс-бар медленно грузится - особенность браузера

[XXXVII]

Подумал, что кому-то может пригодиться просто

[Denys]

Я такое на php реализовал :)
Зачем? Почему?
Ответ прост:
Для ява-скрипта или флэша берётся время компа.
В моем случаи нужно было реализовать относительно часовой зоны, но так, если заходишь с Киева то на сайте ночь, а если с Лос-Анджелеса - день.

Да и плюсов получаем побольше:
1. 90-95% браузеров поддерживают Дж-Эс скрипты,
2. возможности для моб.-телефонов, которые не кушают Дж-Эс скрипты,
3. нет потребности совмещать скрпит с иными, если таковы используются,
4. уменьшение запросов на сервер и мирового трафика,
5. время суток на сайте всегда будет зависит только времени часового пояса.
:)

[absolvo]

JS юзается только по необходимости наличия локального времени.
С вашими задачами лучше справиться PHP - тут без сомнений.

[XXXVII]

У нас это реализовано через серверный javascript, тк в используемой версии xslt нет функций времени=)

[Cake_Seller]

Бомба! Нажал на кнопку "спустить с гор"... и мне аж туда на курорт захотелось! Дизайнер молодец - поработал на славу!!!

[XXXVII]

Спасибо, передам дизайнеру=)

[leonard]

Странные у вас вкусы...

[Cake_Seller]

Чего это странные?! Сделано довольно креативно! Идея классная, да и исполнение на уровне.

[leonard]

Дело ваше) Лично мне кажется что исполнение противно.

[nekt]

я бы наверное делал чтобы фон менялся в реальном режиме времени :) Чтоб зашел на сайт... сидишь... потом вдруг смотришь - опа. Уже луна. Пора спать.

[Wonder]

Так долго сидеть на сайте, не обновляя страниц, чтобы стало заметно изменение во времени суток?

[nekt]

А почему нет? Зашел, отвлекся, вернулся - цвета уже сменились :) Плюс зависит от сайта... на хабре к примеру многие сидят часами.

[Wonder]

Без перезагрузки страниц? ))

[absolvo]

Эх - тяжко это будет.

[nekt]

ну да. Если реализовать без перезагрузки... то оно и с перезагрузкой работать будет :)

[tapin13]

для кого луна спать пора, а для кого и солнце спать пора :)
Я например сова.

[nekt]

Опа. Уже луна. Значит вставать пора :)

[Vox]

Эта штука, как и разные приветствия были популярны в 90е, потом они как то отмерли. А вот легендарную надпись "Under construction" заменила "Beta".

[XXXVII]

Видимо сейчас начинается nuWave)

[Vox]

nuWave

Это какая то неизвестная мне штука или опечатка "new wave"?

[XXXVII]

вариант написания new wave, да

[Di_Mon]

А если аудитория сайта по всему миру? Как можно подстроится под часовой пояс пользователя?

[iderins]

JavaScript смотрит локальное время пользователя, на его машине.

[shadeR]

И это правильно будет!

[b00taNik]

getTime работает на стороне клиента, следовательно и время берет клиентское. Поэтому когда в России версия сайта будет утренняя, в америке будет показываться ее "вечерняя версия"

[spelesto]

Отличная информация!
Хоть тема и не нова, но замечательный пример!
Мое почтение

[IgorTomych]

кстати, большенство тем на google.com/ig тоже меняются от текущего времени :)

[absolvo]

Не знал, пошёл следить, спасибо :)

[maokko]

Ну, не самое новое решение. Примерно по тому же скрипту давненько функционирует сайт нашего интернет-агентства. В Photoshop отрисованно 3 версии сайта: день, вечер, ночь. И тот же скрипт меняет css файл с привязкой к одному из дизайнов.

[absolvo]

Не новинка ниразу:
"Подобное конечно не новинка"

[prolis]

А нет ли такого психологического момента, как привыкание? Иногда бывает что вот сменишь дизайн, кажется что стало вау, а старые пользователи первое время ворчат, что раньше было как-то лучше, привычнее.
А так по нескольку раз в день шокировать пользователей. Лучше тогда дать пользователю самому выбрать для себя одну из предустановленных тем.
P.S. Вариант с солнцем/луной тоже убогий.

[absolvo]

Можно ограничиться сменой не всего оформления, а, к примеру, логотипа или шапки.

[prolis]

Это всё полумеры. Цель - кастомизация сайта под предпочтения конкретного посетителя (CRM). От цвета ему не тепло, не холодно.
Ширше надо мыслить - контент менять как-то.

[piloter]

Неее, надо реальную сиутацию оторбажать. Т.е. требуется синхронизация с gismeteo.ru

[Razvedcheg]

угу, со всеми багами. отобрази осадки при -120 градусов ))

[katremer]

Я бы лучше посмотрел на что-нибудь неожиданное, например зимой - на лето, днем - на тихую ночь.

Ну хотя для офисного работника, который в последнее время солнце видит только на обеде, и так сойдет.

[4g3n7]

Хы, прикольная идея!

[scu]

На одном из проектов (http://www.termico.ru) - день и ночь соответственно, но проект 2006 года :-)

[krylatij]

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

[romel]

Позвольте спросить. Почему?

[krylatij]

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

[krylatij]

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

[krylatij]

:) я тоже не люблю холивары :))

[Piplun]

мож я чего не понимаю, но почему скобка, закрывающая функцию, стоит после той штуки, которая убирает JS от браузеров не видящих его?

document.write(css);
// End -->
}

[Jenek]

Реализация не самая удобная, хотя вариант document.write и пачкой css файлов весьма популярен, я не понимаю в чем смысл городить такое.

Делается так.
HTML

<body class="night">
Текст
</body>

CSS

.night { background: black; color: white; }
.day { background: white; color: black; }

JS (позволю себе скопировать часть от вас и особо не тестить, метод проверенный, а мелкие ошибки устранить не сложно)

function getClass()
{
  datetoday = new Date();
  timenow=datetoday.getTime();
  datetoday.setTime(timenow);
  thehour = datetoday.getHours();

  if (thehour > 20)
    document.body.className = "night";
  else
    document.body.className = "day";
}


если нужен реалтайм, вешаем getClass на таймер.

Ссылки по теме:
Переключатель стилей
Адаптивная разметка

[Jenek]

Посмотрел на сайт источник, весьма интересный сайтец, нет я понимаю, что никто не идеален и все иногда нарушают стандарты, но:
доктайп XHTML 1.0 Strict потом <SCRIPT LANGUAGE="JavaScript"><!-- а потом еще и document.write.

Что-то я злой сегодня, скорее всего автора к веб-разработке не имеет отношения и подправил готовую тему :), но согласитель хороший кирпич в огород адептов XHTML, именно благодаря таким сайтам HTML будет всегда, а браузерам нужно учиться переваривать код полный такой каши.

[simpel]

Прочитав статью стал листать комментарии в поисках вот именно такого :) еслиб не нашел - написал бы его сам.
Действительно, зачем делать пачку CSS-файлов, когда достаточно менять класс у body.

[alexwolf]

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

[caIIIa]

Хорошая идея, я тоже делаю нечто подобное, но у меня просто "день" и "ночь"

[kievskii]

а как вы эт сделали? а то у меня после 0 вкл. дневной режим

[caIIIa]

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

[kievskii]

мне нужно время пользователя.

а то js использует, то да. немного грузит.

Но уже ситуацию разрулил. теперь двигаться в сторону быстродействия.

[ekim]

Мне нравится подобная идея на Яндекс.Погода (цвет фона меняется в зависимости от температуры)

[kievskii]

а не подскажите что у меня не так.

хочу что был с 20:00 и до 8:00 был один стиль. а с 8:00 до 20:00 второй. адреса прописал верное к ЦСС

но проблема в другом. то что с 20 до 00:00 стоит именно тот стиль который должен быть. а вот с 01:00 ставится тот который должен утром стоять.

вод код. что не так?

<script language=«Javascript»>

}
</script>
<script language=«javascript»>getCSS();</script>
<noscript>
</noscript>

[kievskii]

чет код не написало. может в личку сбросить?