Foros Club Delphi

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)
-   HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)
-   -   FireFox y Opera: Transparencias? (https://www.clubdelphi.com/foros/showthread.php?t=50145)

lag_0 09-11-2007 13:38:34
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!!!

Ñuño Martínez 09-11-2007 21:20:41
El por qué funciona única y exclusivamente en Internet Explorer puede deberse a que la propiedad de estilo "opacity" sea una extensión de Microsoft que no forma parte de la norma (como el < marquee > en su día). O al menos eso dice mi tabla de VisiBone ni aparece en ninguna de las descripciones oficiales. ¿O no es CSS? :confused:

lag_0 09-11-2007 22:04:40
Cita:
Empezado por Ñuño Martínez (Mensaje 245039)
El por qué funciona única y exclusivamente en Internet Explorer puede deberse a que la propiedad de estilo "opacity" sea una extensión de Microsoft que no forma parte de la norma (como el < marquee > en su día). O al menos eso dice mi tabla de VisiBone ni aparece en ninguna de las descripciones oficiales. ¿O no es CSS? :confused:
Si yo de estandares y quien se inventó que no tengo ni zorra, pero aún así no es culpa del opacity, sifuera por eso habría puesto un if y listo... el tema está en que el settimer no pasa bien el objeto

lag_0 09-11-2007 22:15:26
http://brainerror.net/scripts/javascript/blendtrans/
:)

lag_0 10-11-2007 11:16:10
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


La franja horaria es GMT +2. Ahora son las 11:18:38.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Traducción al castellano por el equipo de moderadores del Club Delphi