Comunidad de diseño web y desarrollo en internet online

Problema con IE

Citar            
MensajeEscrito el 06 Sep 2014 06:25 pm

Hola amigos

En esta ocasión, vengo a consultarles por un problema al cual le vengo dando varias vueltas sin encontrar solución. El caso es que tengo un elemento <div> al cual quiero cambiar el color de fondo con un efecto de transición, pero sin utilizar la propiedad transition o alguna librería (dígase jQuery y similares).

Tengo elaborado lo siguiente:

Código HTML :

<input type = "radio" name = "color" value = "255, 0, 0" checked /> Red
<input type = "radio" name = "color" value = "0, 255, 0" /> Green
<input type = "radio" name = "color" value = "0, 0, 255" /> Blue
<div></div>


Código CSS :

div{
   width: 250px;
   height: 150px;
   background-color: rgb(255, 0, 0);
}


Código Javascript :

function change(color, element){
   var final = [] || new Array(),
       i = 0,
       current = window.getComputedStyle ? 
                 window.getComputedStyle(element, null).backgroundColor : 
                 element.currentStyle.backgroundColor;   
   window.interval = window.interval || null;   
      
   if (window.interval != null) 
      clearInterval(window.interval);

   current = current.split(/[^\d]/g);
   current = (function(){
      for (var k = 0, lengthCu = current.length, auxCu = [] || new Array(); k < lengthCu; k++)
         if (current[k].length) auxCu.push(current[k]);
      return auxCu;
   })();
      
   color = color.split(/[^\d]/g);
   color = (function(){
      for (var l = 0, lengthCo = color.length, auxCo = [] || new Array(); l < lengthCo; l++)
         if (color[l].length) auxCo.push(color[l]);
      return auxCo;
   })();

   final[0] = current[0];
   final[1] = current[1];
   final[2] = current[2];
      
   window.interval = setInterval(function(){
      if (final[0] < color[0]) final[0]++;
      else if (final[0] > color[0]) final[0]--;
      
      if (final[1] < color[1]) final[1]++;
      else if (final[1] > color[1]) final[1]--;
         
      if (final[2] < color[2]) final[2]++;
      else if (final[2] > color[2]) final[2]--;
         
      element.style.backgroundColor = "rgb(" + final.join(", ") + ")";
      
      if (final[0] == color[0] &&
          final[1] == color[1] &&
          final[2] == color[2])
         clearInterval(window.interval);
   }, 0.1);
}

var options = document.getElementsByTagName("input"),
    totalOpt = options.length, 
    aux = [] || new Array(),
    div = document.getElementsByTagName("div")[0];

for (var m = 0; m < totalOpt; m++){
   if (options[m].name == "color") aux.push(options[m]);
}
options = aux;

for (var j = 0, total = options.length; j < total; j++){
   (function(index){
      options[index].onclick = function(){
         change(this.value, div);
      };
   })(j);   
}


Tal y como lo tengo, funciona en Chrome, Firefox, Opera, Safari e IE11, sin embargo, lo probé en IE10 y versiones anteriores y no funciona. Probé colocando una alerta en la función y esta solo se visualiza en IE5.5, de IE6 a IE10, ni siquiera se llega a mostrar. Mi intención es que esto funcione tanto en navegadores antiguos como modernos, dígase desde IE5.5 o IE6 en adelante.

¿Qué puede estar sucediendo? ¿Quizá algún método no compatible? Aunque revisé la documentación de cada uno y son soportados en IE6+.

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 08 Sep 2014 08:35 pm
Tal vez esto te ayude.^^

http://www.my-debugbar.com/wiki/IETester/HomePage

Por ignell

11 de clabLevel



Genero:Masculino  

Juegos con Html5

firefox
Citar            
MensajeEscrito el 09 Sep 2014 11:45 pm
Se me hace increíble que hayas podido hacer una función tan compleja y que no hayas podido detectar el error,

En fin estas colocando la unidad de tiempo de la funcion setInterval() como "0.1" cuando deberia estar representada en milisegundos en este caso "10"

Es todo ;)

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 11 Sep 2014 05:32 am

¿De casualidad te tomaste la molestia de leer la descripción del problema? :?

