script que no chuta en firefox

grooph · #1 (**permalink**) 06/06/2009, 13:49

Hola a todos!!

Hace unos dias encontré un script que hace una animación de degradados. Lo pongo en el <body>, pero sólo me funciona con explorer. Alguien me puede decir cómo tengo que hacer para que chute en firefox?

Aqui os dejo el codigo:

Código HTML:

<script>
	
	var colors=new Array("#9DFFF9","#F234E2","#FFF000","#46E031","#00FFDE","#FFC000","#FFFF66","#ff0000","#FFA4D7","#850044","#B56AFF","#56B1FF")
var pausebetweencolors=2
var gradient_effect="horizontal"
var speed=20
var i_loopmax=1000


var pausesteps=40
var hexc = new Array('0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F')
var redcol_1
var redcol_2 
var redcol_1_b
var redcol_2_b 
var greencol_1 
var greencol_2 
var greencol_1_b 
var greencol_2_b
var bluecol_1 
var bluecol_2 
var bluecol_1_b 
var bluecol_2_b
 
var rgbredfrom
var rgbgreenfrom
var rgbbluefrom
var rgbredto
var rgbgreento
var rgbblueto
var rgbrednow
var rgbgreennow
var rgbbluenow

var rgbredfrom_b
var rgbgreenfrom_b
var rgbbluefrom_b
var rgbredto_b
var rgbgreento_b
var rgbblueto_b
var rgbrednow_b
var rgbgreennow_b
var rgbbluenow_b

var colorhexafrom
var colorhexato

var i_step=1
var i_loop=0
var i_colorsA=0
var i_colorsB=1
var i_colorsC=1
var i_colorsD=2

pausebetweencolors*=1000

var browserinfos=navigator.userAgent 
var ie4=document.all&&!document.getElementById
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)  
var browserok=ie4||ie5||ns4||ns6||opera

function translateintorgb() {

	var hexa=colors[i_colorsA]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredfrom=parseInt("0x"+hexared)
	rgbgreenfrom=parseInt("0x"+hexagreen)
	rgbbluefrom=parseInt("0x"+hexablue)
	rgbrednow=rgbredfrom
	rgbgreennow=rgbgreenfrom
	rgbbluenow=rgbbluefrom
	
	var hexa=colors[i_colorsB]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredto=parseInt("0x"+hexared)
	rgbgreento=parseInt("0x"+hexagreen)
	rgbblueto=parseInt("0x"+hexablue)
	
	var hexa=colors[i_colorsC]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredfrom_b=parseInt("0x"+hexared)
	rgbgreenfrom_b=parseInt("0x"+hexagreen)
	rgbbluefrom_b=parseInt("0x"+hexablue)
	rgbrednow_b=rgbredfrom_b
	rgbgreennow_b=rgbgreenfrom_b
	rgbbluenow_b=rgbbluefrom_b
	
	var hexa=colors[i_colorsD]
	var hexared=hexa.substring(1,3)
	var hexagreen=hexa.substring(3,5)
	var hexablue=hexa.substring(5,7)
	rgbredto_b=parseInt("0x"+hexared)
	rgbgreento_b=parseInt("0x"+hexagreen)
	rgbblueto_b=parseInt("0x"+hexablue)
	i_colorsA++
	i_colorsB++
	i_colorsC++
	i_colorsD++
	if (i_colorsA>=colors.length) {i_colorsA=0}
	if (i_colorsB>=colors.length) {i_colorsB=0}
	if (i_colorsC>=colors.length) {i_colorsC=0}
	if (i_colorsD>=colors.length) {i_colorsD=0}
	
	changefromto()
}

