Смена всего контента

[Verder]

Ночь, улица, фонарь, аптека...

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

Вобщем, всей страницы, а не каких-то элементов и без подгрузки.

Есть на флэше заготовка, делал такое, но флэш не хочу использовать.

Ajax?

[Odrin]

Все зависит от того, на какую смены Вы хотите. Плавная смена дизайна по кругу, пока пользователь на ней? setInterval и меняйте стили у нужных вам элементов (или прячьте одни, показывайте другие, как Вам удобнее в конкретной ситуации). Чтоб дизайн был разным в зависимости от того, когда открыли страницу? Смотрим на сервере время и отдаем нужную страницу. Или плавный переход, так же привязанный к реальному времени суток, пока пользователь на странице? Тогда setInterval + new Date() и далее по старой схеме =)

Вариантов решения задачи всегда несколько. Можете и ajax использовать. Держать несколько страниц в html файлах подгружать их get'ом и потом вставлять в страницу с помощью jQuery Templating например.

Edited February 2, 2012 by Odrin

[buddah]

Смена контента - это ajax, а плавность показа новой страницы - jQuery fadeIn/fadeOut.

Вот пример.

[Verder]

Смена контента - это ajax, а плавность показа новой страницы - jQuery fadeIn/fadeOut.

Вот пример.

Это только для смены контента.

Смысл простой — изначально, по дефолту, дизайн сайта ночной. При клике на кнопку он плавно меняется на день.

[Odrin]

Так все еще проще, чем я подумал изначально. Так в чем проблема- то? И никакой ajax тут не нужен. Зачем лишние запросы плодить- то?

[Verder]

Так все еще проще, чем я подумал изначально. Так в чем проблема- то? И никакой ajax тут не нужен. Зачем лишние запросы плодить- то?

Ну так это для Вас все просто Я не программер, а дизайнер. И если на flash я могу такое сделать, то JS вызывает определенные трудности.

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

[Great Rash]

Не проще просто грузить разные страницы в зависимости от того день сегодня или ночь? Делать такое на JS - извращение. Тут идеально подойдет тот же PHP (ну или любой другой серверный язык, поддерживающий инклюды).

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

[Verder]

Не проще просто грузить разные страницы в зависимости от того день сегодня или ночь? Делать такое на JS - извращение. Тут идеально подойдет тот же PHP (ну или любой другой серверный язык, поддерживающий инклюды).

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

Хочется дать посетителю возможность выбора. Может у него пмс или настроение хреновое, а сайт темный. Ему хочется в данный момент светлый.

На оптимизацию пофиг, да и контент будет тот же самый. Меняется просто тема.

[Odrin]

Я не знаю, есть ли готовые решения (наверняка есть ), но я бы сделал так:

Оборачиваем всю страницу в <div id="content"></div>, потом (используем jQuery для простоты)

$('#content').fadeIn(function(){
    $('.day').removeClass('day').addClass('night');
    $('#content').fadeOut();
});

Собственно и конец всему JS. Коротко поясню на всякий случай, если Вы плохо знакомы с jQuery: прячем всю страницу плавно, находим все элементы с классом day и меняем этот класс на night. Обратно плавно показываем страницу.

Далее осталось правильно составить CSS для нужных вам элементов. Полагаю для Вас, как дизайнера, это будет просто.

Edited February 2, 2012 by Odrin

[Verder]

Я не знаю, есть ли готовые решения (наверняка есть ), но я бы сделал так:

Оборачиваем всю страницу в <div id="content"></div>, потом (используем jQuery для простоты)

$('#content').fadeIn(function(){
    $('.day').removeClass('day').addClass('night');
    $('#content').fadeOut();
});

Собственно и конец всему JS. Коротко поясню на всякий случай, если Вы плохо знакомы с jQuery: прячем всю страницу плавно, находим все элементы с классом day и меняем этот класс на night. Обратно плавно показываем страницу.

Далее осталось правильно составить CSS для нужных вам элементов. Полагаю для Вас, как дизайнера, это будет просто.

Большое спасибо, попробую этот вариант. Вы не против, если я обращусь в ПМ если что-то не пойму?

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

[Odrin]

Большое спасибо, попробую этот вариант. Вы не против, если я обращусь в ПМ если что-то не пойму?

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

Всегда пожалуйста. Обращайтесь, конечно =)

[Great Rash]

...включая изображения, тексты и.т.д.

а потом ты пишешь:

...да и контент будет тот же самый. Меняется просто тема.

Непонятки...

<head>
  <title>Мега страница</title>
  <link rel="stylesheet" src="day.css" type="text/css" media="screen" />

  <script type="text/javascript">
   window.onload = function() {
      var path = 'night.css';
      var link = document.getElementsByTagName('link')[0];
      var time = new Date().getHours();

      if (time > 21 || time < 6) {
        link.setAttribute('src', path);
      }
    }
  </script>
</head>

Так попробуй.

[Verder]

...включая изображения, тексты и.т.д.

а потом ты пишешь:

...да и контент будет тот же самый. Меняется просто тема.

Непонятки...

<head>
  <title>Мега страница</title>
  <link rel="stylesheet" src="day.css" type="text/css" media="screen" />

  <script type="text/javascript">
   window.onload = function() {
      var path = 'night.css';
      var link = document.getElementsByTagName('link')[0];
      var time = new Date().getHours();

      if (time > 21 || time < 6) {
        link.setAttribute('src', path);
      }
    }
  </script>
</head>

Так попробуй.

Я имел в виду, что контент будет тот же, но стили для текстов, заголовков и.т.д. сменятся (цвета, с светлого на темный).

[buddah]

Я имел в виду, что контент будет тот же, но стили для текстов, заголовков и.т.д. сменятся (цвета, с светлого на темный).

А, так ты всех запутал) Тогда как говорил Great Rash выше - просто меняешь текущий css-файл. Привязывать эту смену к текущему времени или просто повесить на ссылку - твое дело.

Edited February 2, 2012 by buddah

[Verder]

Я имел в виду, что контент будет тот же, но стили для текстов, заголовков и.т.д. сменятся (цвета, с светлого на темный).

А, так ты всех запутал) Тогда как говорил Great Rash выше - просто меняешь текущий css-файл. Привязывать эту смену к текущему времени или просто повесить на ссылку - твое дело.

Короче выложу в работы, там видно будет

Edited February 2, 2012 by Verder

[Odrin]

О, а я и не знал, что можно так менять текущий CSS. Ну так вообще отлично. Так же прятать страничку, менять CSS и показывать обратно. Еще проще.

[HeadShot]

Вот щас как раз пишу плагин для переключения. Добавлю апи для детекта разрешений экрана и можно даже в принципе время суток прикрутить.

[Verder]

Вот щас как раз пишу плагин для переключения. Добавлю апи для детекта разрешений экрана и можно даже в принципе время суток прикрутить.

Да блин не надо мне чтобы он гениально определял сколько щас время Тупо ткнуть на кнопку и все поменялось с ночи на день.