Modernizr con cssSandpaper?

he estado luchando por un tiempo tratando de tener la función de rotación (xdeg) en IE 8, 7 y 6, para esto busco en Google por un tiempo y encontré cssSandpaper pero dado que tengo que cargar 4 secuencias de comandos diferentes que quiero hacer sólo si su necesaria para este im usando modernizr im tratando de hacer algo como esto: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>

mi archivo 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; 
}

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

Funciona muy bien en Safari, Chrome, Opera, Firefox y IE9 pero cuando intento de IE8 o IE7 me sale el siguiente error en la consola
SCRIPT5007: Unable to get value of the property 'addEventListener': object is null or undefined EventHelpers.js, line 49 character 9
he añadido un console.log para tratar de averiguar lo que estaba pasando y fue a esa línea aquí es (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

en la próxima ejecución he comprobado la consola de nuevo una sierra esta LOG: null, no soy un experto en javascript, así que no estoy seguro de lo que es pasando pero intento algo diferente y agregué el cssSandPaper usando la etiqueta de script como esta:

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

para mi sorpresa funcionó como un encanto, y así tengo la característica de rotación incluso en IE7 e IE8 y la consola decir esto ahora LOG: [objeto HTMLScriptElement] pero soy consciente de que el uso de esta manera siempre seré cargar estos 4 guiones incluso cuando no son necesarios y eso no es mi objetivo, pero como estoy comenzando con modernizr y javacript, no tengo idea de qué está pasando D: y por qué cuando cargo los guiones usando nope: [' '] de modernizr doesnt trabajo. Alguien sabe una manera de resolver esto? ... lo siento por mi inglés, no mi primer languague

editar: hice un poco de investigación sobre este objeto HTMLScriptElement y se supone que debe referirse a una etiqueta de script supongo que cuando cargo el archivo js con nope: de modernizr algo cambia y este objeto se vuelve nulo porque ya no se carga dentro de una etiqueta de script ... pero todavía estoy en el mismo problema ... ¿cómo lo resuelvo? :/

jsFiddle Test Modernizr

jsFiddle Test without Modernizr

Respuesta: Terminé usando si lt IE 9 para cargar los scripts de papel de lija que se hacían el trabajo

Fuente

2012-09-20 Luis Palacios

¿Podría agregar un jsfiddle? – armonge

He tratado de resolver esto con enfoque diferente y más fácil. Me funcionó y desearía que también te sirviera.

Incluí IE9.JS (js que hace que IE < 9 navegadores se comporten como los estándares de IE9 +). puedes visitar este enlace para saber cómo hacerlo. http://code.google.com/p/ie7-js/

Luego modifiqué ligeramente su CSS estilo.css de la siguiente manera. Agrego el siguiente estilo a la definición del estilo #acerca.

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

Funcionó. El único problema es que este tipo de transformación no es tan legible como -ms-transform o cualquier otra transformación web estándar.

Fuente

2012-11-21 06:10:11

Esto también funciona, pero terminé usando para cargar los guiones de papel de lija, también hizo el trabajo aquí, este es el sitio si alguien quiere consultarlo http://www.luisz.alojalo.info/Portafolio/ –

bien, me Puedo comprar emplazándose en esto como media hora hay un error en EventHelpers.js en la línea de función init línea 445 que tiene allí una declaración cc_on por lo que solo es decir, la leerá.

ahora crea una etiqueta de script en tiempo de ejecución y no se creó la etiqueta, por lo que es igual a null. y el código es break!

modifiqué el EventHelpers.js y solucionó el problema. el código original escribir la etiqueta script con document.write lo cambio a document.createElement y parece funcionar sin errores en el consloe

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

ahora lo que realmente debe girar el div incluso en Internet Explorer 7 o 6 porque en jsfiddle no lo veo rotar?

y me siento a, Inglés no es mi primera lengua a;)

Fuente

2012-10-09 22:57:52 ygaradon

no muestra el error en la consola, pero todavía no funciona –

Parece que un script necesita cargar después de la otra.

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

         } 
        }); 
       } 
      }); 

     } 
    }); 

};

Fuente

2012-10-15 17:36:21

todavía no funciona @CarlosMartinez –

no funcionó para mí:/ –

Respuesta

Cuestiones relacionadas