Ausfaden von div funktioniert in IE nicht

C-H · 18. Juni 2007

Hallo!

Ich habe schon im Forum und bei Google gesucht, aber nix hat mir weitergeholfen.

Ich versuche (im FF erfolgreich) ein div auszublenden. Hintergrund ist der, dass ich per AJAX etwas auf dem Server speichere und dem User eine Rückmeldung geben möchte, die 5 Sek. angezeigt und dann sanft ausgebended werden soll. Hier mein Code (erst JS):

HTML:

function fade_out(objName, browser, cssObj)
{
 fade_outObj = document.getElementsByName(objName);
 if(browser != "IE") // For FF and others
 {
  if(get_extern_style_property(cssObj, "opacity")>0)
  {
   opacity = get_extern_style_property(cssObj, "opacity");
   set_extern_style_property(cssObj, "opacity", opacity-0.10);
   
   window.setTimeout("fade_out('"+objName+"', '"+browser+"', '"+cssObj+"')", 35);
  }
 }
 else // For IE
 {
  opacity_tmp = get_extern_style_property(cssObj, "filter")
  var r, re;
  re = /\D/g;
  opacity_tmp = opacity_tmp.replace(re, "");
  
  if(opacity_tmp > 0)
  {
   set_extern_style_property(cssObj, "filter", "Alpha(Opacity="+(opacity_tmp-10)+")");
   window.setTimeout("fade_out('"+objName+"', '"+browser+"', '"+cssObj+"')", 35);
  }
 }
}
 
function set_extern_style_property(strSelectorText, strProperty, varValue)
{
 strSelectorTextIndex = -1;
 if(document.styleSheets)
 {
  // Get stylesheet
  if(document.styleSheets[0].cssRules) // FF and others
   objStyles = document.styleSheets[0].cssRules
  else // IE
   objStyles = document.styleSheets[0].rules
  
  // Search for classname
  for(var i=0; i<objStyles.length; i++)
  {
   // Falls der aktuelle Regelname dem gewünscheten Selektorname entspricht
   if(objStyles[i].selectorText.toLowerCase() == strSelectorText.toLowerCase())
   {
    strSelectorTextIndex = i;
    break;
   }
  }
 }
 
 if(strSelectorTextIndex > 0)
 {
  eval("objStyles["+strSelectorTextIndex+"].style."+strProperty+"='"+varValue+"'"); // Set new value (string)
 }
}
// Gets the value of a property of an css-object which is defined in an extern stylesheet document
function get_extern_style_property(strSelectorText, strProperty)
{
 if(document.styleSheets)
 {
  // Get stylesheet
  if(document.styleSheets[0].cssRules) // FF and others
   objStyles = document.styleSheets[0].cssRules
  else // IE
   objStyles = document.styleSheets[0].rules
  
  // Search for name
  for(var i=0; i<objStyles.length; i++)
  {
   // Falls der aktuelle Regelname dem gewünscheten Selektorname entspricht
   if(objStyles[i].selectorText.toLowerCase() == strSelectorText.toLowerCase())
   {
    strSelectorText = i;
    break;
   }
  }
 }
 // Get and return value
 return eval("objStyles["+strSelectorText+"].style."+strProperty);
}

Hier der CSS-Teil:

HTML:

div.usr_mgmt_save_info_ok {
 color: Green;
 text-align: left;
 font-weight: bold;
 
 background-color: #EAFFF0;
 border: 1px solid #128F35;
 
 margin: 5px;
 padding-top: 6px;
 padding-bottom: 10px;
 padding-left: 5px;
 padding-right: 5px;
 height: 28px;
 min-height: 28px;
 
 opacity: 1.0; /* FF and others */
 filter: Alpha(opacity = 100); /* IE only */
}

Wie ihr seht, habe ich eine externe css-Datei, in der ich einen filter für den IE und opacity für FF setze. im Javascript ändere ich diese Einstellung. Wie gesagt, im FF funktioniert es einwandfrei, im IE (auch 7) passiert Folgendes:
Die Transparenz des divs ändert sich nicht, wenn ich mir aber den Rückgabewert von get_extern_style_property ausgeben lasse (z.B. per alert()) sehe ich den erwarteten Wert. Wie passt das zusammen!?

Hat jemand 'ne andere (universelle) Lösung zum ausfaden lassen von divs (oder Objekten allgemein)

Danke schonmal

Quaese · 18. Juni 2007

Hi,

Sven Mintel hat hier eine Routine zum Faden vorgestellt. Leicht modifiziert arbeitet sie auch mit externen
StyleSheets - zumindest im IE und FF.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript">
<!--
/* Sven Mintel: http://www.tutorials.de/forum/1401236-post5.html */
IE  = document.all &&!window.opera;
GK  = window.sidebar;
AOB = [];
x   = 0;

function Fader()
{
  this.timeOut=false;
  this.fade=function(y)
    {
      clearTimeout(this.timeOut);
      this.value=Number(eval('this.object.'+this.attr))+(this.delta*this.evt[y]);
      if(this.value>=this.min && this.value<=this.max)
        {
          eval('this.object.'+this.attr+'='+this.value)
          this.timeOut=setTimeout('AOB['+this.index+'].fade('+y+')',this.rate);
        }
    }
}


function init_fader(obj,delta,rate,min,max,dir)
{
  if(IE || GK)
    {
      AOB.push(new Fader(x));
      OB        = AOB[x];
      OB.index  = x;
      OB.object = obj;

      if(IE)
        {
          OB.attr = 'filters.alpha.opacity';
          OB.faktor = 1;
        }
      else
        {
          OB.attr   = 'style.MozOpacity';
          OB.object.style.MozOpacity = window.getComputedStyle(OB.object, null).getPropertyValue('-moz-opacity');
          OB.faktor = 100;
        }
      OB.delta = delta/OB.faktor;
      OB.rate  = rate;
      OB.min   = min/OB.faktor;
      OB.max   = max/OB.faktor;
      OB.evt=[-1,1];
      if(dir)
      	OB.evt.reverse();
      OB.fade(0);
      x++;
    }
}
//-->
</script>
<style type="text/css">
</style>

</head>
<body><!--  -->
	<img id="fadeID" src="../bilder/fussball3.jpg" width="120" height="121" border="0" alt="">
  <button onclick="init_fader(document.getElementById('fadeID'), 2, 35, 0, 100, 0);">fader</button>
</body>
</html>

style.css

Code:

#fadeID{ -moz-opacity: 1.00;
         filter: Alpha(Opacity=100);}

Vielleicht hilft Dir das weiter.

Ciao
Quaese

Ausfaden von div funktioniert in IE nicht

C-H

Erfahrenes Mitglied

Quaese

Moderator

Neue Beiträge