[Ликбез]

Форма входа
Логин:
Пароль:

Меню сайта

Тема закрыта

Скрипты и коды для юкоз - Форум аццкого кодера » Вопросы/ответы на тему JQuery и JScript на сайтах в uCoz » Исменение стиля элемента, в зависимости от разрешения экрана

Исменение стиля элемента, в зависимости от разрешения экрана
[1] likbezz [07.05.2010, 06:36]
Всё расписывать сейчас не хочу, так что вот вам «чистый» код.

Если кому-то нужно что-то «лично под себя» пишите, напишу «лично вам» ..

Это «общий вариант кода», естественно, его можно сократить, если писать, «под себя» ...

Java Script (определяем разрешение и назначаем переменные)

Code
<script type="text/javascript">
<!--
var x,y;
// общий синтаксис
if (self.innerHeight) {
    x = self.innerWidth;
    y = self.innerHeight;
// IE 6 Strict Mode
} else if (document.documentElement && document.documentElement.clientHeight) {
    x = document.documentElement.clientWidth;
    y = document.documentElement.clientHeight;
// Остальные версии IE
} else if (document.body) {
    x = document.body.clientWidth;
    y = document.body.clientHeight;
}
//-->
</script>

Java Script (определяем то или иное действие при том или ином результате)

Code
<script type="text/javascript">
document.write('<style>');
if (x <= 800) {document.write('#clientWidth{background:url(/_example/rotator/psBg.gif);width:700px;}');}
if (x >= 800 && x < 1000) {document.write('#clientWidth{background:url(/_example/rotator/psBg-e.gif);width:900px;}');}
if (x >= 1000 && x < 1200) {document.write('#clientWidth{background:url(/_example/rotator/psBg-b.gif);width:1100px;}');}
if (x >= 1200) {document.write('#clientWidth{background:url(/_example/rotator/psBg-g.gif);width:1500px;}');}
document.write('<\/style>');
</script>

Разбил скрипт на две части, исключительно для удобства «вникания» ... Да ... некоторым это требуется ...
Кому всё понятно, скрипт объединяем, и вставляем между </head> и </head>, как ни странно ... Хотя, можно и в другое место, главное, до элемета, к которому пишем скрипт ...

Скриншот:

Файлы:
Пример ... (сама страница ... с примером ...)

P.S. Пожелания и вопросы сюда, а не в личку ...

Flesh

Прикрепления: 7173682.png (14.1 Kb)
[2] likbezz [09.05.2010, 06:12]
... Свою доработку скрипта предложил SerPaladin (пост#91)

Вот его версия:

fflesh, я тут над скриптом твоим помучался и вот, что получилось, само идеально получилось с тегами 'x' и 'y' вот смотри:

Code
<script type="text/javascript">
document.write('<style>');
if (x <= 1000) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/800x600.jpg);width:'+x+'px; height:'+y+'px;}');}
if (x >= 1000 && x < 1200) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1024x768.jpg);width:'+x+'px; height:'+y+'px;; }');}
if (x >= 1200 && x < 1480) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1440x900.jpg);width:'+x+'px; height:'+y+'px;}');}
if (x >= 1441) {document.write('#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1600x1200.jpg);width:'+x+'px; height:'+y+'px;}');}
document.write('<\/style>');

вот пример:

Quote
http://denis-osadchiy.at.ua/

Всё работает идеально, только вот вопросс есть можно ли убрать повторение картинки (работает оно только для експлорера) тоесть картинка повторяется по вертикали

[3] likbezz [09.05.2010, 06:15]
SerPaladin,
Quote (SerPaladin)
Всё работает идеально, только вот вопросс есть можно ли убрать повторение картинки (работает оно только для експлорера) тоесть картинка повторяется по вертикали

... Блин ... ПлюсеГ тебе в репу ... ヅ ... чёйто я о таком варианте даж не подумал ... - я про «width:'+x+'px;» ... наверно, потому, что вопрос был поставлен иначе ...
А про повтарение ... то есть «repeat», - конечно:
Quote (Code)
#clientWidth{background:url(http://denis-osadchiy.at.ua/Fon/1/1600x1200.jpg) no-repeat top center;width:'+x+'px; height:'+y+'px;}

Где:
no-repeat - Запрет на «повторение»;
top center - Положение по вертикали и горизонтали;

Удачи...

Flesh



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