function changefromto() {
	rgbrednow=rgbrednow-((rgbredfrom-rgbredto)/speed)
	rgbgreennow=rgbgreennow-((rgbgreenfrom-rgbgreento)/speed)
	rgbbluenow=rgbbluenow-((rgbbluefrom-rgbblueto)/speed)
	
	rgbrednow_b=rgbrednow_b-((rgbredfrom_b-rgbredto_b)/speed)
	rgbgreennow_b=rgbgreennow_b-((rgbgreenfrom_b-rgbgreento_b)/speed)
	rgbbluenow_b=rgbbluenow_b-((rgbbluefrom_b-rgbblueto_b)/speed)
	
	if (rgbrednow>255) {rgbrednow=255}
	if (rgbrednow<0) {rgbrednow=0}
	if (rgbgreennow>255) {rgbgreennow=255}
	if (rgbgreennow<0) {rgbgreennow=0}
	if (rgbbluenow>255) {rgbbluenow=255}
	if (rgbbluenow<0) {rgbbluenow=0}
	
	if (rgbrednow_b>255) {rgbrednow_b=255}
	if (rgbrednow_b<0) {rgbrednow_b=0}
	if (rgbgreennow_b>255) {rgbgreennow_b=255}
	if (rgbgreennow_b<0) {rgbgreennow_b=0}
	if (rgbbluenow_b>255) {rgbbluenow_b=255}
	if (rgbbluenow_b<0) {rgbbluenow_b=0}
	
	if (i_step<=speed) {
      	redcol_1 = hexc[Math.floor(rgbrednow/16)];
     	redcol_2 = hexc[Math.floor(rgbrednow)%16];
	 	greencol_1 = hexc[Math.floor(rgbgreennow/16)];
      	greencol_2 = hexc[Math.floor(rgbgreennow)%16];
	  	bluecol_1 = hexc[Math.floor(rgbbluenow/16)];
      	bluecol_2 = hexc[Math.floor(rgbbluenow)%16];
		
		redcol_1_b = hexc[Math.floor(rgbrednow_b/16)];
     	redcol_2_b = hexc[Math.floor(rgbrednow_b)%16];
	 	greencol_1_b = hexc[Math.floor(rgbgreennow_b/16)];
      	greencol_2_b = hexc[Math.floor(rgbgreennow_b)%16];
	  	bluecol_1_b = hexc[Math.floor(rgbbluenow_b/16)];
      	bluecol_2_b = hexc[Math.floor(rgbbluenow_b)%16];
	  	var backcolor="#"+redcol_1+redcol_2+greencol_1+greencol_2+bluecol_1+bluecol_2
		var backcolor_b="#"+redcol_1_b+redcol_2_b+greencol_1_b+greencol_2_b+bluecol_1_b+bluecol_2_b
		if (ie5 && gradient_effect!="none") {
			if (gradient_effect=="horizontal") {var gr_effect=1}
			if (gradient_effect=="vertical") {var gr_effect=0}
	  		document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"
		}
		else {
	  		document.bgColor=backcolor 
		}

		i_step++
		var timer=setTimeout("changefromto()",pausesteps);
	
    } 
  	else {
  		clearTimeout(timer)
		i_step=1
		i_loop++
		if (i_loop<i_loopmax) {var timer=setTimeout("translateintorgb()",pausebetweencolors);}
  	}
}


if (browserok) {
	window.onload=translateintorgb
}

	
	</script>

caricatos · #2 (**permalink**) 06/06/2009, 16:30

Hola:

Simplemente los filtros son propiedad de MS... un fondo degradado sólo puede ponerse de forma estándar con una imágen.

Saludos

grooph · #3 (**permalink**) 06/06/2009, 17:21

Gracias, caricatos!

Pero tiene que haber alguna forma de hacer que otros navegadores lo entiendan, no? Que hago?

Sopa · #4 (**permalink**) 06/06/2009, 19:57

Aparentemente el codigo esta bien, sin dudas hay algo que no le gusta a mozilla, en la linea 158

Cita:

document.body.style.filter="progid:DXImageTransfor m.Microsoft.Gradient(startColorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"

creo que esta el tema, probar distintas formas de concatenar, y comentar esta linea y el proximo else. saludos

Triby · #5 (**permalink**) 06/06/2009, 21:12

Sopa, si leiste la parte de Microsoft.Gradient? como se supone que los navegadores de verdad interpreten propiedades y filtros creados unica y exclusivamente para IE?

Seguramente con las siguientes dos lineas (lease los que no son ie5+ ni soportan gradient_efect):

Cita:

