Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.01.2011, 17:29
Новичок на форуме
Отправить личное сообщение для t1gor Посмотреть профиль Найти все сообщения от t1gor
 
Регистрация: 16.10.2008
Сообщений: 8

Переключение таблиц стилей в js
Здравствуйте, всем.

Делаю переключение таблиц стилей с целью смены цветовой гаммы на сайте. Сайт - www.sivash-terminal.com

Как-то оно все себя очень нестабильно ведет. Не нравиться. Думаю, что стоит подгружать фоном как-нить используемые картинки и стили.

Скриптов на сайте много, они работают при переключении с попеременным успехом. От чего зависит - непонятно.

В общем, хотелось бы услышать авторитетное мнение.

ЗЫ Под осла костыли не ставил пока, да и вообще на кросс-браузерность не проверял.
Ответить с цитированием
  #2 (permalink)  
Старый 14.01.2011, 10:50
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от t1gor
От чего зависит - непонятно
Оно всегда завист только от алгоритма тех изменений... "Само" ничего не делается... Если только у тебя это не искуственный интеллект.
Ответить с цитированием
  #3 (permalink)  
Старый 14.01.2011, 11:04
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

не надо отдельный css под каждый цвет. Назначаешь body класс red, green или blue, а в css пишешь стили в зависимости от текущего класса body
Ответить с цитированием
  #4 (permalink)  
Старый 14.01.2011, 13:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

x-yuri, в чем выигрыш?
Ответить с цитированием
  #5 (permalink)  
Старый 14.01.2011, 22:39
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

ну как, хотя бы: зачем javascript, если это намного проще делается с помощью css? Кроме того: зачем подгружать css при переключении, если можно его не подгружать?

и еще, используй css-спрайты
Ответить с цитированием
  #6 (permalink)  
Старый 14.01.2011, 22:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

x-yuri, все равно в цсс классы пишешь... В боди значение класа меняешь...
Я не про JS... Я про разные цсс файлы и про подмену имени цссного файла серверным скриптом.

Ведь при смене класса в боди (если управлять только этим) сами селекторы в одном цсс усложнятся...

Или я опять не понял твою идею? Можеш примерчиком проиллюстрировать?
Ответить с цитированием
  #7 (permalink)  
Старый 14.01.2011, 23:22
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

кроме того, когда ты пишешь $('link[rel=stylesheet]').attr('href', '...') ты фактически говоришь браузеру: "то, как выглядела страница до сих пор... это все неправильно. Отмени все предыдущие стили, а новые возьми из другого файла". В моем случае, браузер корректирует только нужные моменты, а не весь css

давай пример, на всякий случай
<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <style type="text/css">
        body {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        }
        a {
          color: #36f;
        }
        ul {
          overflow: hidden;
          zoom: 1;
        }
        li {
            list-style-type: none;
            float: left;
            margin-right: 20px;
        }
        body.red p.first {
            background: #c33;
        }
        body.green p.first {
            background: #3c3;
        }
        body.blue p.first {
          background: #33c;
        }
    </style>
  </head>
  <body class="red">

<ul>
  <li><a class="red" href="#">красный</a>
  <li><a class="green" href="#">зеленый</a>
  <li><a class="blue" href="#">синий</a>
</ul>

<script type="text/javascript">
$('a').click(function(){
    document.body.className = this.className;
    return false;
});
</script>

