Foros del Web » Programando para Internet » Javascript »

FireFox y Opera: Transparencias?

 Estas en el tema de FireFox y Opera: Transparencias? en el foro de Javascript en Foros del Web. He hecho un script de Fade In y Fade Out con transparencias que en I.E funciona muy bien pero no consigo que funcione en Firefox ...
  #1 (permalink)  
Antiguo 09/11/2007, 12:57
 
Fecha de Ingreso: octubre-2007
Mensajes: 27
Antigüedad: 17 años, 3 meses
Puntos: 0
FireFox y Opera: Transparencias?
He hecho un script de Fade In y Fade Out con transparencias que en I.E funciona muy bien pero no consigo que funcione en Firefox ni en Opera ni Safari... Ahí va por si os interesa usarlo o se os ocurre la fantastica idea de como hacerlo funcionar (me haríais un gran favor):
Código PHP:
var CountFadeID = new Array();
function FadeInEffect(FadeObject,max,mult) {
  max = max+1;
  document.getElementById(FadeObject.id).filters[0].opacity=(document.getElementById(FadeObject.id).filters[0].opacity+mult);
  if ((document.getElementById(FadeObject.id).filters[0].opacity < max) && (CountFadeID[FadeObject.id] == 'in')) {
    setTimeout('FadeInEffect('+FadeObject.id+','+(max-1)+','+mult+')', 5); } 
}     
function SetFadeIn(FadeObject,max,mult) {
  CountFadeID[FadeObject.id] = 'in';
  setTimeout('FadeInEffect('+FadeObject.id+','+max+','+mult+')', 5); 
}
function FadeOutEffect(FadeObject,max,mult) {
  max = max-1;
  document.getElementById(FadeObject.id).filters[0].opacity=(document.getElementById(FadeObject.id).filters[0].opacity-mult);
  if ((document.getElementById(FadeObject.id).filters[0].opacity > max) && (CountFadeID[FadeObject.id] == 'out')) {
     setTimeout('FadeOutEffect('+FadeObject.id+','+(max+1)+','+mult+')', 5);
  }
}
function SetFadeOut(FadeObject,max,mult) {
  CountFadeID[FadeObject.id] = 'out';
  setTimeout('FadeOutEffect('+FadeObject.id+','+max+','+mult+')', 5);
 } 
Implementación:
Código PHP:
<img src="a.gif" id="imagen1" onmouseover="javascript:SetFadeIn(this,'100','5');" onmouseout="javascript:SetFadeOut(this,'65','5');" style="filter:alpha(opacity=35);-moz-opacity:.100;opacity:.100;" /> 
Las 2 ultimas cosas del style son para que se vea opaco o no en firefox y demás, si las bajais se verá más transparente lo único que el fade no lo hará...
Y respecto a las variables de la función... En la In, el máximo de opaco, en la out el minimo de transparente... y la segunda es el "multiplicador" contra más alto sea más prisa se da en llegar al minimo/maximo asignado...
El efecto fade in fade out queda muy bien y por más que busqué no encontré nada util ya hecho para todos los navegadores...
Ah y creo que en FF no funciona tampoco el setTimeout tal y como está puesto por que no pasa bien el objeto o no lo tengo muy claro... pero como no me funcionaba de ninguna forma la transparencia lo dejé estar.. A ver si alguien se anima

Un saludo!!!
  #2 (permalink)  
Antiguo 09/11/2007, 15:06
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 8 meses
Puntos: 834
Re: FireFox y Opera: Transparencias?
Mirate esto: http://brainerror.net/scripts/javascript/blendtrans/
  #3 (permalink)  
Antiguo 10/11/2007, 04:19
 
Fecha de Ingreso: octubre-2007
Mensajes: 27
Antigüedad: 17 años, 3 meses
Puntos: 0
Re: FireFox y Opera: Transparencias?
Gracias jeje pero más bien buscaba una manera mágica de adaptarlo... esa web el problema que tiene es que aún funcionando (y no en todos) dará error...

