[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Выбор оформления веб-страницы
Форум PHP программистов > Дизайн и верстка
ElfSam
5.08.2009 - 13:31
Я попытался при помощи жаба-скрипт подключать разные таблицы стилей css, но ниче у меня не получилось.
Вот фрагменты кода:
HTML
<html>
<head>
<title> Учебная странички для тестирования стилей CSS </title>
<link rel="stylesheet" type="text/css" href="style2/my_style2.css">
<script language="JavaScript">
function Check_style()
{
var num=document.set_styles.style.value;
var style=new Array("style1/my_style1.css", "style2/my_style2.css");
document.write('<link rel="stylesheet" type="text/css" href="'+style[num]+'">');
}
</script>
</head>
<body class="bd">

...

<form name="set_styles" align=center class="form2">
<h4 class="text2">
Выбрать оформление
<select name="style" onchange="Check_style()">
<option value="1"> sineva </option>
<option value="2"> proffesional </option>
</select>
</h4>


 ! 

М
Оформляй пост согласно правилам форума
Kuliev






Спустя 3 минуты, 26 секунд (5.08.2009 - 12:34) ElfSam написал(а):
В результате, при выборе первого пункта воще ниче не происходит, а при выборе второго - начинается загрузка страницы, которая, видимо, никогда не закончится sad.gif

Спустя 1 минута, 23 секунды (5.08.2009 - 12:35) gooder отдыхающий написал(а):
при выборе стиля, надо у тэга link подменять href на нужный...

Спустя 8 минут, 35 секунд (5.08.2009 - 12:44) ElfSam написал(а):
Смотри код. Так и сделано в программе

Спустя 1 минута, 33 секунды (5.08.2009 - 12:46) ElfSam написал(а):
массив style содержит пути к разным таблицам стилей. В данном случае их 2

Спустя 1 минута, 40 секунд (5.08.2009 - 12:47) ElfSam написал(а):
может ошибка логическая и она в теге select?

Спустя 4 минуты, 4 секунды (5.08.2009 - 12:51) ElfSam написал(а):
Хм, поменял в тегах option value на 0 и 1 соотв. Странички стали загружаться, но полностью пустые. Чтоб это могло значить...

Спустя 8 минут, 34 секунды (5.08.2009 - 13:00) gooder отдыхающий написал(а):
Цитата (ElfSam @ 5.08.2009 - 12:44)
Смотри код. Так и сделано в программе

Мне смотреть в твой код?
Идея, как делают правильно, написана под твоим

 ! 

М
<Вырезано цензурой>
sergeiss
gooder! А не слишком ли много на себя берешь??? Дерьмом иди воняй в других местах, но не на этом форуме.

Спустя 11 минут, 12 секунд (5.08.2009 - 13:11) sergeiss написал(а):
Замени имя style на другое. По любому, его нельзя использовать для переменных и имен полей.

К кому же, простая прописка таблицы стилей таким образом вовсе не обязана давать ожидаемый тобой результат smile.gif

Дабы не быть голословным, сошлюсь на вот эту ссылку. Прочитай внимательно, там есть ответ на тему того, как динамически сменить таблицу стилей.

Спустя 30 минут, 31 секунда (5.08.2009 - 13:42) ElfSam написал(а):
Вот исправил функцию
HTML
function Check_style()
{
var num=document.set_styles.style.value;
var style=new Array("style1/my_style1.css", "style2/my_style2.css");
document.stylesheets['css1'].href = style[num];
}


Результат:
Ошибка: document.stylesheets is undefined
Источник: file:///D:/Server/localhost/peoplenet/my.html
Строка: 10

Спустя 3 минуты, 9 секунд (5.08.2009 - 13:45) ElfSam написал(а):
или в опере:
JavaScript - file://localhost/D:/Server/localhost/peoplenet/my.html
Event thread: change
Error:
name: TypeError
message: Statement on line 6: Could not convert undefined or null to object
Backtrace:
Line 6 of inline#1 script in file://localhost/D:/Server/localhost/peoplenet/my.html
document.stylesheets["css1"].href = style[num];
Line 1 of script
Check_style();
At unknown location
[statement source code not available]

Спустя 2 минуты, 43 секунды (5.08.2009 - 13:48) ElfSam написал(а):
*styleSheets, но все равно не работает ((

Спустя 3 минуты, 23 секунды (5.08.2009 - 13:51) ElfSam написал(а):
из четырех браузеров, работает пока что только в IE

Спустя 4 минуты, 21 секунда (5.08.2009 - 13:55) sergeiss написал(а):
Обрати внимание, привожу полный текст:

HTML
<link rel="stylesheet" type="text/css" id="css1" title="Default" href="/css/default.css">

<script language="javascript">
function changeCSS(name) {
// обратите внимание – идентификатор коллекции
// "styleSheets" чувствителен к регистру:
document.styleSheets[‘css1’].href = ’/css/’ + name +
’.css’;
}
</script>


Подумай: откуда тут css1?
И еще подумай: а есть ли у тебя такой идентификатор? Может быть, надо задать такой же (или другой) идентификатор??? smile.gif

И кавычки используй простые одинарные.

Спустя 32 минуты, 26 секунд (5.08.2009 - 14:28) ElfSam написал(а):
я прописал идентификатор css1 в
HTML
<link rel="stylesheet" type="text/css" id="css1" href="style1/my_style1.css">
...
document.styleSheets['css1'].href = style[num];
...


Толку ноль. Работает, по прежнему, только в IE.

Спустя 2 часа, 6 минут, 53 секунды (5.08.2009 - 16:35) ElfSam написал(а):
По моему, такой способ: document.styleSheets['css1'].href = style[num];
пашет только в IE
И еще проблема...
В IE стили меняются, но если обновить страничку, то стиль устанавливается опять тот, который был по умолчанию.
Может, кроме приведенного способа существуют другие?

Спустя 6 часов, 5 минут, 8 секунд (5.08.2009 - 22:40) sergeiss написал(а):
Ты знаешь...
Я тут поковырялся немного, т.к. задача меня заинтересовала. И нашел весьма простое решение smile.gif Проверено в Опере 9.24 и в IE 6.

HTML
<link rel="stylesheet" type="text/css" id="css1" title="Default" href="styles.css">
....

<input type="button" id="butt3" value="Change style" onclick="document.getElementById('css1').href='styles2.css'"/>


А затем уже просто поизвращался немного, и получил такой результат:
HTML
<input type="button" id="butt3" value="Change style" onclick="
if( document.getElementById('css1').href == 'http://localhost/styles2.css' || document.getElementById('css1').href == 'styles2.css')
document.getElementById('css1').href='styles.css';
else
document.getElementById('css1').href='styles2.css';"


Далее, как это всё использовать, мне так почему-то кажется, ты и сам догадаешься wink.gif

Спустя 4 минуты, 44 секунды (5.08.2009 - 22:44) kirik написал(а):
Посмотрите тутай

Спустя 8 минут, 37 секунд (5.08.2009 - 22:53) sergeiss написал(а):
kirik - и хорошо, что ты эту ссылку раньше не дал, т.к. иначе я бы не поразбирался самостоятельно smile.gif А вопрос интересный, только раньше как-то необходимости не было менять стили настолько кардинально, "на ходу".
Зато теперь, когда вник в это всё, то стало понятно.

Спустя 58 минут, 27 секунд (5.08.2009 - 23:51) kirik написал(а):
sergeiss
smile.gif
Мне кстати твое решение с обращением к элементу по id больше нравится, и даже в ИЕ6 работает smile.gif

Спустя 9 часов, 31 минута, 30 секунд (6.08.2009 - 09:23) ElfSam написал(а):
Действительно, таким способом работает во всех браузерах.
Вот его реализация для моей задачи
HTML
<html>
<head>
<title> Учебная странички для тестирования стилей CSS </title>
<link rel="stylesheet" type="text/css" id="css1" href="style1/my_style1.css">
<script language="JavaScript">
function Check_style()
{
var num = document.set_styles.m_style.value;
var stil = new Array("style1/my_style1.css", "style2/my_style2.css",
"style3/my_style3.css");
document.getElementById('css1').href = stil[num];
}
</script>
</head>
<body class="bd">
...

<form name="set_styles" class="form1">
Выбрать оформление
<select name="m_style" onchange="Check_style()">
<option value=0> sineva </option>
<option value=1> proffesional </option>
<option value=2> formal </option>
</select>
</form>

...

Спустя 4 минуты, 2 секунды (6.08.2009 - 09:27) ElfSam написал(а):
Таким образом, можно выбрать любой понравившийся стиль из списка
<select>. Стилей можно задать произвольное количество.
Единственная проблема в том, что при обновлении страницы все значения сбрасываются и отображается стиль по умолчанию. Видимо выбор стилей все же лучше реализовать на пхп

Спустя 4 минуты, 46 секунд (6.08.2009 - 09:32) ElfSam написал(а):
вот скриншоты:
user posted image user posted imageuser posted image

Спустя 2 минуты, 31 секунда (6.08.2009 - 09:34) sergeiss написал(а):
ElfSam - я бы еще посоветовал сделать контроль величины num.
Потому что, например, ты можешь захотеть добавить 4-й стиль. Внесешь его в список, но тут тебя отвлекут (или еще что-то произойдет - "закон подлости" никто не отменял smile.gif), и ты забудешь сделать изменения в функции Check_style. Тогда получишь ошибку при попытке смены стиля.
А при наличии правильного контроля, в такой ситуации можно вывести предупреждение.

Что касается сохранения стиля - посмотри ссылку, которую дал kirik. Там показано, как сохранить что-либо в куках (в твоем случае это будет стиль). И потом, уже в ПХП при следующем формировании страницы, ты можешь прочитать куки и сформировать страницу со стилем, выбранным пользователем.

Спустя 7 минут, 41 секунда (6.08.2009 - 09:42) ElfSam написал(а):
Вместо контроля можно упростить программу:

HTML
<script language="JavaScript">
function Check_style()
{
var stil = document.set_styles.m_style.value;
document.getElementById('css1').href = stil;
}
</script>
...

<form name="set_styles" class="form1">
Выбрать оформление
<select name="m_style" onchange="Check_style()">
<option value="style1/my_style1.css"> sineva </option>
<option value="style2/my_style2.css"> proffesional </option>
<option value="style3/my_style3.css"> formal </option>
</select>
</form>
...

Спустя 1 минута, 35 секунд (6.08.2009 - 09:44) ElfSam написал(а):
таким образом не будет заниматься память под массив и каждому названию стиля будет соответствовать свой URL

Спустя 6 часов, 3 минуты, 3 секунды (6.08.2009 - 15:47) ElfSam написал(а):
А вот и реализация динамической смены оформления страницы пользователем где использовались каки:
HTML
<link rel="stylesheet" type="text/css" id="css1">

<script language="JavaScript">
if(GetCookie('style_url') == null)
document.getElementById('css1').href = "style1/my_style1.css";
else
document.getElementById('css1').href = GetCookie('style_url');

function CheckStyle()
{
var my_style = document.set_styles.m_style.value;
var oneWeek = 7 * 24 * 60 * 60 * 1000;
var expDate = new Date () ;
expDate.setTime (expDate.getTime() + oneWeek);
document.cookie = "style_url" + "=" + escape(my_style) + "; expires=" +

expDate.toGMTString();
document.getElementById('css1').href = GetCookie('style_url');
}

function GetCookie (name) //прочитать значение cookie
{
var result = null;
var myCookie = " " + document. cookie + ";";
var searchName = " " + name + "=";
var startOfCookie = myCookie.indexOf(searchName);
var endOfCookie;
if (startOfCookie != -1)
{
startOfCookie += searchName.length;
// пропустить последнее имя cookie
endOfCookie = myCookie.indexOf(";", startOfCookie);
result = unescape(myCookie.substring(startOfCookie, endOfCookie));
}
return result;
}

</script>

...

<form name="set_styles" class="form1">
Выбрать оформление
<select name="m_style" onchange="CheckStyle()">
<option value="style1/my_style1.css"> синева </option>
<option value="style2/my_style2.css"> профи </option>
<option value="style3/my_style3.css"> зелень </option>
</select>
</form>
...


При первом запуске страницы устанавливается стиль по умолчанию, а далее, при выборе пользователем стиля, этот выбор запоминается. Я зделал так, чтоб cookie жило неделю, но можно указать любой промежуток времени
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.