[Ликбез]
Форма входа
Логин:
Пароль:
Меню сайта
Скрипты и коды для юкоз - Форум аццкого кодера » Если вы пришли за помощью, то Вам сюда... » Вопросы от “RazieL'я”
Вопросы от “RazieL'я”
[31] likbezz [24.12.2011, 04:39]
RazieL,
Quote (RazieL)
Все работает на отлично, но в опере отказывается работать, может ошибка в синтаксисе?

Смотря какая версия Оперы, линейный градиент поддерживают только последние, и то не весь, а только -o-linear-gradient и -o-repeating-linear-gradient.


....
Quote (RazieL)
может ошибка в синтаксисе?

А не проще просто вынести стили в CSS и назначить элементу нужный класс... Это проще.
Ошибок скрипта не вижу, но так не делают.
...

☑ Пример, для проверки ... (Смена фона по клику №1 + gradient)
...

P.S. Исходники
Прикрепления: 5136067.png (28.2 Kb)
[32] RazieL [25.12.2011, 01:32]
Quote (likbezz)
Смотря какая версия Оперы,

Версия оперы 11.60, стиль я копировал из css таблицы, он рабочий, но в скрипте не работает...

Quote (likbezz)
Пример, для проверки ... (Смена фона по клику №1 + gradient)

Хм, так выглядит разумнее biggrin окей переделаю...

Добавлено (25.12.2011, 01:32)
---------------------------------------------
Собственно сообразил скрипт
Code

<script type="text/javascript">
$('#switcher-content a').click(function() {
var n=$(this).html();
    if (n >= 0 && n <= 9){
$(this).addClass('active').siblings().removeClass('active');
$('#header').css({'background-image':'url(/design/bg-top'+n+'.jpg)',opacity:'0'}).animate({opacity:'1'},500);
}
    if(n=='10'){
    $('#nav').attr({'style':'','class':'blueNav'});
}
    if(n=='11'){
    $('#nav').attr({'style':'','class':'redNav'});
}
    if(n=='12'){
    $('#nav').attr({'style':'','class':'greenNav'});
}
    if(n=='13'){
    $('#nav').attr({'style':'','class':'whiteNav'});
}
    if(n=='14'){
    $('#nav').attr({'style':'','class':'blackNav'});
}
    if(n=='A'){
    $('a:link, a:visited, a:active').css({'color':'#0080a4'})
    $('a:hover').css({'color':'#000'})
}
    if(n=='B'){
    $('a:link, a:visited, a:active').css({'color':'#DD4B39'})
    $('a:hover').css({'color':'#000'})
} return false;
});
</script>


У тебя есть пример с куками, чтобы можно было сохранять это дело, хочу прикрутить к срипту biggrin

Сообщение отредактировал RazieL - Воскресенье, 25.12.2011, 01:39
[33] likbezz [25.12.2011, 16:45]
RazieL,
Quote (RazieL)
У тебя есть пример с куками, чтобы можно было сохранять это дело, хочу прикрутить к срипту

Это типа вопрос?
Есть, вот: Как сделать несколько тем оформления на сайте? (Вариант на JavaScripn с использованием кук (cookie) ...)
Пост №5 - аккурат в тему, только переделать под себя.
...

...
[34] RazieL [25.12.2011, 21:12]
likbezz, из рассмотренного понял только как можно изменять диз с сохранением куки, но в примере только описано как менять css листы целиком, а в моем варианте это не подходит.
А как сохранять класс в куки я не понял...
[35] likbezz [25.12.2011, 22:45]
RazieL,
Quote (RazieL)
likbezz, из рассмотренного понял только как можно изменять диз с сохранением куки, но в примере только описано как менять css листы целиком, а в моем варианте это не подходит.
А как сохранять класс в куки я не понял...

... Ок, позже нарисую подробнее ...

☑ Пример всего этого (Смена фона по клику №1 + gradient + cookie)
...
[36] RazieL [26.12.2011, 07:41]
Так-с, вот что я понял
Этот скрипт добавляем в боди
Code
<script type="text/javascript">      
function setDynClass(a){
if(!arguments.length){var a=(a=document.cookie.match(/\bdyncss=([^;]*)/))&&a[1];if(!a)return''}
document.getElementById('dm1').className='style'+a;
var d=new Date();d.setFullYear(d.getFullYear()+1);
document.cookie=['dyncss=',a,';expires=',d.toGMTString(),';path=/;'].join('');return a}
setDynClass();      
</script>