Sé que el tiempo se da en milésimas de segundo, ese no es el problema, pues ya hice pruebas con otras cifras, además, si el problema fuera por el intervalo de tiempo, no funcionaría en los demás navegadores, incluido el IE11 en dónde marcha bien. Además, con ese intervalo, la transición se da a la velocidad que busco.

El problema acá es que no pasa nada en las versiones de IE anteriores a la 11, es solo eso. Por favor, te sugiero que al menos leas la descripción del problema, no la puse para que la ignoren.

Por cierto, no me parece tan compleja, la hice algo rápido, a modo de prueba. :P

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 11 Sep 2014 05:35 am

Estimado ignell:

Tengo un tester para probar en IE de 5.5 a 11. También lo probé en IE8 en una PC con WinXP. El resultado es el mismo que expliqué.

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 11 Sep 2014 05:09 pm
Entonces realmente no lo hiciste tu ¬¬ Alexis 88,

Lo probe en Internet explorer 8 (no funcionaba como decias) y solo cambie de esto:

Código Javascript :

window.interval = setInterval(function(){
      if (final[0] < color[0]) final[0]++;
      else if (final[0] > color[0]) final[0]--;
      
      if (final[1] < color[1]) final[1]++;
      else if (final[1] > color[1]) final[1]--;
         
      if (final[2] < color[2]) final[2]++;
      else if (final[2] > color[2]) final[2]--;
         
      element.style.backgroundColor = "rgb(" + final.join(", ") + ")";
      
      if (final[0] == color[0] &&
          final[1] == color[1] &&
          final[2] == color[2])
         clearInterval(window.interval);
   }, 0.1);


a esto;

Código Javascript :

window.interval = setInterval(function(){
      if (final[0] < color[0]) final[0]++;
      else if (final[0] > color[0]) final[0]--;
      
      if (final[1] < color[1]) final[1]++;
      else if (final[1] > color[1]) final[1]--;
         
      if (final[2] < color[2]) final[2]++;
      else if (final[2] > color[2]) final[2]--;
         
      element.style.backgroundColor = "rgb(" + final.join(", ") + ")";
      
      if (final[0] == color[0] &&
          final[1] == color[1] &&
          final[2] == color[2])
         clearInterval(window.interval);
   }, 10);


No funciona en navegadores viejos pues no hacen las conversiones necesarias (lo cual tu supones), los mas actuales hacen la transformacion de 0.1s a ms.

Antes de alegar, mejor prueba.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 11 Sep 2014 06:10 pm

elporfirio escribió:


Entonces realmente no lo hiciste tu ¬¬ Alexis 88

Ten cuidado con lo que dices, no puedes afirmar algo de lo cual no tienes certeza. Para tu información, lo hice todo, desde cero, en un momento de ocio. Si no me quieres creer, es problema tuyo.

Con respecto a lo otro, ¿de verdad crees que no hice las pruebas necesarias? Creo que deberías dejar esa arrogancia y egocentrismo de lado antes de atreverte a comentar. Aquí no estamos para demostrar que sabemos más que otro, esto no es una competencia, estamos aquí para ayudarnos como una comunidad.

Para tu conocimiento, hice todas las pruebas posibles antes de publicar este tema por acá, no seré un experto pero al menos llevo un tiempo razonable en el campo de la programación como para saber cómo hacer las cosas.

¿Sabes qué es lo único que se consigue al incrementar el intervalo de tiempo? Que la transición sea más lenta. Y eso solo en los navegadores en donde esto está funcionando, pues en las versiones de IE que mencioné, el inconveniente persiste. Ya te había dicho que con ese intervalo logro obtener el efecto de transición que busco, pero creo que no te tomaste la molestia de siquiera leer eso.

Y antes de que vuelvas a comentar algo fuera de lugar, nuevamente realicé las pruebas necesarias tanto con las 10 milésimas de segundo que propones como con otros intervalos, algo que ―como había mencionado líneas arriba― ya había hecho anteriormente.

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 12 Sep 2014 12:56 pm
Coincido con elporfirio.

Tengo una máquina con Windows XP e IE8 y el código tal como lo has posteado, efectivamente no funciona y el único cambio que hay que hacer es exactamente el que sospechó elporfirio: El tiempo del temporizador.