if (ie5 && gradient_effect!="none") {
if (gradient_effect=="horizontal") {var gr_effect=1}
if (gradient_effect=="vertical") {var gr_effect=0}
document.body.style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startC olorstr="+backcolor+", endColorstr="+backcolor_b+", GradientType="+gr_effect+")"
}
else {
document.bgColor=backcolor
}

tunait · #6 (**permalink**) 07/06/2009, 01:43

Vamos al foro de Javascript

tema trasladado desde Web general

saludos!

grooph · #7 (**permalink**) 07/06/2009, 05:05

La verdad es que estoy un poco pez.

Deberia cargarme la linea 158 o la parte de los "if (ie5 && gradient_effect!="none")" para que funcione? o quizás hay algún otro script que haga lo mismo y no sea de MS?

caricatos · #8 (**permalink**) 07/06/2009, 05:18

Hola:

La cuestión es que detrás del if hay un else para cuando no pasa la condición, y esa alternativa no es otra que poner un color de fondo.

Si quieres que ese fondo sea un gradiante solo podrás ponerlo con una imagen.

Saludos

grooph · #9 (**permalink**) 07/06/2009, 06:20

Pero con una imagen no me va a quedar el mismo efecto!

En fin... habrá que resignarse.

Mil gracias de todos modos!!

Panino5001 · #10 (**permalink**) 07/06/2009, 10:09

Hay una alternativa para hacer gradientes en navegadores estandar, sin usar imágenes, usando canvas. He aquí un ejemplo crossbrowser:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Gradientes</title>
<style>
#v,#h{ width:200px;height:100px; border:1px solid #000;}
</style>
<script>
function $(x){return document.getElementById(x);}
function css(id,prop){
    if(window.getComputedStyle){
        return document.defaultView.getComputedStyle($(id),null).getPropertyValue(prop);
    }else{
        var re = /(-([a-z]){1})/g;
        if (prop == 'float') prop = 'styleFloat';
        if (re.test(prop)) {
            prop = prop.replace(re, function () {
                return arguments[2].toUpperCase();
            });
        }
        return $(id).currentStyle[prop] ? $(id).currentStyle[prop] : null;
    }
}
function gradiente(idObj,col1,col2,tipo){
    if (document.createElement("canvas").getContext) {
            /* ---- canvas ---- */
            var b1=parseInt(col1.substr(5,2),16);
            var g1=parseInt(col1.substr(3,2),16);
            var r1=parseInt(col1.substr(1,2),16);
            var b2=parseInt(col2.substr(5,2),16);
            var g2=parseInt(col2.substr(3,2),16);
            var r2=parseInt(col2.substr(1,2),16);
            
            ref = document.createElement("canvas");
            ref.width = parseInt(css(idObj,'width'));
            ref.height =parseInt(css(idObj,'height'))
            var context = ref.getContext("2d");
            context.translate(0,0);
            context.scale(1,1);
            
            
            if(tipo){
                
                context.translate(ref.width,0);
                context.rotate(Math.PI/2);
                var gradient = context.createLinearGradient(0, 0, 0, ref.width);
                gradient.addColorStop(1, "rgba("+r1+","+g1+","+ b1+", 1.0)");
                gradient.addColorStop(0, "rgba("+r2+","+g2+","+ b2+", 1.0)");
                context.fillStyle = gradient;
                context.fillRect(0,0,ref.height, ref.width);
                
            }else{
                var gradient = context.createLinearGradient(0, 0, 0, ref.height);
                gradient.addColorStop(0, "rgba("+r1+","+g1+","+ b1+", 1.0)");
                gradient.addColorStop(1, "rgba("+r2+","+g2+","+ b2+", 1.0)");
                   context.fillStyle = gradient;
                context.fillRect(0,0,ref.width, ref.height);
            }
            
            
            
            $(idObj).appendChild(ref);
    } else {
    /* ---- DXImageTransform ---- */ 
                $(idObj).style.filter=
"progid:DXImageTransform.Microsoft.Gradient(startColorstr="+col1+", endColorstr="+col2+", GradientType="+tipo+")"
        
    }
    
}
window.onload=function(){
gradiente('v','#FF0000','#CCCCCC',0);
gradiente('h','#FF0000','#CCCCCC',1);
}
</script>
</head>

<body>
<div id="v"></div>
<div id="h"></div>
</body>
</html>