<p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non tortor nibh, in varius ipsum. Maecenas leo elit, tincidunt vel iaculis eu, eleifend nec libero. Praesent scelerisque, dolor ultricies pellentesque sodales, tortor leo tempor leo, tristique tincidunt velit augue ut nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras rutrum mi vitae lacus pharetra egestas. Aenean dignissim nisi ac urna blandit interdum. In molestie mattis nulla et accumsan. Nunc posuere dapibus eros non tempus. Vestibulum quis mi turpis, ut fermentum metus. Proin eleifend congue eleifend. Proin consequat feugiat egestas. Nunc diam turpis, porta posuere sollicitudin id, volutpat vel augue.
<p class="second">Vestibulum dapibus nibh quis tellus convallis sed dapibus quam volutpat. Mauris tortor mauris, mattis vel sodales vitae, gravida sit amet nulla. Curabitur risus nulla, sagittis eget auctor eget, tincidunt vitae justo. Integer bibendum magna et elit pharetra congue. Nunc volutpat gravida massa, in laoreet leo aliquet ut. In nisl est, pellentesque sed tempus euismod, dictum non massa. Suspendisse interdum sodales nibh sit amet adipiscing. Aliquam quis est vitae sapien dignissim auctor vitae ac dolor. Maecenas venenatis commodo odio in suscipit. Quisque a libero nulla, accumsan tempus elit. Pellentesque quis odio ipsum. Nam vel purus id justo bibendum auctor et eu dui. Aenean sit amet metus id elit congue sollicitudin. Nullam dui quam, posuere dictum aliquam id, mollis ac odio. Sed sagittis, ipsum vulputate feugiat feugiat, nisi felis aliquam sapien, nec ullamcorper urna tellus non felis. Integer eu urna nec nulla commodo ultrices. Praesent non gravida enim.

  </body>
</html>

Последний раз редактировалось x-yuri, 14.01.2011 в 23:28.
Ответить с цитированием
  #8 (permalink)  
Старый 15.01.2011, 11:48
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от x-yuri
сами селекторы усложняются в ответ на усложнение условий задачи
Просто есть сомнения что таким усложнением можно будет сделать невозможными или не понятными другим некоторые, и без того сложные, селекторы.
Разбивка на файлы (цветовые) будет вроде как проще... Т.е. у нас пока используется единый файл со структкрой/расстановкой элементов и несколько цветовых, типа паллитры. Т.о. меняются только паллировые цссы...
Пользователь имеет возможность делать свои паллитры и использовать их... При этом структура страницы неизменна.
А при едином файле такое вроде как сильно усложнится даже визуально...
Сообщение от x-yuri
огда ты пишешь $('link[rel=stylesheet]').attr('href', '...') ты фактически говоришь браузеру: "то, как выглядела страница до сих пор... это все неправильно.
А когда меняю значение класс у боди, чего "говорю" браузеру?
Ответить с цитированием
  #9 (permalink)  
Старый 15.01.2011, 14:16
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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

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

Сообщение от ksa
Пользователь имеет возможность делать свои паллитры и использовать их...
ты про "внешних" пользователей? Это другой случай, такие правила лучше писать в отдельные файлы, да

кроме того, при замене css, браузер подгружает файл из сети. И будет заметно отключение стилей, по-крайней мере в первый раз. Проводя аналогию с картинками, эту проблему (в частности) решают css-спрайты

Сообщение от ksa
А когда меняю значение класс у боди, чего "говорю" браузеру?
ты видно тот сайт не внимательно смотрел, там всего 3 css-файла (а не хотя бы 4), под 3 цвета

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

Сообщение от ksa
и без того сложные, селекторы.
а можно примеры?
Ответить с цитированием
  #10 (permalink)  
Старый 15.01.2011, 21:21
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от x-yuri
а можно примеры?
Я пока веду теоретическую беседу...

Но как вариант, частенько используются перечисляемые

#d1,
#d2,
#d3 {
...
}


Такие сочетания

#menu > li + li {
...
}


И вот ко всему этому нужно будет приписать класс боди и растиражировать в одном файле?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не получается передать переменную из JS в PHP Lion_astana AJAX и COMET 2 23.11.2010 17:23
помогите задать переменную в js bsgroupua Общие вопросы Javascript 3 01.02.2010 18:28
Изменение путей к таблицам стилей и скриптам в скрипете галереи lightbox 2.04 Flashton Элементы интерфейса 1 01.02.2010 10:10
Html метки + div + JS boltayka Events/DOM/Window 1 07.09.2009 17:21
Самая лучшая книга по JS? ulandj Оффтопик 2 06.04.2009 11:35