Новая статья - Переключение css стилей (оформления) "на лету"

[support 447]

В данной статье я покажу, как с помощью библиотеки jQuery и css стилей можно сделать переключение внешнего вида магазина "на лету", т.е. внешний вид будет переключаться моментально, без каких-либо перезагрузок страницы.

Сразу покажу результат, что б было понятно о чём речь.

Посмотрите пример на http://vamshop.ru/demo, по центру, выберите один из стилей (dafeult,style1,light,helius) и посмотрите, как изменится оформление магазина.

Читать дальше - http://vamshop.ru/support/modules/smartsection/item.php?itemid=26

[matvey 0]

Уже думал менять дизайн своего сайта, но тут появилось такое...

Теперь будет 2 дизайна ... для начала!

Спасибо, Саша!

Есть такая небольшая статья  http://neveragainblog.com.ua/archives/56

В свою очередь вопрос - можно ли реализовать такое для нашего магазина - переключать автоматически на другой stylesheet в зависимости от браузера посетителя. Этот IE уже забодал наверное весь МИР (в том числе и меня), но по статистике Google Analitics для моего сайта 71% посетителей используют IE.

[support 447]

Можно конечно, ты ж привёл ссылку в которой написано как раз что писать, что б стиль был для ie и для других браузеров.

Вот приведённые коды добавляй в /includes/header.php

Только путь правильно указывай к css файлам, т.е. например к IE укажи путь к stylesheet.css

Для оперы например к стилю helius (переименуй в helius.css и укажи путь до него) и т.д.

Пока что IE всё равно основной браузер и наверное это будет довольно долго ещё, всё равно приходится ориентироваться на него и учитывать его глюки в написании тех же css стилей.

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

Я вообще стараюсь по-тихоньку все эти возможности показывать в своих небольших заметках в разделе Статьи - http://vamshop.ru/support/modules/smartsection/

Возможностей очень и очень много благодаря силе css, просто не все ещё понимают, что css - это огромные возможности.

А благодаря тому, что шаблон vamshop - это чистый xhtml + css, в html коде нет никакого оформления, т.е. это именно xhtml разметка, то с помощью css можно делать очень и очень многое, а вот это переключение "на лету" - хорошая вещь, можно придумать много интересных и полезных вещей для посетителей и причём все это делается через css, т.е. не приходится лазить в html и уж тем более в php.

[matvey 0]

Да, согласен с тобой - возможности css почти безграничны!

Попробовал сделать так как в этой статье - есть огромный минус - придется прописывать подобные условия для всех популярных браузеров. Пошел другим путем, по мотивам другой статьи http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

Если заходит пользователь с IE7, IE6 и ниже - подключается стиль helius.css  .

А если с другого браузера -то stylesheet.css .

Что-бы не мудрить просто меняется в includes/header.php:

<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" />

На:

<!--[if lte IE 6]>

<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/helius.css'; ?>" />

<![endif]-->

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/helius.css'; ?>" />

<![endif]-->

<![if !IE]>

<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" />

<![endif]>

Проверял на IE, Opera, Mozilla/

Вся эта кухня описана также на сайте Майкрософта, так что вроде-бы не является хаком.

[support 447]

А в чём именно глюк в IE?

Может дашь ссылку на магазин, я гляну, наверняка можно решить средствами css и не плодить своего css файла для отдельного браузера.

[matvey 0]

Да глюк я уже частично исправил в http://vamshop.ru/support/modules/smf/index.php?topic=292.new;topicseen#new, до этого вообще была торба. Но все равно хочется видеть полосу прокрутки при некотором сужении экрана и что-бы середина не падала и при этом не фиксировать ширину сайта пикселами, а была-бы 100%.

Адресок щас постараюсь скинуть в личные

[support 447]

Понятно.

Если я правильно понял, тебе просто для div#container указать min-width, это будет нормально работать в Mozilla и Opera, а вот IE как я знаю с min-width не очень дружит.

Нужно в инете найти хак, есть всякие, вроде бы есть пара строк JavaScript кода, с которым min-width нормально отображется.

Вот просто указывашеь min-width и всё, т.е. минимальная ширина сайта.

Если разрешение экрана меньше min-width появляется полоса прокрутки, если больше - магазин растягивается по ширине на 100%.

[matvey 0]

Да я вот нашел этот скрипт http://www.doxdesk.com/software/js/minmax.html

Я так понял нужно его подключить в header.php

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

[support 447]

Да, перепиши js файл в папку /jscript магазина (просто что б js файлы не были раскиданы по всему магазина, я для js скриптов завёл отдельную папку) и добавь строку в /includes/header.php

