Модернизр с cssSandpaper?

Я боролся некоторое время, пытаясь использовать функцию поворота (xdeg) в IE 8, 7 и 6, для этого я некоторое время гуглял и нашел cssSandpaper, но так как мне нужно загрузить 4 разных скрипта, я хочу сделать это только Если это необходимо для этого я использую Modernizr я пытаюсь что-то вроде этого:

<head>

        <link rel="stylesheet" href="stilos/estilo.css" />
        <script src="scripts/modernizr.custom.19387.js"></script>
        <script src="scripts/jquery-1.8.1.js"></script>
        <script src="scripts/misfallbacks.js"></script>
</head>

<body>
    <div id="acerca"><a href="#">Acerca de mi</a></div>
</body>

мой файл CSS (estilo.css):

#acerca{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    -sand-transform:rotate(90deg);
    position: relative;
    top: -233px;
    left: 462px;
    width: 123px;
    height: 23px;
    z-index:100;
}

мой файл js (misfallbacks.js)

Modernizr.load({
        test:Modernizr.csstransforms,
        nope:['transformie/EventHelpers.js/','transformie/cssQuery-p.js','transformie/sylvester.js','transformie/cssSandpaper.js']

    );//Fin de monernizr on load

Он отлично работает на Safari, Chrome, Opera, Firefox и IE9, но когда я пробую IE8 или IE7, я получаю следующую ошибку на консоли
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
Я добавил console.log, чтобы попытаться выяснить, что происходит, и перешел к этой строке, вот она (EvenHelpers.js):

me.addEvent = function(obj, evType, fn){
       console.log(obj);//I've added this to try to figure out what is going on
        if (obj.addEventListener) {........//here is the error

при следующем запуске я снова проверил консоль пилой это LOG: null Я не эксперт по javascript, поэтому я не уверен, что происходит, но я попробую что-то другое и добавил cssSandPaper с помощью тега script следующим образом:

<head>

    <link rel="stylesheet" href="stilos/estilo.css" />

    <script src="scripts/modernizr.custom.19387.js"></script>
    <script src="scripts/jquery-1.8.1.js"></script>
    <!--<script src="scripts/misfallbacks.js"></script>-->  
    <script src="transformie/EventHelpers.js"></script>
    <script src="transformie/cssQuery-p.js"></script>
    <script src="transformie/sylvester.js"></script>
    <script src="transformie/cssSandpaper.js"></script>
 </head>

к моему удивлению, работал как шарм, и вот так у меня есть функция поворота даже в IE7 и IE8, и консоль говорит это сейчас LOG: [объект HTMLScriptElement], но я знаю, что используя этот способ, я всегда буду загружать эти 4 скрипта, даже когда они не нужны, и это не моя цель, но так как я начинаю с модернизатора и javacript, чтобы быть хонами, я понятия не имею, что происходит на D: и почему, когда я загружаю скрипты, используя nope:[''] из modernizr не работает, кто-нибудь знает способ решить это? ... извините за мой английский не мой первый язык

редактировать: я провел небольшое исследование этого объекта HTMLScriptElement и предположил, что он ссылается на тег скрипта, я полагаю, что когда я загружаю файл js с nope: от modernizr что-то меняется, и этот объект становится нулевым, так как больше не загружается внутри тега скрипта... но я все еще в той же проблеме... как мне решить это?: /

jsFiddle Test Модернизр

Тест jsFiddle без Модернизра

Ответ: в итоге я использовал if lt IE 9 для загрузки скриптов наждачной бумаги, он выполнил свою работу

Источник

3 ответа

Решение

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

Я включил IE9.JS (js, который позволяет браузерам IE <9 вести себя как соответствующие стандартам IE9 +). Вы можете посетить эту ссылку, чтобы узнать, как это сделать. http://code.google.com/p/ie7-js/

Затем я немного изменил ваш CSS estilo.css следующим образом. Я добавляю следующий стиль в ваше определение стиля #acerca.

filter:'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';

Это сработало. Единственная проблема заключается в том, что этот вид преобразования не так удобен для чтения, как -ms-transform или любое другое стандартное веб-преобразование.

Источник

Хорошо, вы покупаете меня, я размещаю на этом, как полчаса, есть ошибка в EventHelpers.js в init В строке 445 функции есть оператор cc_on, так что только ie будет читать его.

теперь он создает тег сценария во время выполнения, и тег не был создан, поэтому он равен нулю. и код сломан!

я изменил EventHelpers.js и исправил проблему. Исходный код напишите тег сценария с document.write я изменил это на document.createElement и, кажется, не работает никаких ошибок в консло

jsfiddle: http://jsfiddle.net/5xdDG/3/

теперь он действительно должен вращать div даже в ie7 или 6, потому что в jsfiddle я не вижу его повернутым?

и мне жаль, английский не мой родной язык;)

Источник

Кажется, что один скрипт должен загружаться после другого.

Попробуйте с помощью этого скрипта:

if (!Modernizr.csstransforms){
    Modernizr.load({
        load: 'transformie/EventHelpers.js',
        complete: function () {
            console.log("loaded EventHelpers");

            Modernizr.load({
                load: 'transformie/cssQuery-p.js',
                complete: function () {
                    console.log("loaded cssQuery");
                    Modernizr.load({
                        load: 'transformie/sylvester.js',
                        complete: function () {
                            console.log("loaded sylvester");

                            Modernizr.load({
                                load: 'transformie/cssSandpaper.js',
                                complete: function () {
                                    console.log("loaded cssSandpaper");
                                }
                            });

                        }
                    });
                }
            });

        }
    });

};
Источник
Другие вопросы по тегам