1 (05.01.2008 22:10 отредактировано trijin)

Тема: просмотр стилей при выборе в профиле (2 варианта). Release.

[size=24]Вариант №1: Компактный. Работает в FF и Opera. в IE ничего не делает.[/size]

[size=16]файл: profile.php[/size]
ищем:

<select name="form[style]">

заменяем на:

<select name="form[style]" onchange="if(navigator.userAgent.indexOf('MSIE') == -1) {document.getElementById('styleLink').href='style/'+this.value+'.css';}">

[size=16]файл: header.php[/size]
ищем:

<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />

заменяем на:

<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" id="styleLink" />

Минусы и плюсы:

  • [li]минус : не работает в IE[/li][li]плюс : компактен, экономит трафик при выборе себе стиля[/li]


[size=24]Вариант №2: Универсальный.[/size]

[size=16]создать файл: include/styles.js[/size]
с кодом:

var styleWarnShowing=false;
var lastStyle=-1;
function changeStyle(title,text) {
  var i, a, main;
  var j=-1;
  for(i=0; i< document.getElementsByTagName("link").length; i++) {
    a=document.getElementsByTagName("link")[i];
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      j++;
      a.disabled = true;
      if(a.getAttribute("title") == title) {
        if(navigator.userAgent.indexOf('MSIE') != -1 && j>30) {
          if(lastStyle==-1) document.getElementsByTagName("link")[i-j].disabled = false;
          else document.getElementsByTagName("link")[lastStyle].disabled = false;

          if(!styleWarnShowing) {
            alert(text);
            styleWarnShowing=true;
          }

          break;
          }
        a.disabled = false;
        lastStyle=i;
      }
    }
  }
}

[size=16]открыть файл: header.php[/size]
найти:

<link rel="stylesheet" type="text/css" href="style/<?php echo $pun_user['style'].'.css' ?>" />

заменить на:

<?php
if (in_array(basename($_SERVER['PHP_SELF']), array('profile.php')) && $section == 'display')
{
    $styles = array();
    $d = dir(PUN_ROOT.'style');
    while (($entry = $d->read()) !== false)
    {
        if (substr($entry, strlen($entry)-4) == '.css')
            $styles[] = substr($entry, 0, strlen($entry)-4);
    }
    $d->close();
    
    echo '<link rel="stylesheet" type="text/css" href="style/'. $pun_user['style'].'.css" title="'. $pun_user['style'].'" media="screen" />'."\n";
    // вывод основного стиля первым обусловлен особеностями IE
    if (count($styles) > 1)
    {
        natsort($styles);
        while (list(, $temp) = @each($styles))
        {
            if ($pun_user['style'] != $temp)
                echo '<link rel="alternate stylesheet" type="text/css" href="style/'. $temp.'.css" title="'. $temp.'"  media="screen" />'."\n";
        }
        echo '<script type="text/javascript" src="include/styles.js"></script>';
    }
} else 
    echo '<link rel="stylesheet" type="text/css" href="style/'. $pun_user['style'].'.css" title="'. $pun_user['style'].'" media="screen" />'."\n";

?>

[size=16]открыть файл: profile.php[/size]
найти:

<select name="form[style]">

заменить на:

<select name="form[style]" onchange="changeStyle(this.value,<?php echo "'".addslashes(htmlspecialchars($lang_profile['Only 30 Style']))."'" ?>);">

[size=16]открыть все файлы: lang/[Ваши языки]/profile.php[/size]
найти:

'Ban redirect'                =>

добавить ПЕРЕД:

'Only 30 Style'=>'IE может показать только первые 30 стилей и установленный в настройках (повторно это сообщение выводиться не будет)',

Для каждого языка на своем языке. (у меня приведено для папки "Russian")

Минусы и плюсы:

  • [li]минус : в меню "Отображения" подгружаются все файлы стилей (в IE только выбранный + первые 30 из остальных) !!!трафик!!![/li][li]плюс : Даже с учетом подгрузки всех файлов стиля Выбор занимает меньше трафика чем применение стиля и последующий просмотр. (и снова изменение и снова просмотр)[/li][li]минус : ...но больше, чем если точно знаешь на какой хочешь переключить[/li][li]плюс : работает в IE (только на первых 30 из списка)[/li]


p.s.: отдельное спасибо за помощь в нахождении решений hcs

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

2

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

потестил на различных браузерах: работает только в Лисе и Опере. sad
IE (7) применяет только общую ширину и игнорирует все остальное.

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

3

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

Может для ИЕ попробовать это решение - forum.sources.ru/index.php?showtopic=217626 ?

Сайт hcs

Поделиться

4

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

