2012-09-20 9 views
13

Przez jakiś czas próbowałem mieć funkcję obracania (xdeg) na IE 8, 7 i 6, przez jakiś czas google i znalazłem cssSandpaper, ale ponieważ muszę załadować 4 różne skrypty, które chcę zrobić to tylko wtedy, gdy to konieczne do tego im przy modernizr Próbuję coś takiego:Modernizacja z cssSandpaper?

<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> 

mój plik 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; 
} 

moim pliku 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 

Działa świetnie na safari, Chrome, Opera, Firefox i IE9, ale gdy próbuję na IE8 lub IE7 pojawia się następujący błąd na konsoli
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
dodałem console.log, aby spróbować dowiedzieć się, co było dzieje i udał się do tej linii to jest tutaj (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 

na następnym biegu sprawdziłem ponownie konsolę piłę to LOG: null, nie jestem ekspertem o JavaScript, więc nie jestem pewien, co jest dzieje się, ale próbuję czegoś innego i dodałem cssSandPaper za pomocą znacznika script: tak:

<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> 

Ku mojemu zaskoczeniu zadziałało jak urok, i tak to mam funkcję obracania nawet w IE7 i IE8, a konsola powiedzieć to teraz LOG: [obiekt HTMLScriptElement] ale jestem świadomy, że używając tego sposobu będę zawsze ładowanie tych 4 skryptów, nawet jeśli nie są one konieczne i nie jest to celem, ale ponieważ zaczynam od modernizr i javacript na hones, nie mam pojęcia, co się dzieje D: i dlaczego kiedy ładuję skrypty używając nope: [' "] od modernizmu nie działa. ktoś wie, jak to rozwiązać? ... przykro mi, że mój angielski nie jest moim pierwszym językiem

edytuj: Zrobiłem trochę badań na temat tego obiektu HTMLScriptElement i jego przypuszczalnie odwołać się do tagu skryptu Przypuszczam, że po załadowaniu pliku js z nope: from modernizr coś się zmieniło i obiekt ten stał się pusty, ponieważ nie jest już ładowany wewnątrz znacznika skryptu ... ale nadal mam ten sam problem ... jak to rozwiązać? :/

jsFiddle Test Modernizr

jsFiddle Test without Modernizr

Odpowiedź: skończyło się używając jeśli lt IE 9 załadować skrypty papierem ściernym to swoją robotę

+1

Czy możesz dodać jsfiddle? – armonge

Odpowiedz

4

starałem się rozwiązać ten problem z innej i łatwiejszego podejścia. To zadziałało dla mnie i chciałbym, żeby to działało również dla ciebie.

Dołączyłem IE9.JS (js, który sprawia, że ​​IE < 9 przeglądarek zachowuje się jak IE9 + zgodność z normami). możesz odwiedzić ten link, aby dowiedzieć się, jak to zrobić. http://code.google.com/p/ie7-js/

Następnie nieznacznie zmodyfikowałem Twój CSS estilo.css w następujący sposób. Dodaję następujący styl do definicji stylu # acerca.

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

Zadziałało. Jedynym problemem jest to, że ten rodzaj transformacji nie jest tak czytelny jak -ms-transform ani żadna inna standardowa transformacja sieci.

+0

To również działa, ale skończyło się na używaniu załadowanie skryptów papieru ściernego, który wykonał zadanie również tutaj jest strona, jeśli ktoś chce to sprawdzić http://www.luisz.alojalo.info/Portafolio/ –

0

ok, ty mnie kupuję plasowanie w tym przypadku przez pół godziny jest błąd w EventHelpers.js w linii funkcyjnej, który ma tam instrukcję cc_on, więc tylko ją odczyta.

utwórz teraz znacznik skryptu w środowisku wykonawczym, gdy tag nie został utworzony, więc jest równy zeru. i kod jest zepsuty!

Zmodyfikowałem plik EventHelpers.js i naprawiono problem. oryginalny kod napisać tagu skrypt document.write i zmienić go na document.createElement i to wydaje się działać bez błędów w consloe

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

teraz to naprawdę powinno obracać div nawet w IE7 lub 6 ponieważ w jsfiddle nie widzę go obróconego?

i przykro mi, angielski nie jest moim pierwszym językiem;)

+0

Nie wyświetlaj błędu na konsoli, ale nadal nie działa –

0

Wydaje się, że jeden skrypt musi załadować po drugiej.

Spróbuj z tym skryptem:

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"); 
           } 
          }); 

         } 
        }); 
       } 
      }); 

     } 
    }); 

}; 
+0

nadal nie działa @CarlosMartinez –

+0

nie działa dla mnie:/ –

Powiązane problemy