Modernizr с cssSandpaper?
Я некоторое время пытался изо всех сил пытаться использовать функцию rotate (xdeg) для IE 8, 7 и 6, для этого я google и нашел cssSandpaper, но поскольку мне нужно загрузить 4 разных сценария, я хочу сделать это, только если это необходимо для этого im, используя modernizr im пытается что-то вроде этого:
<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>
my 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;
}
my js file (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
Он отлично работает на сафари, хром, опера, 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: [object HTMLScriptElement], но им известно, что используя этот способ я всегда буду загружать эти 4 скрипта, даже если они не нужны, и это не цель mi, но поскольку я начинаю с modernizr и javacript, чтобы быть hones, я не знаю, что происходит D: и почему, когда я загружаю скрипты, используя nope: [''] от modernizr не работает. кто-нибудь знает способ решить это?... им жаль мой английский не мой первый язык
edit: я немного исследовал этот объект HTMLScriptElement и предположил, что ссылаюсь на тег script, я полагаю, что когда я загружаю js файл с помощью nope: из modernizr что-то изменится, и этот объект станет null, так как больше не загружен внутри тега script... но im все еще в той же проблеме... как я могу это решить?:/
jsFiddle Test Modernizr
jsFiddle Test без Modernizr
Ответ:
Я закончил использование , если IE IE 9, чтобы загрузить сценарии с песочной бумагой, которые он выполнил.
Ответы
Ответ 1
Я попытался решить это с помощью другого и более простого подхода. Это сработало для меня, и я хочу, чтобы он тоже работал на вас.
Я включил 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 или любое другое стандартное веб-преобразование.
Ответ 2
ОК, ты купишь меня, сидя на этом, как полчаса
есть ошибка в EventHelpers.js в функциональной строке init
в строке init
, там есть инструкция cc_on, поэтому только т.е. прочитает ее.
теперь он создает тег script во время выполнения, тэг не был создан, поэтому он равен нулю.
и код прерывается!
i модифицировал EventHelpers.js и устранил проблему.
в исходном коде введите тег script с помощью document.write
я изменяю его на document.createElement
и, похоже, не работает никаких ошибок в consloe
jsfiddle:
http://jsfiddle.net/5xdDG/3/
теперь он действительно должен вращать div даже в ie7 или 6, потому что в jsfiddle я не вижу его вращением?
и я сожалею, английский не мой первый язык;)
Ответ 3
Кажется, что один script должен загружаться после другого.
Попробуйте использовать этот script:
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");
}
});
}
});
}
});
}
});
};