Modernizr con cssSandpaper?

ho sofferto per un po 'cercando di avere la funzione di rotazione (xdeg) su IE 8, 7 e 6, per questo ho google per un po' e ho trovato cssSandpaper ma dal momento che devo caricare 4 script di diferenti che voglio fare solo se necessario per questo im utilizzando modernizr im cercando qualcosa di simile:Modernizr con 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>

mio file 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; 
}

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

Funziona benissimo su Safari, Chrome, Opera, Firefox e IE9, ma quando provo a IE8 o IE7 ottengo il seguente errore sulla console
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
ho aggiunto un console.log per cercare di scoprire che cosa era in corso e se ne andò a quella linea qui è (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

sulla prossima corsa ho controllato la console di nuovo una sega questo LOG: null, non sono un esperto di javascript in modo da non sono sicuro che cosa è ma ho provato qualcosa di diverso e ho aggiunto cssSandPaper usando il tag script come questo:

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

con mia grande sorpresa ha lavorato come un fascino, e in questo modo ho la funzione di rotazione, anche in IE7 e IE8 e la console dirlo ora LOG: [HTMLScriptElement oggetto] ma im consapevoli che l'utilizzo di questo modo mi sarà sempre caricando questi 4 script anche quando non sono necessari e questo non è mi scopo ma dal momento che sto iniziando con modernizr e javacript per essere hone non ho idea di cosa stia succedendo D: e perché quando carico gli script usando nope: [' '] da Modernizr non funziona. qualcuno conosce un modo per risolvere questo? ... mi dispiace per il mio inglese non è il mio primo languague

modifica: ho fatto una piccola ricerca su questo oggetto HTMLScriptElement e il suo supporre di fare riferimento a un tag di script suppongo che quando carico il file js con nope: da modernizr qualcosa cambia e questo oggetto diventa nullo poiché non è più caricato all'interno di un tag di script ... ma sono ancora nello stesso problema ... come posso risolvere questo? :/

jsFiddle Test Modernizr

jsFiddle Test without Modernizr

Risposta: ho finito per usare se lt IE 9 per caricare gli script di carta di sabbia è ottenuto il lavoro fatto

fonte

2012-09-20 Luis Palacios

Potresti aggiungere un jsfiddle? – armonge

ho cercato di risolvere questo problema con approccio diverso e più facile. Ha funzionato per me e vorrei che funzionasse anche per te.

Ho incluso IE9.JS (js che rende IE < 9 browser si comportano come conformi agli standard IE9 +). puoi visitare questo link per sapere come farlo. http://code.google.com/p/ie7-js/

Quindi ho leggermente modificato il tuo CSS estilo.css come segue. Aggiungo il seguente stile alla definizione di stile #acerca.

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

Ha funzionato. l'unico problema è che questo tipo di trasformazione non è leggibile come -ms-transform o qualsiasi altra trasformazione web standard.

fonte

2012-11-21 06:10:11

Anche questo funziona, ma ho finito per usare caricare gli script della carta di sabbia ha ottenuto il lavoro anche qui è il sito se qualcuno vuole verificarlo http://www.luisz.alojalo.info/Portafolio/ –

ok, mi compro collocando su questo come una mezz'ora c'è un bug in EventHelpers.js nella riga di funzione445 ha lì un'istruzione cc_on quindi solo ie lo leggerà.

ora crea un tag script in fase di esecuzione un tag non è stato creato in modo uguale a null. e il codice è rotto!

ho modificato EventHelpers.js e risolto il problema. il codice originale scrivere il tag script con document.write lo cambio per document.createElement e sembra funzionare senza insetti al consloe

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

ora in realtà dovrebbe ruotare il div anche in IE7 o 6 perché nel jsfiddle non lo vedo ruotato?

e mi dispiace, l'inglese non è la mia prima lingua a;)

fonte

2012-10-09 22:57:52 ygaradon

non visualizza errore sulla console, ma continua a non funzionare –

Sembra uno script deve caricare dopo l'altro.

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

         } 
        }); 
       } 
      }); 

     } 
    }); 

};

fonte

2012-10-15 17:36:21

continua a non funzionare @CarlosMartinez –

non ha funzionato per me:/ –

Modernizr con cssSandpaper?

risposta

Problemi correlati