попробовал разные вариации. И эту тоже. в целом добиться конечно можно что бы применялись. и избегая удвоения контента (которые были у меня при одном из удачных применений стилей), но даже тогда оно того не стоит. потому как даже если и применяется, то все равно криво. большая часть со сдвигом. наследуя остатки прошлого (хотя он и полностью затирался). Оно того не стоит smile
Было решено что "IE не поддерживает данную возможность" поэтому просто в onchange надо добавить проверку на IE
Если IE, то ничего не делать. Это лучшее что IE способен выполнить в данной ситуации.

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

5

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

Видимо к стилям надо ещё прикладывать скриншот, чтобы было сразу видно, что к чему (как в вордпрессе).

Сайт hcs

Поделиться

6

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

ну можно iframe с заготовкой (которая у меня даже есть) но как-то это не изящно.

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

7

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

Дык в код простые граждане лезть не будут, многим из них слово iframe ни о чем не скажет, так что вполне пригодный вариант. Ну а кто в своих браузерах это дело отключил - тем можно новое окно открыть (попап например, который ты не любишь)

Сайт hcs

Поделиться

8

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

Вот какое есть решение:
www.ecst.csuchico.edu/~bertucci/ … itcher.htm
А это с использованием jQuery:
www.kelvinluck.com/article/switc … ith-jquery

Сайт hcs

Поделиться

9

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

hcs пишет:

Вот какое есть решение:
www.ecst.csuchico.edu/~bertucci/ … itcher.htm

то что у мя руки кривые раньше не жаловались, но этот метод никак не работает ни в FF ни в IE7

hcs пишет:

А это с использованием jQuery:
www.kelvinluck.com/article/switc … ith-jquery

подключать jQuery не вижу смысла. и так при указании альтернативных силей IE грузит все эти стили, так еще и фреймворк подгружать...

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

10

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

Я не остановился на своих опытах.
С jQuery все же работает. Значит и без него можно добиться. НО!!!
Конечно же "Но" гладко все не проходит.
И выпендрился опять IE.
У меня на форуме на данный момент стоит более 50 стилей. (о том то все браузеры их разом подгружают, пропустим все же только в одном месте). Опера и FF прекрасно с этим справляются. А вот IE (богатая на выдумки программа) имеет ограничение на подгрузку только 30 альтернативных стилей. т.е. перестает работать после 31 в списке стиля. (30 альтернативных и 1 основной)
Я не в курсах почему именно 30.

Так какой вариант все же оставить в релизе? на данный момент варианты:

  • [li]миниальный (изменение двух строк и ограничение на IE)[/li][li]с jQuery с предупреждением что все стили подгружаются (траффик!) и в IE только первые 30 (Внимание экономля трафика!)[/li][li]ну либо же оба[/li]

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

11

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

trijin
К слову, я буду включать в сборкку jQuery...

Добавлено спустя     1 минуту  :
Кстати не понимаю почему все стили подгружаются? Можно же динамически обновляться?

Сайт hcs

Поделиться

12 (05.01.2008 21:52 отредактировано trijin)

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

hcs пишет:

Кстати не понимаю почему все стили подгружаются? Можно же динамически обновляться?

проблема в следующем, <head> в IE - readOnly, потому и, указанный мною способ в первом посте, не работает.
Для этого мы прибегаем к реализации в которой Все стили прописаны заранее, как альтернативные. И переключаем в зависимости от значения <select> выбора стиля.
Все* альтернативные стили подгружаются сразу. (*у IE "Все" - это 30) и между ними возможно переключение. (кстати, все же сделал без jQuery)
Но даже при подгрузке Всех стилей по трафику выходит меньше чем проглядывать все эти стили через изменение настроек.

Я решил выложить оба варианта с ограничением ошибок. Думаю к утру будет готово.

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться

13

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

trijin пишет:

проблема в следующем, <head> в IE - readOnly

Странно, я сейчас реализую modalBox, который в <head> добавляет для себя стиль, и специальный хак для ие:

'<!--[if lte IE 6]><style type="text/css">#lightbox {position: absolute;}</style><![endif]-->

И я не заметил проблем, по крайней мере в ИЕ6 стили добавляются.

Сайт hcs

Поделиться

14

Re: просмотр стилей при выборе в профиле (2 варианта). Release.

Релиз готов.
Первый пост изменен.

hcs пишет:

И я не заметил проблем, по крайней мере в ИЕ6 стили добавляются.

стили во внутрь через cssRules и DOM кое как редактируются или через innerHTML+='<style>'+...+'</style>' - тоже применяются
а подгружаемые не вначале файлы IE не воспринимает, точнее воспринимает частично. Берет из них только размеры (слоев, бордюров), а цвета, позиционирование и бекграунды - игнорирует.

hmm

trijin.ru/forum/viewforum.php?id=10 пол года в дауне - скоро вернется =)

Поделиться