Código PHP:
var BrowserDetect = { 
       init: function () { 
          this.browser = this.searchString(this.dataBrowser) || "Other"; }, 
       searchString: function (data) { 
       for (var i=0;i<data.length;i++) { 
          var dataString = data[i].string; 
          var dataProp = data[i].prop; 
          this.versionSearchString = data[i].versionSearch || data[i].identity; 
          if (dataString) { 
             if (dataString.indexOf(data[i].subString) != -1) 
                return data[i].identity; } 
          else if (dataProp) 
          return data[i].identity; 
       }  }, 
    dataBrowser: [ { 
       string: navigator.vendor, 
       subString: "Apple", 
       identity: "Safari" 
    }, { 
       string: navigator.vendor, 
       subString: "KDE", 
       identity: "Konqueror" 
    }, { 
       string: navigator.userAgent, 
       subString: "Firefox", 
       identity: "Firefox"
    }, {
       string: navigator.userAgent, 
       subString: "MSIE", 
       identity: "Explorer", 
       versionSearch: "MSIE" 
    }, { 
       string: navigator.userAgent, 
       subString: "Gecko", 
       identity: "Mozilla", 
       versionSearch: "rv" 
    }, {
       string: navigator.userAgent, 
       subString: "Mozilla", 
       identity: "Netscape", 
       versionSearch: "Mozilla" } ], 
    dataOS : [ { } ] }; 
