Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как задать условие для Оперы (https://javascript.ru/forum/jquery/26657-kak-zadat-uslovie-dlya-opery.html)

Петрович 16.03.2012 19:01

Как задать условие для Оперы
 
Доброго дня! Помогите начинаещему....Поставил на сайт easy-accordion где в скрипте прописывается отдельно для каждого браузера ротация (поворот) текста и фоновой картинки. Вот кусок скрипта:
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} .easy-accordion dt,.easy-accordion dd{position:absolute} .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} .easy-accordion dd.active{opacity:1;} .easy-accordion dd.no-more-active{z-index:2;opacity:1} .easy-accordion dd.active{z-index:3} .easy-accordion dd.plus{z-index:4} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Для оперы правила нет и текст с фоновым рисунком вместо ротации на 90 отображается горизонтально. Во всех остальных браузерах скрипт работает корректно. Можно ли прописать правило для оперы и как? помогите решить кто знает....жалко сносить сделанное :( :(

Раед 16.03.2012 20:32

-o-transform: rotate(90deg);

неуверен, но попробовать стоит

Петрович 16.03.2012 21:36

Цитата:

Сообщение от Раед (Сообщение 163546)
-o-transform: rotate(90deg);

неуверен, но попробовать стоит

Спасибо!...работает. Только в моем случае -o-transform: rotate(-90deg); правда сам текст и фон под него ушел вверх, удалось выровнять следующим -o-transform-origin: 195px 0px ; НО блин сейчас закладки гармошки почти по центру окна...как сместить влево? добавить 195px 0px 0px 0px и ловить нужное методом тыка?

Петрович 16.03.2012 23:30

методом тыка не получается :( как сместить влево никто не скажет? ширина окна 585x195 Смещать вверх-вниз удается меняя значения 195px 0px, а вправо-влево никак :cray:

melky 16.03.2012 23:34

-o-transform: translateX(50px);

Петрович 17.03.2012 00:18

не получается :( куда как лучше воткнуть? пробовал несколько вариантов, либо поворот изчезает, либо ничего не меняется...сейчас вот такой код при котором по высоте текст и картинка которые поворачиваются, выровнены, но закладки гармошки формируются в центре окна:
* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
 .easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0} .easy-accordion dt,.easy-accordion dd{margin:0;padding:0} .easy-accordion dt,.easy-accordion dd{position:absolute} .easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Opera */ -o-transform: rotate(-90deg); -o-transform-origin: 195px 0px;
 /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;} .easy-accordion dd{z-index:1;opacity:0;overflow:hidden} .easy-accordion dd.active{opacity:1;} .easy-accordion dd.no-more-active{z-index:2;opacity:1} .easy-accordion dd.active{z-index:3} .easy-accordion dd.plus{z-index:4} .easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Opera */ -o-transform: rotate(-90deg);

melky 17.03.2012 00:21

их перечислять надо через пробел.

пример для вебкитов :
<img src="http://javascript.ru/forum/image.php?u=12584&dateline=1328048771" style="*!*-webkit-transform: rotate(90deg) translateX(250px) scale(4)*/!*">​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​


в вашем случае,
-o-transform: rotate(-90deg) translateX(50px);

Петрович 17.03.2012 00:29

так и делал....перемещения нет, поднялось вверх на 50px...может Y?

Петрович 17.03.2012 00:37

YES!!!!! :dance: Y ставим и минусом поскольку все перевернуто:) Вот итог
/* Opera */ -o-transform: rotate(-90deg) translateY(-195px); -o-transform-origin: 195px 0px;
...может кому пригодиться кто будет работать с данным скриптом.
ВСЕМ ОГРОМНОЕ СПАСИБО!!! Форум это сила!:)


Часовой пояс GMT +3, время: 08:14.