Для начале на всех страницах приписываем тегу body id="dm1"
Потом в хедер добавляем стили:
...
body.style1 #nav
body.style2 #nav
body.style3 #header
body.style4 a:link, body.style4 a:active и тд.
...
Судя из моего скрипта, у меня три элемента меняются независимо друг от друга, это цвет навигационной панели(#nav), бэкграунд хедера(#header) и цвет ссылок(a:link ...)
В этот скрипт
Code
<script type="text/javascript">
$('#switcher-content a').click(function() {
var n=$(this).html();
    if (n >= 0 && n <= 9){
$(this).addClass('active').siblings().removeClass('active');
$('#header').css({'background-image':'url(/design/bg-top'+n+'.jpg)',opacity:'0'}).animate({opacity:'1'},500);
}
    if(n=='10'){
    $('#nav').attr({'style':'','class':'blueNav'});
}
    if(n=='11'){
    $('#nav').attr({'style':'','class':'redNav'});
}
    if(n=='12'){
    $('#nav').attr({'style':'','class':'greenNav'});
}
    if(n=='13'){
    $('#nav').attr({'style':'','class':'whiteNav'});
}
    if(n=='14'){
    $('#nav').attr({'style':'','class':'blackNav'});
}
    if(n=='A'){
    $('a:link, a:visited, a:active').css({'color':'#0080a4'})
}
    if(n=='B'){
    $('a:link, a:visited, a:active').css({'color':'#DD4B39'})
} return false;
});
</script>

Мне надо добавить
Code
document.getElementById('dm1').className='style'+n;    
setDynClass(n);


Все настройки откуда изменяются сами элементы находятся в этом блоке...
Code
<div id="bg-switch">
<div id="switcher-content">
<a rel="nofollow" href="#">0</a>
<a rel="nofollow" href="#">1</a>
...
<a rel="nofollow" href="#">9</a><br />
<a rel="nofollow" href="#" class="navy" style="background-color: rgba(62,187,218, 0.8);">10</a>
...
<a rel="nofollow" href="#" class="navy" style="background-color: rgba(34,34,34, 0.8);">14</a>
<a rel="nofollow" href="#" class="letter" style="background-color:#0080a4; margin-left:14px;">A</a>
<a rel="nofollow" href="#" class="letter" style="background-color:#DD4B39; margin-left:2px;">B</a>
</div>
</div>


Сообщение отредактировал RazieL - Понедельник, 26.12.2011, 07:43
[37] likbezz [26.12.2011, 09:06]
RazieL,
Quote (RazieL)
Для начале на всех страницах приписываем тегу body id="dm1"

Не обязательно именно такой - это просто у меня такой ...

Quote (RazieL)
Судя из моего скрипта, у меня три элемента меняются независимо друг от друга, это цвет навигационной панели(#nav), бэкграунд хедера(#header) и цвет ссылок(a:link ...)

Какая разница?? - то же, только в профиль ...

Quote (RazieL)
Все настройки откуда изменяются сами элементы находятся в этом блоке...

Нет, вот в этом скрипте, что обрабатывает управляющие элементы:
Code
<script type="text/javascript">
$('#switcher-content a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var n=this.rel;
document.getElementById('dm1').className='style'+n;  
setDynClass(n);
return false;
});  
</script>

...
[38] RazieL [27.12.2011, 19:28]
Вот как я делаю (для примера)
В шаблон Страницы сайта (/index)
Между тегами head и /head
вставляю например
style
body.style14 #nav {стиль навигационной панели}
/style
тегу body прописываю id="dm1"
и сразу после тега вставляю скрип
Code

<script type="text/javascript">     
function setDynClass(a){
if(!arguments.length){var a=(a=document.cookie.match(/\bdyncss=([^;]*)/))&&a[1];if(!a)return''}
document.getElementById('dm1').className='style'+a;
var d=new Date();d.setFullYear(d.getFullYear()+1);
document.cookie=['dyncss=',a,';expires=',d.toGMTString(),';path=/;'].join('');return a}
setDynClass();     
</script>


Все остальное у меня находится в шаблоне Верхняя часть сайта (GLOBAL_AHEADER)
например жму на, т.е. он должне принять стиль
<div id="switcher-content">
...
<a rel="nofollow" href="#" class="navy" style="background-color: rgba(34,34,34, 0.8);">14</a>
...
</div>
В скрипт я добавил стоки
document.getElementById('dm1').className='style'+n;
setDynClass(n);
Code

<script type="text/javascript">
$('#switcher-content a').click(function() {
var n=$(this).html();
   if (n >= 0 && n <= 9){
$(this).addClass('active').siblings().removeClass('active');
$('#header').css({'background-image':'url(/design/bg-top'+n+'.jpg)',opacity:'0'}).animate({opacity:'1'},500);
}
...
   if(n=='14'){
   $('#nav').attr({'style':'','class':'blackNav'});
}
...
document.getElementById('dm1').className='style'+n;   
setDynClass(n);
return false;
});
</script>

Фактически переменная n ведь равна 14, следовательно елемент получает класс body.style14 и переменная n должна передаваться сприпту куков через setDynClass(n).

ну и в общем не работает. Он меняет стиль но не сохраняет его...

ЗЫ: если я сменю document.getElementById('dm1') на document.getElementByTagName('body') это будет тоже самое что и body id="dm1" только тут не надо уже будет прописывать id, а будет работать для всех body ?

Сообщение отредактировал RazieL - Вторник, 27.12.2011, 19:38
[39] likbezz [27.12.2011, 21:56]
RazieL,
Quote (RazieL)
ну и в общем не работает. Он меняет стиль но не сохраняет его...

Стили должны быть прописаны в CSS/
Code
#switcher-content a.active,body.style1 a.c1,body.style2 a.c2,body.style3 a.c3,body.style4 a.c4,body.style5 a.c5{color:#F0F;font-weight:700;}
#header-content{background-color:transparent;background-image:url(/_example/bg/patterns/patt8_0.jpg);background-repeat:repeat;background-position: left top;height:200px;width:100%;}
body.style1 #header-content{background-image:url(/_example/bg/patterns/patt8_1.jpg);}
body.style2 #header-content{background-image:url(/_example/bg/patterns/patt8_2.jpg);}
body.style3 #header-content{background-image:url(/_example/bg/patterns/patt8_3.jpg);}
body.style4 #header-content{background:-moz-linear-gradient(top,rgba(51,51,51,0.8),rgba(62,187,218,0.8));background:-webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51, 0.8)),to(rgba(62,187,218, 0.8)));background:-o-linear-gradient(top,rgba(51,51,51,0.8),rgba(62,187,218,0.8));}
body.style5 #header-content{background:-moz-linear-gradient(top,rgba(51,51,51,0.8),rgba(241,123,99,0.8));background:-webkit-gradient(linear,left top,left bottom,from(rgba(51,51,51,0.8)),to(rgba(241,123,99,0.8)));background:-o-linear-gradient(top,rgba(51,51,51,0.8),rgba(241,123,99,0.8));}


Смена стилей происходит не скриптом, а установкой класса.
Вот как должен выглядеть твой скрипт:
Code
<script type="text/javascript">
$('#switcher-content a').click(function() {
$(this).addClass('active').siblings().removeClass('active');
document.getElementById('dm1').className='style'+$(this).html();           
setDynClass(n);
return false;
});
</script>

Смотри пример, что, просто так выложил? - там осталось только поменять стили и всё готово...
...
[40] RazieL [29.12.2011, 03:27]
likbezz, Получилось... happy
Quote (likbezz)
Смотри пример, что, просто так выложил? - там осталось только поменять стили и всё готово...

естественно я смотрел все по примеру...
Очень долго пытался сделать с помощью document.getElementsByTagName('body'), в итоге не получилось... Оставил с document.getElementById('swdes')

Правда есть один нюанс
Как я говорил выше, у меня три элемента меняют класс и они независимы друг от друга, а в скрипте переменная только одна, так, что изменяется и остается только последний выбранный элемент
Code
<a rel="nofollow" href="#">9</a><br /> первый елемент (#header)
...
<a rel="nofollow" href="#" class="navy" style="background-color: rgba(62,187,218, 0.8);">10</a> второй елемент (#nav)
...
<a rel="nofollow" href="#" class="letter" style="background-color:#DD4B39; margin-left:2px;">16</a> третий елемен (a:link, a:active...)

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

Возможности реализации:
Я думал использовать массив
Code
<script type="text/javascript">
$('#switcher-content a').click(function() {
var arr = [n, n1, n2]
var temp
temp=$(this).html();
     if (temp >= 0 && temp <= 9){
$(this).addClass('active').siblings().removeClass('active');
$('#header').css({opacity:'0'}).animate({opacity:'1'},500);
document.getElementById('swdes').className='style'+temp;     
setDynClass(n);
return false;
}
if (temp >= 10 && temp <= 14){
document.getElementById('swdes').className='style'+temp;     
setDynClass(n1);
return false;
}
if (temp >= 15 && temp <= 16){
document.getElementById('swdes').className='style'+temp;     
setDynClass(n2);
return false;
});
</script>

Что-то типа этого...

Но вот здесь для меня темный лес, я не знаю где здесь записать массив, чтобы он запоминал все три элемента...
Code
<script type="text/javascript">       
function setDynClass(a){
if(!arguments.length){var a=(a=document.cookie.match(/\bdyncss=([^;]*)/))&&a[1];if(!a)return''}
document.getElementById('swdes').className='style'+a;
var d=new Date();d.setFullYear(d.getFullYear()+1);
document.cookie=['dyncss=',a,';expires=',d.toGMTString(),';path=/;'].join('');return a}
setDynClass();       
</script>


Сообщение отредактировал RazieL - Четверг, 29.12.2011, 03:32
[41] likbezz [29.12.2011, 05:20]
RazieL,
Quote (RazieL)
естественно я смотрел все по примеру...
Очень долго пытался сделать с помощью document.getElementsByTagName('body'), в итоге не получилось... Оставил с document.getElementById('swdes')

Почему не получилось???
Все отлично получается:
Code
document.getElementsByTagName('body')[0].className='style'+n;

- Просто нужно учитывать, что document.getElementsByTagName('') всегда возвращает массив элементов, даже если он всего один.
...

Quote (RazieL)
Правда есть один нюанс
Как я говорил выше, у меня три элемента меняют класс и они независимы друг от друга, а в скрипте переменная только одна, так, что изменяется и остается только последний выбранный элемент
т.е. если я выберу вначале сменить хедер, а потом цвет навигационной панели, то сохранится только цвет навигационной панели...

А-а, ты вот о чём ... Повесь двойной класс. ...

Quote (RazieL)
Возможности реализации:
Я думал использовать массив
Что-то типа этого...
Но вот здесь для меня темный лес, я не знаю где здесь записать массив, чтобы он запоминал все три элемента...

Чё-то ты намудрил как-то слишком .... Не понял твой скрипт.

А запоминать два (более) класса элементарно:
Code
<script type="text/javascript">
$('#switcher-content a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var n=this.rel,el=document.getElementById('dm1');
if(n>0&&n<6){
  var tmp='style'+n+' '+(el.className.split(' ')[1]?el.className.split(' ')[1]:'');
  $('#header-content').animate({opacity:0},10,function(){
   el.className=tmp;  
   setDynClass(tmp);
   $(this).animate({opacity:'1'},500);   
   });
}else{
   var tmp=el.className.split(' ')[0];
   el.className=tmp+' '+n;  
   setDynClass(tmp+' '+n);
};
return false;
});  
</script>

...

☑ Ну и пример, соответственно (Смена фона по клику №1 + gradient + redText)
...


...
[42] RazieL [29.12.2011, 13:01]
likbezz, Все легло красиво...
Два класса изменяются и вносятся в куки...

А чтобы он запоминал еще и третий класс, как я понял мне надо добавить в скрипт el.className.split(' ')[2] в var?
Я пробую разные комбинации, но что-то он не хочет работать...

Quote (likbezz)
Просто нужно учитывать, что document.getElementsByTagName('') всегда возвращает массив элементов, даже если он всего один.

Вот оно что biggrin

Сообщение отредактировал RazieL - Четверг, 29.12.2011, 13:03
[43] likbezz [29.12.2011, 13:43]
RazieL,
Quote (RazieL)
Вот оно что biggrin

... Да, вот так ... )

Quote (RazieL)
А чтобы он запоминал еще и третий класс, как я понял мне надо добавить в скрипт el.className.split(' ')[2] в var?

Да, типа.
Но, при трёх и более классах, наверное, лучше будет написать отдельную функцию, разбиваю их на массив, а потом вновь собирающую в строку. Массив - в куку, строку в атрибут класс.
... Но это ... не в этот раз ... уже скучно )

Добавлено (30.12.2011, 0:33:29)
---------------------------------------------

Quote (likbezz)
Но, при трёх и более классах, наверное, лучше будет написать отдельную функцию, разбиваю их на массив, а потом вновь собирающую в строку. Массив - в куку, строку в атрибут класс.

Или использовать replace и типовые названия классов:
Например:
Quote (Info)
для фона: - bg_img1, bg_img2, bg_img3 и тд.
для текста: - txt_style1, txt_blue, txt_red, ....
глобальные: main_style1, main_1024, main_1280 ...

и заменять регуляркой - искать вхождение в строку - по началу - до нижнего подчёркивания, и заменять именно то, что нужно.
... Это даже проще, но несколько ограничивает в именах классов.

Типа:
Code
<script type="text/javascript">
$('#switcher-content a').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var n=this.rel,obj=document.getElementById('dm1');
var isClassReplace=function(a,b,c){var rExp=new RegExp("\\b("+c+"\\w+)\\b","ig");
if(a.search(rExp)!=-1){return a.replace(rExp,c+b);
}else{return a+' '+c+b;}
};
if(n>0&&n<6){
    var tmp=isClassReplace(obj.className,n,'style');
    $('#header-content').animate({opacity:0},10,function(){
     obj.className=tmp;
     setDynClass(tmp);
     $(this).animate({opacity:'1'},500);     
     });
}
if(n=='Red'||n=='Green'){
     var tmp=isClassReplace(obj.className,n,'text');
     obj.className=tmp;
     setDynClass(tmp);
};
if(n=='Aqua'||n=='Beige'){
     var tmp=isClassReplace(obj.className,n,'fon');
     obj.className=tmp;
     setDynClass(tmp);
};
return false;
});    
</script>