BrowserDetect.init(); 
var faderray = new Array();
function FadeIn(objectto,limit,speed) {
  faderray[objectto.id] = 'i';
  if (BrowserDetect.browser == 'Explorer') {
    setTimeout("IEChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  } else if ((BrowserDetect.browser == 'Firefox') || (BrowserDetect.browser == 'Netscape') || (BrowserDetect.browser == 'Mozilla')) {
    setTimeout("FFChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  } else if ((BrowserDetect.browser == 'Safari') || (BrowserDetect.browser == 'KDE')) {
    setTimeout("KHChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  } else {
    setTimeout("CSChangeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  }
}
function FadeOut(objectto,limit,speed) {
  faderray[objectto.id] = 'o';
  if (BrowserDetect.browser == 'Explorer') {
    setTimeout("IEChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  } else if ((BrowserDetect.browser == 'Firefox') || (BrowserDetect.browser == 'Netscape') || (BrowserDetect.browser == 'Netscape')) {
    setTimeout("FFChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  } else if ((BrowserDetect.browser == 'Safari') || (BrowserDetect.browser == 'KDE')) {
    setTimeout("KHChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  } else {
    setTimeout("CSChangeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
  }
}
function IEChangeOpacityFadeIn(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = eval(object.filters.alpha.opacity);
  for (i=0;i<speed;i++) {
    actualop++; }
  if (actualop > limit) {
    actualop = limit; }
   if ((actualop <= limit) && (faderray[objectto] == 'i')) {
     object.filters.alpha.opacity=actualop;
     setTimeout("IEChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function IEChangeOpacityFadeOut(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = eval(object.filters.alpha.opacity);
  for (i=0;i<speed;i++) {
    actualop--; }
  if (actualop < limit) {
    actualop = limit; }
   if ((actualop >= limit) && (faderray[objectto] == 'o')) {
     object.filters.alpha.opacity=actualop;
     setTimeout("IEChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function FFChangeOpacityFadeIn(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = object.style.MozOpacity*100;
  for (i=0;i<speed;i++) {
    actualop++; }
  if (actualop > limit) {
    actualop = limit; }
   if ((actualop <= limit) && (faderray[objectto] == 'i')) {
     object.style.MozOpacity=(actualop/100);
     setTimeout("FFChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function FFChangeOpacityFadeOut(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = object.style.MozOpacity*100;
  for (i=0;i<speed;i++) {
    actualop--; }
  if (actualop < limit) {
    actualop = limit; }
   if ((actualop >= limit) && (faderray[objectto] == 'o')) {
     object.style.MozOpacity=(actualop/100);
     setTimeout("FFChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function KHChangeOpacityFadeIn(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = object.style.KhtmlOpacity*100;
  for (i=0;i<speed;i++) {
    actualop++; }
  if (actualop > limit) {
    actualop = limit; }
   if ((actualop <= limit) && (faderray[objectto] == 'i')) {
     object.style.KhtmlOpacity=(actualop/100);
     setTimeout("KHChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function KHChangeOpacityFadeOut(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = object.style.KhtmlOpacity*100;
  for (i=0;i<speed;i++) {
    actualop--; }
  if (actualop < limit) {
    actualop = limit; }
   if ((actualop >= limit) && (faderray[objectto] == 'o')) {
     object.style.KhtmlOpacity=(actualop/100);
     setTimeout("KHChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function CSChangeOpacityFadeIn(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = object.style.opacity*100;
  for (i=0;i<speed;i++) {
    actualop++; }
  if (actualop > limit) {
    actualop = limit; }
   if ((actualop <= limit) && (faderray[objectto] == 'i')) {
     object.style.opacity=(actualop/100);
     setTimeout("CSChangeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
}
function CSChangeOpacityFadeOut(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = object.style.opacity*100;
  for (i=0;i<speed;i++) {
    actualop--; }
  if (actualop < limit) {
    actualop = limit; }
   if ((actualop >= limit) && (faderray[objectto] == 'o')) {
     object.style.opacity=(actualop/100);
     setTimeout("CSChangeOpacityFadeOut('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
} 
Esto es lo que pasa cuando TODOs los navegadores crean su standar... :D
Funcionar funciona de coña, lo tuve que hacer yo por que no encontraba ninguno que me gustase.. todos eran una basura (con perdon a los que lo programaran)...
Pero el codigo queda muy largo... El script de detectar navegador no es mio, y esta "capuzamente" resumido por que como es lógico lo haré desde PHP pero ahí queda por si alguien lo uqiere XD
  #4 (permalink)  
Antiguo 10/11/2007, 07:30
Avatar de derkenuke
Colaborador
  
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 3 meses
Puntos: 45
Re: FireFox y Opera: Transparencias?
Hola lag_0:

Sólo por ahorrarte código (creo que hay muchisimas cosas duplicadas... demasiadas funciones. En todo caso el browser detection lo tendrías que hacer en una función llamada changeOpacityFadeXX(), que sea única para todos los navegadores.


También creo recordar que firefox soporta .style.opacity a secas.. no estoy seguro.

Bueno, mira a ver si algo como esto da errores. Es aunar las 4 instrucciones en la misma función. Te ahorras un montón de funciones y la detección de navegador:

Código PHP:
var faderray = new Array();
function FadeIn(objectto,limit,speed) {
  faderray[objectto.id] = 'i';
  setTimeout("changeOpacityFadeIn('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
}
function FadeOut(objectto,limit,speed) {
  faderray[objectto.id] = 'o';
  setTimeout("changeOpacityFadeOut('"+objectto.id+"','"+ limit +"','"+ speed+"')",20);
}
function getOpacity(obj) {
    // Tenemos que mirar los 4 metodos, a ver cual contiene datos:
    // 1. object.filters.alpha.opacity
    // 2. object.style.MozOpacity*100
    // 3. object.style.KhtmlOpacity*100
    // 4. object.style.opacity*100
}
function changeOpacityFadeIn(objectto,limit,speed) {
  var object = document.getElementById(objectto); 
  actualop = getOpacity(object);
  for (i=0;i<speed;i++) {
    actualop++; }
  if (actualop > limit) {
    actualop = limit; }
   if ((actualop <= limit) && (faderray[objectto] == 'i')) {
     object.filters.alpha.opacity=actualop;
     object.style.MozOpacity=(actualop/100);
     object.style.KhtmlOpacity=(actualop/100);
     object.style.opacity=(actualop/100);
     setTimeout("changeOpacityFadeIn('"+objectto+"','"+ limit +"','"+ speed+"')",20);
   }
} 
Luego te quedaría el changeOpacityFadeOut() que funciona igual.



Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:53.