Y al igual que elporfirio también dudo mucho que tú hayas escrito esto. El error es tan tonto que no se condice con la complejidad del resto.

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 12 Sep 2014 04:34 pm

Estimado DriverOp:

¿Es que acaso necesitas que explique línea a línea todo el código o quizá necesité grabarme mientras lo escribía para que creas que lo hice? Es tan ridícula la manera de razonar de ciertos individuos que, obnubilados por su arrogancia y egocentrismo, creen ser las únicas personas capaces de escribir una función que en realidad es tan sencilla. Me la paso escribiendo funciones en JS y PHP mucho más complejas que esta, tengo un repositorio en GitHub con una librería en JS y una colección de clases en PHP, todas escritas por mi desde cero. Me la paso colaborando en los foros de JS y PHP de Foros del Web, en Twitter publico periódicamente pequeñas funciones en JS y PHP, algunas con un nivel de complejidad mayor al de esta, de manera que me parece ridícula y hasta ofensiva la aseveración de que no sea yo el que haya hecho esto, como si se tratara de algo complicado. Con decirte que la hice cuando hice una pausa a mi trabajo, pero bueno, si no me quieres crees, es problema tuyo, total, yo sé que lo hice. Y si lo dudas, busca esta función por toda la red, ve a la Deep Web si es necesario, quizá así te convenzas.

Con respecto a lo otro, ¿será que escribo en chino para que no entiendan lo que escribo o es que de plano no les da la gana de leer la descripción del problema? ¿Tanto puede su arrogancia?

Por enésima vez, vuelvo a decir que he probado con distintos intervalos, tanto de 1 milésima de segundo, como las 10 de elporfirio, 500 milésimas (medio segundo) y las 0.1 milésimas que me vienen perfectas para el efecto de transición que deseo, pues mientras mayor es el intervalo, la transición se dilatará más y no es lo que busco. He probado esto con el IETester que tiene las versiones 5.5, 6, 7 y 8 de IE, al igual que probé con Browser Stack, con el que puedo probar desde IE 6 hasta el 11. También lo probé con IE 8 en una PC con WinXP y el resultado, al igual que con los tester, fue el mismo: Solo funciona en IE 11.

He leído y releído la documentación de cada método y propiedad que escribí y no encuentro incompatibilidad alguna con dichas versiones de IE, es por eso que acudí al foro para ver si quizá alguien ve el punto que no veo y que no es el intervalo de tiempo, pues, como lo vengo diciendo repetidas veces, aún probando con los intervalos mencionados en el párrafo anterior y con otros, ni siquiera el cambio de color se produce en IE 5.5 a 10, solo en la versión 11 y con la transición deseada.

Al inicio, creí que se trataba de un problema local, pero si el problema persiste con el IETester, entonces, ya no es algo local, o al menos eso creo.

En fin, esta solo fue una prueba, no es nada serio, por eso les dije que escribí la función en un momento de ocio. Lo dejaré en stand-by hasta que pueda hacer pruebas en otra PC, quizá y se da el milagro de que funcione.

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 12 Sep 2014 09:41 pm
https://www.youtube.com/watch?v=G7qHS71o-88

Ignora :P el audio estaba en el trabajo. Pero ahi esta la prueba de lo que trabajo.

Si quieres saca el "Navigator" de tu browser para revisar diferencias, pero ahi la prueba de que tu codigo funciona en IE 7 y de que no funciona como lo habias puesto, si no como te dije que lo cambiaras.

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 12 Sep 2014 10:33 pm

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome
Citar            
MensajeEscrito el 15 Sep 2014 12:07 pm
Alexis88:

Buena suerte :).

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 15 Sep 2014 04:54 pm

DriverOp escribió:


Buena suerte :).


Gracias, pero no necesito de la suerte para que me vaya bien, para eso me esfuerzo día a día, al fin y al cabo, si uno no se esmera para que las cosas marchen mejor, ¿esperaremos a que alguien más lo haga por uno?. :wink:

Saludos

Por Alexis88

21 de clabLevel



Genero:Masculino  

Web developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.