[matvey 0]

Да спасибо Саша, разобрался, но только при малом min-width подглючивает, когда ставлю 1024px - появляется нормальная полоса прокрутки.

[support 447]

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

[matvey 0]

Окей поищу еще, если будет что стоящее - отпишусь!

[support 447]

Хорошо, спасибо.

[matvey 0]

Кое что нашел - на локалке работает и появляется полоса прокрутки. На сервер не забрасывал. Используются только дивы. http://pokrovskii.com/2007/10/16/nekotoryie-momentyi-emulyatsii-min-width-i-max-width-dlya-ie-6/

Смотреть второй вариант. Первые минусы, а может и плюсы - нельзя скопировать текст из страниц сайта обычным способом . Ну и применение * html вроде-бы тоже не приветствуется, но вроде как работает и без них.

[support 447]

Спасибо, сохранил себе ссылки.

На самом деле в интернете полно подобных ссылок, да и в основном решение везде одно и тоже.

[matvey 0]

Да, в навальном виде. Много да дурного. В основном это решения с помощью expression , что точно не соответствует стандартам css.

Может кому понадобится и пригодится , но я точно себе буду подгонять и ставить такое дело. Просто я таблиц не знаю и тем более даже не понимаю как они фунциклируют  ;D

[support 447]

Не знаешь таблиц?

Однако... :)

Хотя это наверное даже хорошо, если ты с самого начала уже учишь css + div.

[matvey 0]

Не знаешь таблиц?

Однако... :)

Хотя это наверное даже хорошо, если ты с самого начала уже учишь css + div.

Да , представь себе, не знаю  :) (один раз продолбался несколько дней с ними и забросил, надеюсь, навсегда), но не стесняюсь этого, ведь за css + div - будущее, поэтому я потихоньку разбираюсь и двигаюсь в этом направлении. Я давал тебе ссылку на сайт, так в этом дизайне из картинок используется только логотип (шапка), если не считать кнопок - все остальное - дивы и цсс. ;D

Интересные шаблоны есть на:

http://www.oswd.org

http://www.mezzoblue.com/zengarden/alldesigns/

http://www.csszengarden.com/

Ты уже что-то из csszengarden.com приводил на форуме. Интересный ресурс http://www.oswd.org, хоть и дизайн у него несуперский, но решения есть неплохие!!!

[matvey 0]

Кстати только что просмотрел кода одного из самых лучших порталов Украины - i.ua . Так там походу парни тоже борются с IE, пишут для него отдельные css  ;D

[support 447]

Спасибо за ссылку, кое что из них уже видел.

Нет, я ж не говорю, что это плохо, совсем даже наоборот.

Но всё равно таблицы нужно знать ведь, для тех же табличных данных нет смысла городить кучу div'ов или ещё как-то изворачиваться.

А то те кто привык на таблицах, я, к примеру, ещё свой первый сайтик (ещё в школе, домашнюю страницу) делал в 1997 году, тогда кроме таблиц ничего и не было и css никто не использовал совсем, да и вообще сайтов на русском языке было очень и очень мало, помню даже в каком-то журнале был разворот со списком всех .ru доменов, там наверное лист был формата a4 и на нём все домена в зоне ru помещались, а сейчас уже больше 1 млн. доменов :)

Так вот по началу сложно переучиваться на div + css, но когда понятен смысл, то получается гораздо легче и проще чем на таблицах.

[PlazaUA 0]

В данной статье я покажу, как с помощью библиотеки jQuery и css стилей можно сделать переключение внешнего вида магазина "на лету", т.е. внешний вид будет переключаться моментально, без каких-либо перезагрузок страницы.

Читать дальше - http://vamshop.ru/support/modules/smartsection/item.php?itemid=26

Ссылка мортвая. можно оживить статью?

[support 447]

Сейчас ссылка такая - http://vamshop.ru/node/95

[Optimist 0]

хотелось почитать и попробовать,но все ссылки мёртвые

[support 447]

Вот текущая ссылка - http://vamshop.ru/article_info.php/articles_id/2/article/Pereklyuchenie-css-stilei--oformleniya---na-letu-

Вот пример работы - http://demo.vamhost.ru

[Optimist 0]

пробежал по ссылкам,описание прочитал,интересно,ссылка (Скачиваем файл http://vamshop.ru/support/uploads/vam/styleswitch.js) скачать скрипт не работает,переадресует на вамшоп

и на демо не смог найти кнопку переключения стилей :'(