...

☑ Примерчик (Смена фона по клику + gradient + Text + Fon)
...
[44] RazieL [29.12.2011, 22:10]
likbezz, Оке я подожду, а можешь пока посоветовать где почитать про document.getElementsBy(id, tag, class, что там еще есть), я находил еще про document.getElementByClass но говорят что не во всех браузерах работает...
Я так понял что когда он передает массивом например функция
document.getElementsByTagName('div')[1]
Code

<html>
<head></head>
<dody>
<div>1</div>
<div>2</div>
<div>3</div>
</body>

Он возьмет второй div
Quote (likbezz)
Но, при трёх и более классах, наверное, лучше будет написать отдельную функцию, разбиваю их на массив, а потом вновь собирающую в строку. Массив - в куку, строку в атрибут класс.

Т.е. по любому два скрипта будут немного изменены, а не только один?

Сообщение отредактировал RazieL - Четверг, 29.12.2011, 22:16
[45] likbezz [30.12.2011, 00:40]
RazieL,
Quote (RazieL)
likbezz, Оке я подожду, а можешь пока посоветовать где почитать про document.getElementsBy(id, tag, class, что там еще есть)

А что там читать? Всё просто...
document.getElementByClass - не работает в ИЕ ... Но наверняка у тебя и самого подозрения на это есть ))))
Всё остальное - как и написано - ищут по ID и тегу.
document.getElementsByTagName('*') - ищет всё ...
...

Quote (RazieL)
Он возьмет второй div

Да, отсчёт, как всегда,с нуля.

Quote (RazieL)
Т.е. по любому два скрипта будут немного изменены, а не только один?

Нет, первый остаётся неизменным - он получает строку, и запоминает её. Зачем там что-то менять?
Quote (likbezz)
Или использовать replace и типовые названия классов:
Например:
Quote (Info)
для фона: - bg_img1, bg_img2, bg_img3 и тд.
для текста: - txt_style1, txt_blue, txt_red, ....
глобальные: main_style1, main_1024, main_1280 ...

и заменять регуляркой - искать вхождение в строку - по началу - до нижнего подчёркивания, и заменять именно то, что нужно.
... Это даже проще, но несколько ограничивает в именах классов.

...
Полная версия сайта